HTML5タグのドロップダウンメニュー

私は楽しみのためにHTML5ドループメニューに取り組んでいます。私はW3Schoolsでドロップダウンメニューについて読んでいましたが、それらのすべてがCSSクラスとIDを使用しています。HTML5タグのドロップダウンメニュー

HTMLコードは次のとおりです。

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Super cool drop down menu</title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
    <nav> 
     <ul> 
      <li><a href="#Home">Home</a></li> 
      <li> 
       <a href="#">Super cool drop down menu!</a> 
       <ul> 
        <li><a href="#Link1">Link 1</a> 
        <li><a href="#Link2">Link 2</a> 
        <li><a href="#Link3">Link 3</a> 
       </ul> 
      </li> 
      <li><a href="#Contact">Contact</a></li> 
     </ul> 
    </nav> 


    <h3>Super cool dropdown menu</h3> 
    <p>Ga met je muis op Super cool dorp down menu! staan om de linkjes te tonen.</p> 
</body> 
</html>

style.cssには、次のコードがあります

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

nav ul li { 
    float: left; 
} 

nav ul li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

nav ul li a:hover, nav ul li ul li { 
    background-color: #f1f1f1; 
    display: block; 
} 

nav ul li ul { 
    display: inline-block; 
} 

nav ul li ul li { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

nav ul li ul li a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
}

を私はそれがほとんどの作業だと思いますが、それは第二のULのli要素が表示されません。誰かが私が間違っていることを教えてもらえますか？

出典

2016-11-20 StuiterSlurf

主な問題は、ネストされたリスト項目を「display：none」に設定していることです。

https://jsfiddle.net/1zq1s9ea/

：

nav ul li:hover ul li { 
    display: block; 
    ... 
}

が、私はそれで遊んするjsfiddleを作った：あなたは彼らが親li要素には、以下のCSSのような使用のものをホバリングされたときに表示させたい場合は

nav ul li ul li { 
    display: none; 
    ... 
}

「li」タグをすべて閉じるなど、私が作ったいくつかのマイナーな変更があったかもしれませんが、あなたが必要としていたのは上記のものでした。

出典

2016-11-20 17:52:30 pulekies

ありがとうございます。 – StuiterSlurf

もう1つ質問があります。私のコードは最後のリストアイテム要素を示しています。リストが正しく表示されていません。私が間違っていることを知っていますか？ https://jsfiddle.net/1zq1s9ea/2/ – StuiterSlurf

あなたは絶対にそのメニューのすべてのリスト要素を配置しているので、それらはすべてメニューの上に表示されます。代わりに、絶対にulを配置し、li要素を親に対して相対的に配置してみてください。 https://jsfiddle.net/1zq1s9ea/3/ 問題を調査する方法は、Chromeデベロッパーツールを使用することでした（Chromeでサイトを開いているときにf12を押す）。ページ上の要素を調べて、要素の位置（見えない要素の位置も含む）とそれらに適用されるCSSのすべてを見ることができます。 – pulekies

HTML5タグのドロップダウンメニュー

答えて

関連する問題