html – br在ul中无效

我的网站上有一个导航栏.

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 />放在< li>之间时,HTML不会验证.

我认为这是因为浮动：对;在CSS中,虽然我试图用float：none;来纠正它.

有没有办法让它垂直下降而不是水平下降,或者是否有替代< br />.我希望HTML通过W3C验证器HTML和CSS进行验证.

解决方法

< ul>的唯一有效子元素是< li>.使用CSS设置< li>的顶部和底部边距以填充其垂直距离.完全删除浮动样式,使它们显示为垂直排列的块元素.