我无法弄清楚为什么第一层（图片和视频）下拉菜单会水平显示。我尝试了很多不同的东西但是却无法解决这个问题。第二层（肖像，风景，摘要）垂直显示。
我还是新手，所以我确信这是一个简单的解决方案。任何帮助将非常感谢。
/* Navigation Menu */
.nav {
list-style-type: none;
margin: 0;
padding: 0 15px;
float: right;
width: 100%;
background-color: rgba(256, 256, 256,.25);
}
li{
float: right;
list-style-type: none;
padding-top: 10px;
}
li a {
display: block;
color: rgb(0,0,0);
padding: 5px 16px 15px 16px;
font-family: 'Abel', sans-serif;
text-decoration: none;
}
li a:hover {
color: #000000;
padding-bottom: 10px;
border-bottom: 4px solid #000000;
}
li > .gallerydrop, .picturesdrop {
display: none;
}
li:hover > .gallerydrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
li:hover > .picturesdrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="nav.css" type="text/css">
<title>Nav</title>
<meta charset="utf-8">
</head>
<nav>
<ul class="nav">
<li><a href="contact.html">Contact</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="details.html">Details</a></li>
<li><a href="gallery.html">Gallery</a>
<ul class="gallerydrop">
<li><a href="videos.html">Videos</a></li>
<li><a href="pictures.html">Pictures</a>
<ul class="picturesdrop">
<li><a href="portraits.html">Portraits</a></li>
<li><a href="landscapes.html">Landscapes</a></li>
<li><a href="abstract.html">Abstract</a></li>
</ul>
</li>
</ul>
</li>
<li class="li"><a href="home.html">Home</a></li>
</ul>
</nav>
</html
答案 0 :(得分：0)
您正在将float: right应用于所有li个元素，但您显然不想这样做。所以诀窍就是只针对li这样的顶级.nav>li {float:right;}。
/* Navigation Menu */
.nav {
list-style-type: none;
margin: 0;
padding: 0 15px;
float: right;
width: 100%;
background-color: rgba(256, 256, 256,.25);
}
.nav>li {float:right;}
li{
list-style-type: none;
padding-top: 10px;
}
li a {
display: block;
color: rgb(0,0,0);
padding: 5px 16px 15px 16px;
font-family: 'Abel', sans-serif;
text-decoration: none;
}
li a:hover {
color: #000000;
padding-bottom: 10px;
border-bottom: 4px solid #000000;
}
li > .gallerydrop, .picturesdrop {
display: none;
}
li:hover > .gallerydrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}
li:hover > .picturesdrop {
display:block;
position: absolute;
padding: 0;
background-color: rgba(256, 256, 256,.25);
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="nav.css" type="text/css">
<title>Nav</title>
<meta charset="utf-8">
</head>
<nav>
<ul class="nav">
<li><a href="contact.html">Contact</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="details.html">Details</a></li>
<li><a href="gallery.html">Gallery</a>
<ul class="gallerydrop">
<li><a href="videos.html">Videos</a></li>
<li><a href="pictures.html">Pictures</a>
<ul class="picturesdrop">
<li><a href="portraits.html">Portraits</a></li>
<li><a href="landscapes.html">Landscapes</a></li>
<li><a href="abstract.html">Abstract</a></li>
</ul>
</li>
</ul>
</li>
<li class="li"><a href="home.html">Home</a></li>
</ul>
</nav>
</html