Question

我正在使用ul和li创建一个垂直导航菜单我想要

跨越ul的全宽，所以我可以为每个菜单项添加下划线（如此网站（http://www.steffenallen.com/index.php ））

但是，li中有一个空格可以阻止它跨越父UI。有人能告诉我上面的网站是怎么做到的吗？或者，我需要做什么？

<nav>
<ul class='menu'>
    <li class="menuItem">
        <a href="about.html"> About </a>                    
    </li>

    <li class="menuItem"> <a href="#"> Album     </a> 
        <ul class="submenu">
            <li class="submenu-Item"><a href="nepal.html">Nepal </a></li>
            <li class="submenu-Item"><a href="seattle.html">Seattle</a></li>
            <li class="submenu-Item"><a href="SouthKorea.html">South Korea</a></li>

        </ul>


    </li>
    <li class="menuItem"> <a href="#"> Contact </a> </li>
    <!-- <li>   </li> -->

</ul>

我的CSS是

    ul,li{
    list-style: none;
    display: block;
}

ul.menu{
    width: 170px;
    /*position: absolute;*/
    /*width: 100%;*/
    /*margin-left: -20px;*/
    border: 1px solid orange;
}


ul.submenu{
    /*position: absolute;*/
    /*left: -999px;*/
    /*visibility: hidden;*/
    display: none;
}

li{
    width:140px;
    margin: 0;
    padding: 0;
    /*width:100%;*/
    border-left: 1px blue solid;
    border-right: 1px blue solid;
}

span{
    display: block;
}

li a, li span {
    /*width: 170px;*/
    /*width: 100%;*/
    border-bottom: #cbcbcb 1px solid;
}


li.menuItem, li.submenu-Item{
        text-align: right;
        margin: 1em 0em 1em 0em;
}
li.menuitem > a{
    color: #808080;
}

li a:hover{
    color: steelblue;
}

li.menuItem a.current{
    background-color: orange;
}

ul.menu:first-child{
    margin-top: 0

}

Answer 1

首先，你的CSS写得不好，因此有点难以理解。

您的代码中的主要问题恰好是正在应用的默认CSS。您可以按如下方式删除它：

ul, li {
   margin: 0; 
   padding: 0;
}

但是，我建议您按如下方式简化CSS代码。这仍然可以实现您所需要的一切，同时使您的代码更优雅，更易读。请参阅以下代码：

ul, li {
    margin:0px;
    padding:0px;
}
ul.menu {
    border: 1px solid Orange;
    width:200px;
}

ul.menu li {
    display:block;
    list-style-type:none;

}
ul.menu li a {
    border-bottom:1px solid #ccc;
    display:block;
    text-align:right;
    text-decoration: none;
}
ul.menu li ul {
    display:none;
}
ul.menu li:hover > ul {
    display:block;
}

ul.menu li ul li:last-child {
    border-bottom:none;
}

见以下工作：

ul, li {
    margin:0px;
    padding:0px;
}
ul.menu {
    border: 1px solid Orange;
    width:200px;
}

ul.menu li {
    display:block;
    list-style-type:none;
    
}
ul.menu li a {
    border-bottom:1px solid #ccc;
    display:block;
    text-align:right;
    text-decoration: none;
}
ul.menu li ul {
    display:none;
}
ul.menu li:hover > ul {
    display:block;
}

ul.menu li ul li:last-child {
    border-bottom:none;
}

<nav>
    <ul class='menu'>
        <li class="menuItem"> <a href="about.html"> About </a> 
        </li>
        <li class="menuItem"> <a href="#"> Album     </a> 
            <ul class="submenu">
                <li class="submenu-Item"><a href="nepal.html">Nepal </a>

                </li>
                <li class="submenu-Item"><a href="seattle.html">Seattle</a>

                </li>
                <li class="submenu-Item"><a href="SouthKorea.html">South Korea</a>

                </li>
            </ul>
        </li>
        <li class="menuItem"> <a href="#"> Contact </a> 
        </li>
        <!-- <li>   </li> -->
    </ul>

希望这有帮助!!!

Answer 2

在左侧有UL s的默认边距/填充，所以只需删除它。它是40px，如果使用了边距或填充，则取决于浏览器。

ul, li {margin-left: 0; padding-left: 0;}

右侧的空间是由您的宽度引起的，列表有170px，项目只有140px。

http://jsfiddle.net/8q9chvbh/

如何使<li>跨越<ul>？</ul> </li>跨越整个宽度

2 个答案: