두 번째 드롭 다운 메뉴를 첫 번째 드롭 다운 메뉴에 추가

Question

Hibachi 메뉴 아래에 두 번째 드롭 다운 메뉴 (예 : 점심과 저녁 식사)를 추가해야합니다. HTML로 추가하는 방법을 알고 있지만 다른 사람이 내 CSS에 추가하여 도움이 될 수 있습니까? 나는 사용하고있는 네비게이션을위한 html과 css 코딩을 게시했다. 감사! 이 그래서 난 당신이 나머지를 직접 할 수 있도록하기 위하여려고하고 복사 및 붙여 넣기 코드에 대한 사이트가 아닙니다 떨어져

<nav id="topnav" class="clear"> 
    <ul> 
     <li class="active"><a href="#"> Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Menus</a> 
     <ul> 
      <li><a href="#">Lunch Menu</a></li> 
      <li><a href="#">Dinner Menu</a></li> 
      <li><a href="#">Appetizers Menu</a></li> 
      <li><a href="#">Hibachi Menus</a> </li> 
     <li><a href="#">Sushi Menu</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reservations</a></li> 

     <li><a href="#">Contact Us</a></li> 
      <li class="last"><a href="#">Press</a></li> 

    </ul> 
    </nav> 

Below is the CSS: 


#topnav{padding:20px 0;} 
#topnav li{float:left; margin-right:30px;} 
#topnav li li{margin-left:30;} 
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{ 
    display:block; 
    margin:0; 
    padding:0; 
    color:#c19c55; 
    background-color:#232323; 
} 
#topnav ul li a:link, #topnav ul ul li a:visited{border:none;} 

#topnav li a:hover, #topnav li.active a{ 
    color:#c19c55; 
    background-color:#232323; 
} 
#topnav li li a:link, #topnav li li a:visited{ 
    width:150px; 
    float:none; 
    margin:0; 
    padding:7px 10px; 
    color:c19c55; 
    background-color:#232323; 
    border:none; 
} 

#topnav li li a:hover{ 
    color:c19c55; 
    background-color:000; 
} 

#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; padding:5px 0 0 0; border-bottom:1px solid #666666;} 
#topnav ul ul a{width:140px;} 
#topnav li:hover ul{left:auto;} 
#topnav li:hover ul ul{left:auto;} 
#topnav li:hover{ 
    position:static; 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 
#topnav li.last{margin-right:0;} 

Answer 1

난을 heres 킥 스타트

<style> 


#topnav{padding:20px 0;} 
#topnav li{float:left; margin-right:30px;} 
#topnav li li{margin-left:30;} 
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{ 
    display:block; 
    margin:0; 
    padding:0; 
    color:#c19c55; 
    background-color:#232323; 
} 
#topnav ul li a:link, #topnav ul ul li a:visited{border:none;} 

#topnav li a:hover, #topnav li.active a{ 
    color:#c19c55; 
    background-color:#232323; 
} 
#topnav li li a:link, #topnav li li a:visited{ 
    width:150px; 
    float:none; 
    margin:0; 
    padding:7px 10px; 
    color:c19c55; 
    background-color:#232323; 
    border:none; 
} 

#topnav li li a:hover{ 
    color:c19c55; 
    background-color:000; 
} 
#topnav ul ul ul{ 
    display: none; 

    position: absolute; 
    right: -150px; 
} 

#topnav ul ul li{ 
    position: relative; 
} 

#topnav ul ul li:hover ul{ 
    display: inline-block; 
} 

#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; padding:5px 0 0 0; border-bottom:1px solid #666666;} 
#topnav ul ul a{width:140px;} 
#topnav li:hover ul{left:auto;} 
#topnav li:hover ul ul{left:auto;} 
#topnav li:hover{ 
    position:static; 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 
#topnav li.last{margin-right:0;} 
</style> 
<nav id="topnav" class="clear"> 
    <ul> 
     <li class="active"><a href="#"> Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Menus</a> 
     <ul> 
      <li><a href="#">Lunch Menu</a></li> 
      <li><a href="#">Dinner Menu</a></li> 
      <li><a href="#">Appetizers Menu</a></li> 
      <li><a href="#">Hibachi Menus</a> 
      <ul> 
       <li><a href="#">Lunch Menu</a></li> 
       <li><a href="#">Dinner Menu</a></li> 
       <li><a href="#">Appetizers Menu</a></li> 
       <li><a href="#">Hibachi Menus</a> </li> 
      <li><a href="#">Sushi Menu</a></li> 
      </ul> 

      </li> 
     <li><a href="#">Sushi Menu</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reservations</a></li> 

     <li><a href="#">Contact Us</a></li> 
      <li class="last"><a href="#">Press</a></li> 

    </ul> 
    </nav> 

행운을 빕니다, 당신을 시작했습니다!

Answer 2

당신은 쉽게 jQuery 플러그인 droppy를 사용하여 드롭 다운 메뉴를 만들 수 있습니다. 걱정할 코딩 번거 로움이 없습니다. http://jsfiddle.net/wVaek/

: 여기

<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/droppy/stylesheets/droppy.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"/></script> 
<script src="http://onehackoranother.com/projects/jquery/droppy/javascripts/jquery.droppy.js"/></script> 
<nav> 
    <ul id="topnav"> 
     <li class="active"><a href="#"> Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Menus</a> 
     <ul> 
      <li><a href="#">Lunch Menu</a></li> 
      <li><a href="#">Dinner Menu</a></li> 
      <li><a href="#">Appetizers Menu</a></li> 
      <li><a href="#">Hibachi Menus</a> </li> 
     <li><a href="#">Sushi Menu</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reservations</a></li> 

     <li><a href="#">Contact Us</a></li> 
      <li class="last"><a href="#">Press</a></li> 

    </ul> 
    </nav> 



<script type='text/javascript'> 
    $(function() { 
    $('#topnav').droppy(); 
    }); 
</script> 

라이브 예입니다 이 예제를 참조하십시오