0
私はCSSスターターで、純粋なCSSドロップダウンは機能しません。このjsfiddleで私の純粋なCSSのドロップダウンが動作していない、誰もそれを修正する方法を知っている？
例：私はインターネット上で周りを探し、それを自分自身を修正しようとしているが、私は数え切れないほどの事を試してみましたが、それはまだ固定されていないされてきたhttps://jsfiddle.net/uevewfsy/
。浮動小数点を持つ：左;プライマリのulはそれを修正するようだが、それから私のnavはもう中心にない。
誰かが私は再びプログラミングをさらに行くことができますので、私を助けることができる希望;）あなたのnav > ul > liであなただけのvertical-align:topが欠落している
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 100;
}
.nav {
width: 100%;
height: 10%;
background-color: #333;
text-align: center;
position: fixed;
z-index: 150;
}
.nav ul {
height: 100%;
width: 100%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
margin: 0 20px 0 20px;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid white;
border-right: 1px solid white;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #333;
padding: 0 15px 0 15px;
}
.nav li:hover > ul {
display: block;
}
.nav ul a {
color: #A3ABA3;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #FFF;
}
@media only screen and (max-device-width: 480px){
}<body>
<div class="nav">
<ul>
<li>
<a href="#">PAGE</a>
<ul>
<li><a href="#">DROPDOWN</a></li>
<li><a href="#">DROPDOWN</a></li>
</ul>
</li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</div>
</body>