我的网站上有一个导航栏。
HTML：
<nav id="navigation">
<a href="index.html"> <h1>My Cooking Webpage</h1> </a>
<ul>
<li>
<a href="nav/recipes.html" class="right_categories">Recipes</a>
</li>
<li>
<a href="nav/categories.html" class="right_categories">Categories</a>
<ul id="subcategories">
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</li>
<li>
<a href="nav/about.html" class="right_categories">About Us</a>
</li>
</ul>
</nav>
CSS：
#navigation {
font-size: 24px;
float: right;
}
#featured-image {
width: 800px;
height: 600px;
}
.breadcrumb {
font-size: 20px;
}
#subcategories {
display: none;
}
nav {
display: block;
position: relative;
}
nav li {
display: block;
margin-right: 10px;
float: right;
}
nav li:hover #subcategories {
display: block;
}
nav a {
color: white;
}
nav ul {
padding: 0px;
list-style-type: none;
}
#featuredtext {
position: relative;
}
#page-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
position: relative;
z-index: 1;
padding: 10px;
}
#slider_wrapper {
width: 100%;
text-align: center;
}
#navigation {
width: 100%;
}
如果有帮助，我的DOCTYPE是HTML5（<!DOCTYPE html>）。
问题是，当我将鼠标悬停在“类别”链接上时，下拉框会水平而不是垂直下降。当我把<br />s放在<li>s之间时，HTML不会验证。
我认为这是因为CSS中的float: right;，尽管我试图用float: none;来纠正它。
<ul>唯一有效的子元素是<li>。使用CSS填充<li>的顶部和底部边距以填充其垂直距离。完全删除float样式，使它们显示为垂直排列的块元素。
nav li {
display: block; <-- remove, this is already a block item
margin-right: 10px; <-- move to your A tag declaration and also add display:block to your A tag
float: right; <-- remove, this is causing it to be horizontal
}
我用这种方式优化了你的HTML和CSS：
<ul class="menu">
<li class="sub">
<a href="nav/recipes.html" class="right_categories">Recipes</a>
</li>
<li class="sub">
<a href="nav/categories.html" class="right_categories">Categories</a>
<ul id="subcategories">
<li class="sub">
<a href="#">Item 1</a>
</li>
<li class="sub">
<a href="#">Item 2</a>
</li>
<li class="sub">
<a href="#">Item 3</a>
</li>
</ul>
</li>
<li class="sub">
<a href="nav/about.html" class="right_categories">About Us</a>
</li>
</ul>
CSS：
#ul
{
margin:0;
padding:0;
}
ul.menu li
{
display:inline;
position:relative;
}
li.sub > ul
{
display:none;
}
ul.menu li.sub:hover > ul
{
position:absolute;
top:100%;
left:0;
display:block;
}
ul.menu ul li.sub:hover > ul
{
position:absolute;
top:0;
left:100%;
display:block;
}
现在是真的。