如何用CSS构建子菜单？

Question

<div class="header"> 
    <div id="navigation"> 
     <div class="center"> 
      <div class="logo"></div> 
      <ul class="right"> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
</div> 

------------------------ CS S ------------------- -------------

#navigation { 
     position:fixed; 
     display:block; 
     top: 0; 
     width: 100%; 
     height:35px; 
     padding-top: 15px; 
     -webkit-box-shadow: 0px 0px 8px 0px #000000; 
     background-color: rgba(1,1,1,0.8); 
     color:rgba(1,1,1,0.8); 
     border-bottom:1px solid black; 
} 

.center {width: 1000px; margin: 0 auto;} 

div.logo {display:inline-block; 

       } 


ul, li { 
     padding:0; 
     margin:0; 
} 
#navigation ul { 
     list-style: none; 
     float:right; 
} 
#navigation ul li { 
     display:inline; 
} 

#navigation a { 
    text-decoration:none; 
     font-size:14px; 
     padding: 0 15px; 
     color:white; 
} 

#navigation a:hover { 
     color: grey; 
} 
#content { 
     width: 800px; 
     margin: 0 auto; 
     margin-top: 80px; 
} 

Answer 1

一个例子会是这样

fiddle

可以修改code你

HTML：

<div class="containerc"> 
    <div class="navbarc" id="navbarc"> 
    <div class="username"> 
    <!-- base menu --> 
     <ul> 
      <li onmouseover="showsubmenu()" onmouseout="hidesubmenu()"> <a href="#"> <div id="menuname"> Menu </div></a> 
       <!-- actual menu --> 
       <ul> 
        <li><a href="#"> sub1 hover here </a> 
         <!-- sub menu --> 
         <ul> 
          <li><a href="#"> submenu 2 </a> 
          </li> 
          <!-- for more submenu within sub menu add ul tags and li tags within that here --> 
         </ul> 

        </li> 
        <li><a href="#">Logout</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

.containerc>.navbarc { //setting the dimensions and font properties 
padding-left:15px; 
padding-right:15px; 
padding-top:0px; 
margin-left:auto; 
margin-right:auto; 
font-size:18px; 
font-style:bold; 
z-index:10; 
} 
.navbarc { 
width:100%; //to occupy the full width of screen 
height:45px; 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #494846), color-stop(1, #0a0909)); 
border:1px solid #e7e7e7; 
position:fixed;  // this will take menu bar along the vertical scroll 
color: white; 
} 
#navbarc ul {  
margin: 0; 
padding: 0; 
list-style: none; 
} 
#navbarc a:link, #navbarc a:visited { //changing the style properties of anchor tags 
color: white; 
text-decoration: none; //removes the underline 
} 
#navbarc a { 
display: block; 
padding: 6px 8px; 
} 
#navbarc li { 
float: left; 
margin-right: 1px; 
position: relative; 
} 
#navbarc li li { //for properties of submenu 
width: 160px; 
margin-top: 1px; 
background-color: #494846; 
} 
#navbarc li:hover { //on hover change the background color 
background-color: #6E6E6E; 
} 
#navbarc li li:hover { 
background-color: #6E6E6E; 
} 
#navbarc ul ul { //for properties of submenu 
position: absolute; 
visibility: hidden; 
font-size:15px; 
} 
#navbarc ul ul ul { //for properties of submenu within submenus 
position: absolute; 
left: 100%; 
top: -2px; 
border: solid 1px transparent; 
} 
#navbarc li:hover > ul { // on hover show the submenu 
visibility: visible; 
} 
.menuname { //styling for base menu 
display:inline-block; 
padding-top:10px; 
position:relative; 
} 

的Javascript

$(document).ready(function(){ 
    $("#navbarc ul ul").hide(); //to hide expanded menu initially 

function showsubmenu() { 
    $("#navbarc ul ul").show(); //to show the list on function call 
} 

function hidesubmenu() { 
    $("#navbarc ul ul").hide(); // to hide the list on function call 
} 
});