我的网站上有一个导航栏。
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>
The 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%;
}
My DOCTYPE是 HTML5（<!DOCTYPE html>）如果有帮助的话。
问题是，当我将鼠标悬停在“类别”链接上时，下拉框会水平而不是垂直下降。当我把<br />之间的<li>也就是说，HTML 不验证。
我认为这是因为float: right;在 CSS 中，尽管我尝试用float: none;.
有没有办法让它垂直而不是水平下降，或者有替代方法<br />。我希望 HTML 通过 W3C 验证器进行验证，HTML http://validator.w3.org/ and CSS http://jigsaw.w3.org/css-validator/.
a 的唯一有效子元素<ul> is a <li>。风格<li>的顶部和底部边距使用CSS来填充它们的垂直距离。去除float完全样式以使它们显示为垂直排列的块元素。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
