Question

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

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: right;，但我尝试使用float: none;进行更正。

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

Answer 1

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

Answer 2

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
}

Answer 3

我以这种方式优化了您的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;
    }

现在确实如此。

br在ul中无效

3 个答案: