Question

我已经制作了一个菜单，利用左右边框分隔每个菜单项。当鼠标悬停在菜单上时，背景变为较浅的阴影，这就是我想要的。但是，悬停也会覆盖左边界。我怎样才能阻止边界消失？我确定这已在其他地方得到解答，但我无法找到它。提前谢谢。

HTML：

<div id="header">
<div id="menu">
        <ul>
        <li><a href="index.html">HOME</a>

        </li>
        <li><a href="products.html">PRODUCTS</a>

        </li>
        <li><a href="videos.html">VIDEOS</a>

        </li>
        <li><a href="downloads.html">DOWNLOADS</a>

        </li>
        <li><a href="contact.html">CONTACT</a>

        </li>
        <li><a href="about.html">ABOUT</a>

        </li>
    </ul>
</div>
</div>

CSS：

#header {
    width:960px;
    margin: 10px auto 5px auto;
    background-color: #727272;
}
#menu {
    max-width:828px;
    bottom:0;
    right:0;
    font: 12px/18px sans-serif;
}
#menu a {
    text-decoration: none;
    display:block;
    padding: 10px 32px;
    color:#FFF;
}
#menu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
#menu ul li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    border-right: 1px solid #FFF;
}
#menu ul li:first-child {
    border-left: 1px solid #FFF;
}
#menu ul li:hover {
    background-color:#818181;
}

Answer 1

Try this approach.

#header {
    width:960px;
    margin: 10px auto 5px auto;
}
#menu {
    max-width:828px;
    bottom:0;
    right:0;
    font: 12px/18px sans-serif;
    background-color: white;
}
#menu a {
    text-decoration: none;
    display:block;
    padding: 10px 32px;
    color:#FFF;
}
#menu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
#menu ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;    
     background-color: #727272;
    margin:0;
}
#menu ul li:hover {
    background-color:#818181;
}

我所做的只是将右边距和指定的背景颜色删除为菜单div的白色。

Answer 2

我用来设置A标签中的边界或空间信息，而不是LI，使LI像“不可见”标签一样，使用A display：inline-block将所有属性设置为A.

将鼠标悬停在菜单项上会删除左边框。如何在悬停时保留菜单边框？

2 个答案: