在css/html中的子菜單

Question

我有一個子菜單，當我將鼠標懸停在它上面時，它從一個導航菜單類型對象中展開。現在，我的主導航菜單看起來像這樣...

<div id= "navbar"> 
    <ul> 
     <li><a href= "#" class= "navlink" id= "first"> First 
       <div class= "firstsubmenu"> 
        <ul> 
         <li> <a href= "#" class="firstsubmenulink"> First sub menu option </li> 
         <li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li> 
         etc... 
        </ul> 
       </div></a></li> 
     <li><a href= "#" class= "navlink" id="second"> Second 
      <div class= "secondsubmenu"> 
       <ul> 
        ..and so on 
    </ul> 
</div> 

現在，我的CSS是尋找像

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
overflow:hidden; 
} 

li 
{ 
float:left; 
} 

.navlink:link 
{ 
display:block; 
width:120px; 
text-align:center; 
padding:10px; 
text-decoration:none; 
color:#FFFFFF; 
} 

.navlink:hover 
{ 
background-color:#ADD8E6; 
color:#FFFFFF; 
} 
.navlink:visited 
{ 
background-color:#ADD8E6; 
color:#FFFFFF; 
} 

之前，我試圖使子菜單中的一個可點擊的鏈接每一個項目，都顯示出完美無瑕。 IE：firstsubmenu表現完美。它的CSS是

.firstsubmenu 
{ 
display : none; 
position : absolute; 
left : 75px; 
top : 32px ; 
background-color : red; 
width : 930px; 
height : 25px; 
z-index : 10; 
} 

但現在，我添加了鏈接（做了塊內的每一個列表元素），firstsubmenu不再出現。 每個鏈接的CSS看起來是這樣的

.firstsubmenulink 
{ 
display:block; 
width:120px; 
text-align:center; 
padding:10px; 
text-decoration:none; 
color:#FFFFFF; 
} 

但正如我所說，子菜單甚至不再出現。我意識到這是一個很長的帖子，但任何建議都會很棒。

Answer 1

jsBin live demo

我不得不修復很多錯誤，在你的HTML。這裏是CSS：

#navbar ul{ 
    list-style:none; 
    margin:0; padding:0; 
    display:table; 
} 
#navbar li{ 
    top:0px; 
    background:#bbf; 
    display:inline-block; 
    width:100px; 
} 
#navbar li ul li{ 
    display:none; 
} 
    #navbar li:hover li{ 
    display:block; 
    } 

和固定的HTML：

<div id="navbar"> 
    <ul> 
     <li> 
      <a href="#" class="navlink" id="first"> First</a> 
      <ul class="firstsubmenu"> 
        <li><a href="#">1. option</a></li> 
        <li><a href="#">2. option</a></li>   
      </ul> 
     </li> 
     <li> 
      <a href= "#" class= "navlink" id="second"> Second</a> 
      <ul class="secondsubmenu"> 
        <li><a href="#">1. option</a></li> 
        <li><a href="#">2. option</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

現在，它的工作原理後，做任何你想要的顏色。
也可以在您的鏈接和圖像中使用alt標籤，它可以提高您的搜索引擎優化和合規性。

Answer 2

您可以使用下面的CSS並創建基於純CSS的菜單。

的CSS：

body { padding: 3em; } 
#navbar * { padding:0; margin: 0; font: 1em arial; } 
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; } 

#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; } 
#navbar a:hover { background: #C6991D; } 
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; } 
#navbar ul li { float: left; width: 120px; } 
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{ 
    display:none; 
    list-style-type:none; 
    width: 120px; 
    } 

#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul { 
    display:block; 
    } 
#navbar:hover ul li:hover ul li:hover ul { 
    position: absolute; 
    margin-left: 120px; 
    margin-top: -20px; 
    } 

結構：

<div id="navbar"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Abous Us &nbsp; &nbsp; &#187;</a> 
      <ul> 
      <li><a href="#">About us 1</a></li> 
      <li><a href="#">About us 2 &nbsp; &#187;</a> 
       <ul> 
        <li><a href="#">XXX</a> 
        <li><a href="#">XXX</a> 
        <li><a href="#">XXX</a> 
       </ul> 
      </li> 
     </ul> 

    </li> 
    <li><a href="#">Download</a></li> 
    <li><a href="#">Menus &nbsp; &nbsp; &#187;</a> 
     <ul> 
      <li><a href="#">Menus 1</a></li> 
      <li><a href="#">Menus 2 &nbsp; &nbsp; &#187;</a> 
       <ul> 
        <li><a href="#">Menus 2-1</a> 
        <li><a href="#">Menus 2-2</a> 
        <li><a href="#">Menus 2-3</a> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Feedback</a></li> 

</ul>