Html 如何使边框在css菜单下聚焦？

我对css非常陌生，我想学习如何有效地使用css，但我现在有两个问题/问题，我想在菜单下设置灰色边框，但当我放大和缩小边框时，边框的行为会如此奇怪？对不起，我的代码不是很干净。我如何修改代码以获得更好的信誉

HTML

---

在不完全修改代码的情况下，只需考虑为每个“li”添加一个底部边框。。。 删除id='grey'并将边框底部添加到#header li{}。刷新，但请注意您的“子”菜单现在每个都有一个底部边框。他们继承了它，因此您需要关闭它们……因此在#header ul li声明中添加border bottom:none

现在…如果我们对你的代码进行快速修改

HTML

<div id="wrapper">
<div id="header">
    <div id="navwrapper">
        <ul id="nav">
            <li><a href="#Home" id="home"><span>Home</span></a></li>
            <li><a href="#link2">link2</a></li>
            <li><a href="#link3">link3</a>
                <ul class="sub">
                    <li><a href="#sub">sub</a></li>
                    <li><a href="#sub2">sub2</a></li>
                </ul>
            </li>
            <li><a href="#link4">link4</a></li>
            <li><a href="#link5">link5</a></li>
        </ul>
    </div>
</div>

在子菜单中使用更多的命名约定比在css中向下钻取更安全。您还需要注意，任何顶级CSS声明都是由其中的所有子级继承的。因此，如果您将#nav li声明为黑色，但希望所有“sub”列表元素都为蓝色，则需要在CSS文档中的初始声明之后明确说明

---

希望这有助于

float没有属性：center；在cssYeah中，我知道这只是一个测试，但我忘了删除它。我不明白你的问题。我尝试在菜单底部设置一个小灰色边框，当我缩小菜单时，它会变小，但灰色边框会水平延伸。你能提供一个JSFIDLE和一些代码吗？

#wrapper{
    float:center;
}
#grey{
    border-bottom:250px solid #a0a0a0;
    padding:0px;
    margin-left:203px;
    margin-right:387px;

}

#header{
    margin:auto;
    padding:0px;
    clear:both;
}
#header ul{
    margin:0px;
    padding:0px;
    line-height:30px;

}
#header li{
    margin:0px;
    padding:0px;
    list-style: none;
    float:left;
    position:relative;
    background-color:#000099;
    border:1 solid #0000CC;
    top:px;
    right:-15%;
}

#header ul li a{
    text-align:center;
    font-family:fantasy;
    text-decoration:none;
    display:block;
    height:30px;
    width:150px;
    color:black;
}
#header ul ul li a{
    color:#0000cc;

}
#header ul ul li{
        right:0%;
}

#header ul ul{
    margin:0px;
    padding:0px;
    position:absolute;
        opacity: 0;
    visibility: hidden;
    transition: all .1s ease-in;
}
#header ul li:hover ul {
    visibility:visible;
    opacity:1 ;
}
#header ul li:hover {
    background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
    clear:both;
    margin:0px;
    padding:0px;

}

<div id="wrapper">
<div id="header">
    <div id="navwrapper">
        <ul id="nav">
            <li><a href="#Home" id="home"><span>Home</span></a></li>
            <li><a href="#link2">link2</a></li>
            <li><a href="#link3">link3</a>
                <ul class="sub">
                    <li><a href="#sub">sub</a></li>
                    <li><a href="#sub2">sub2</a></li>
                </ul>
            </li>
            <li><a href="#link4">link4</a></li>
            <li><a href="#link5">link5</a></li>
        </ul>
    </div>
</div>

html, body { margin:10px;padding:0; }

#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }

#nav {

    padding:0;
    margin: 0 auto 0 auto;
    line-height:30px;
    height:30px;
    list-style:none }

#nav li {
    border-bottom: solid #a0a0a0 10px;
    margin:0;
    padding:0;
    float:left;
    background-color:#000099;
     }

#nav a {
    text-align:center;
    font-family:fantasy;
    text-decoration:none;
    display:block;
    height:30px;
    width:150px;
    color:black;
}

#nav li:hover { background-color:blue; }

#nav li:hover .sub {
    visibility:visible;
    opacity: 1;
}

#nav .sub a { color:#00c; }

#nav .sub {
    margin:0;
    padding:0;
    position:absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .1s ease-in;
    list-style: none;
}

#nav .sub li { clear:both; border-bottom: none; }