css/htmlのサブメニュー

Question

私はそれを上に置くとnavメニュータイプのオブジェクトから展開するサブメニューを持っています。私はサブメニューのクリック可能なリンクを各項目を作ってみました前に今、私のメインのナビゲーションメニューはそうのように見える...

<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のエラーの多くを修正しなければなりませんでした。

#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> 

それが動作した後、あなたが好きな色で行う、今、ここでCSSがあります。
あなたのリンクや画像にもaltタグを使用すると、SEOと集計が向上します。

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>