html - 如何使用 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>

------------------------C S 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

你可以为你修改代码

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
 }
});