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> 我的网站上有一个导航栏.

HTML：

<nav ID="navigation"><a href="index.HTML"> <h1>My Cooking Webpage</h1> </a><ul>    <li>        <a href="nav/recipes.HTML" >Recipes</a>    </li>    <li>        <a href="nav/categorIEs.HTML" >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" >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>的顶部和底部边距以填充其垂直距离.完全删除浮动样式,使它们显示为垂直排列的块元素. 总结

以上是内存溢出为你收集整理的html – br在ul中无效全部内容，希望文章能够帮你解决html – br在ul中无效所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。