1
它的上行線路與一個導航菜單嵌套在一個父UL。當懸停在父UL的L1（橙色下面的圖像中）時，嵌套的UL（綠色圖像below_應顯示正下方的LI。CSS來作出嵌套的UL父UL顯示的李在適當的位置上父李懸停
.clearer {
clear: both;
}
body {
font-family: sans-serif;
font-size: 13px;
margin: 0;
padding: 0;
position: relative;
vertical-align: baseline;
}
div#header {
background: none repeat scroll 0 0 #101816;
float: left;
height: 56px;
margin: 0;
padding: 0;
width: 320px;
}
div#header-content-container {
height: 100%;
margin: 0;
padding: 0;
width: 320px;
}
a#logo {
background: blue;
background-image: none;
box-shadow: none;
float: left;
height: 38px;
margin: 9px 0 0 6px;
width: 238px;
}
#top-nav-container {
margin: 0 0 0 264px;
position: absolute !important;
}
nav {
background-color: #3e4f4c;
height: 56px;
margin: 0;
width: 56px;
}
nav a#menu_button {
background: #3e4f4c;
display: block;
font-size: 30px;
height: 56px;
margin: 0;
padding: 0;
text-align: center;
width: 56px;
}
nav ul {
background: black repeat-y scroll 0 0 transparent;
border-radius: 0;
box-shadow: none;
display: block;
left: -184px;
list-style: outside none none;
margin: 0;
padding: 0;
position: absolute !important;
width: 240px;
}
nav ul li:first-child {
border-top: medium none;
}
nav ul li:last-child {
border-bottom: medium none;
}
nav ul li:last-child:hover {
background: none repeat scroll 0 0 #3e4f4c;
}
nav ul li {
background: #3e4f4c;
border-bottom: 1px solid #191b1a;
border-top: 1px solid #697774;
display: block;
float: none;
height: 48px;
margin: 0 0 0 10px;
position: relative;
text-align: left;
width: 230px;
}
nav ul li a {
color: #eee;
display: block;
font-size: 13px;
padding: 16px 0 15px 15px;
position: relative;
text-decoration: none;
}
nav ul ul {
background: black repeat-y scroll 0 0 transparent;
border-radius: 0;
box-shadow: none;
display: none;
left: -10px;
list-style: outside none none;
padding: 0;
position: relative !important;
top: 0;
width: 240px;
}
nav ul li:first-child {
border-top: medium none;
}
nav ul ul li {
background: none repeat scroll 0 0 green;
border-bottom: 1px solid red;
display: block;
float: none;
height: 38px;
margin: 0 0 0 10px;
position: relative;
text-align: left;
width: 230px;
}
nav ul ul li a {
color: #fff;
display: block;
padding: 0;
position: relative;
text-decoration: none;
}
nav ul li:hover a.top {
background: #d8a900;
color: black;
}
nav ul li:hover > ul {
display: block;
}<body>
<div id="header">
<div id="header-content-container"> <a href="/" title="Logo" id="logo">Logo!</a>
<div id="top-nav-container">
<nav>
<a id="menu_button"></a>
<ul class="top">
<li>
<a class="top" href="/">HOME</a>
</li>
<li>
<a class="top" href="#">SERVICES</a>
<ul>
<li><a href="#">Item AAAAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAAAAAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAAAAAAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAAAAAA</a>
</li>
<li><a href="#">Item AAAAAAAAAAAAAA</a>
</li>
</ul>
</li>
<li>
<a class="top" herf="#">LIBRARY</a>
</li>
<li>
<a class="top" href="#">CONTACT</a>
<ul>
<li><a href="#">Item BBBBBBBBBBBBB</a>
</li>
<li><a href="#">Item BBBBBBB</a>
</li>
<li><a href="#">Item BBBB</a>
</li>
</ul>
</li>
<li></li><!-- extra li for styling later -->
</ul>
</nav>
</div>
</div>
</div>
<div class="clearer"></div>
</body>
你需要在旁邊的子菜單..？ –
無子菜單UL下面的父母LI – user743094