将鼠标悬停在菜单项上会删除左边框。如何在悬停时离开菜单边框？答案

【问题标题】：Hovering over menu item removes left border. How do I leave menu border on hover?将鼠标悬停在菜单项上会删除左边框。如何在悬停时离开菜单边框？
【发布时间】：2014-03-24 17:37:13
【问题描述】：

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

http://jsfiddle.net/aYsKp/2/

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;
}

【问题讨论】：

尝试在您的 CSS 中将 #menu ul li:first-child {} 更改为 #menu ul li{}。现在，这种风格给你的第一个孩子一个边界，但不是其余的。删除它将为所有这些提供边界。或者，将其更改为 #menu ul li:hover {} 或基本上只是将 border-left 属性移动到现有的 #menu ul li:hover 选择器部分。
这有帮助。我在#menu ul li{} 上将border-right 更改为border-left，然后将border-right 添加到#menu ul li:last-child{}。谢谢！
没那么难，检查一下：jsfiddle.net/nightire/aYsKp/3，只有两行更改
现在一切都好，伙计们/姑娘们。谢谢！

标签： html css

【解决方案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 的背景颜色指定为白色。

【讨论】：

【解决方案2】：

我用来在 A 标签中设置边框或空间信息，而不是在 LI 中，使 LI 像一个“不可见”标签，将所有属性设置为 A，使用 A display:inline-block。

【讨论】：