2017-07-13 23 views
1

なぜHTMLからの行が見つからないのですか?これは私に起こり続ける。 "妻"が見つからないhtmlリストの行が見つからないのはなぜですか?これは私に起こり続ける。 "妻"が見つからない

ここにコードを作成してみようとしています。単純なドロップダウンメニューですが、ドロップダウンの1つが表示されません...詳細を追加するように求められていますが、それだけです!

body { 
 
    margin: 0; 
 
    border: 0; 
 
    background-color: blue; 
 
    font-family: arial; 
 
} 
 

 
ul li { 
 
    text-decoration: none; 
 
    float: left; 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 25%; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 

 
ul li:hover { 
 
    background-color: green; 
 
} 
 

 
ul li ul li { 
 
    display: none; 
 
} 
 

 
ul li { 
 
    position: relative; 
 
} 
 

 
ul li:hover ul li { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 100%; 
 
    left: 0; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title> 
 
     testy 
 
    </title> 
 
<charset-"UTF-8"> 
 
<meta name="viewport" display="width=display-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 

 
<ul> 
 
    <li><a></a>Bowie</a></li> 
 
    <li><a>Young</a></li> 
 
    <li><a>Page</a></li> 
 
    <li><a>Elvis</a> 
 
     <ul> 
 
      <li><a>wives</a></li> 
 
      <li><a>homes</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 

 
</body> 
 
</html>

答えて

0

それをチェックアウト...

は、それはすべてがはるかに優れてNOW-応答ときちんとした作品常に

body { 
 

 
margin: 0; 
 
border: 0; 
 
background-color: blue; 
 
font-family: arial; 
 
} 
 

 
ul li { 
 
    text-decoration: none; 
 
    float: left; 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
    list-style: none; 
 
    width: 25%; 
 
    line-height: 50px; 
 
    text-align: center; 
 

 

 
} 
 
ul li:hover { 
 
    background-color: green; 
 
} 
 

 

 
ul li ul { 
 
    display: none; 
 
} 
 
ul li ul li { 
 
    width:100%; 
 
} 
 

 
ul li { 
 
    position: relative; 
 
} 
 

 
ul li:hover ul { 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 100%; 
 
    left: 0; 
 
    top:100%; 
 
    padding:0; 
 
}
<ul> 
 
    <li><a>Bowie</a></li> 
 
    <li><a>Young</a></li> 
 
    <li><a>Page</a></li> 
 
    <li><a>Elvis</a> 
 
     <ul> 
 
      <li><a>wives</a></li> 
 
      <li><a>homes</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

+1

ちょっとしたコードを投げ捨てるのではなく、変更した理由とその理由を説明するとよいでしょう。 – ceejayoz

+0

確かに次回、私はそれを気にする@ceejayoz –

0

あなたは絶対にリスト要素を配置しましたので、彼らはすべて互いの上に積み重ねられています。

ul li:hover ul li { 
    position: absolute; 
+0

li非表示ulを非表示にしないでください。誰もが助けてくれてありがとう。 – nooby

関連する問題