css - 如何在水平 css 导航中删除悬停时的分隔符？

Question

我有一个 CSS 导航，菜单项之间有一个分隔符。当我将鼠标悬停在一个包含子菜单(例如“生活方式”)的元素上时，这些分隔符看起来非常难看，因为它们不在链接背景区域“内”，而是向左和向右延伸。有没有办法只在悬停和事件类上删除这些分隔符？

这是我的 CSS 代码:

    #mainnav {
    width: auto;
    height: 100px;
    padding-top: 26px;
    float: right;
    right:0;
    z-index:100;
}
#mainnav ul,
#mainnav li,
#mainnav span,
#mainnav a {
  position: relative;
  margin: 0;
  padding: 0;
}
#mainnav ul{
    list-style-type:none;
}
#mainnav ul li:hover {
    background-color: #AEB67F;
}
#mainnav ul li a {
    padding: 50px 12px 57px 12px;
    text-align: center;
}
#mainnav ul li a:hover, #mainnav ul li a.active  {
    background-color: #AEB67F;
    padding: 50px 12px 57px 12px;
}
#mainnav > ul > li {
  float: right;
}
#mainnav ul:after {
    content: ""; clear: both; display: block;
}
#mainnav ul li {
    border-left:solid 1px #B4BC84;
}
#mainnav ul li:last-child {
    border:none;
}
#mainnav ul ul li + li:after {
    content: "";
    clear:both;
}
#mainnav ul ul {
    display: none;
}
#mainnav ul li:hover > ul {
    display: block;
}
#mainnav ul ul {
    background: rgb(174,182,127); 
    opacity: 0.9;
    border-radius: 0px; 
    position: absolute; 
    top: 74px;
    width:170px;
}
#mainnav ul ul li {
    float: none; 
    border-top: none;
    position: relative;
    padding: 8px 12px 8px 0;
    border-bottom: 1px dotted #94A062;
    border-top: none;
}
#mainnav ul ul li a {
    color: #fff;
    text-decoration:none;
    text-align:left;
    padding: 8px 30px 8px 12px;
}
#mainnav ul ul li:last-child a {
    border-bottom: none;
}
#mainnav ul ul li a:hover {
    background: rgb(48,50,40);
     -webkit-transition: all .2s ease-in-out;  
     -moz-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out;  
     -o-transition: all .2s ease-in-out;  
     transition: all .2s ease-in-out;
     padding: 8px 30px 8px 18px;
}
#mainnav ul ul li:hover {
    background: rgb(48,50,40);
    padding: 8px 0;
    border: none;
}

这是我正在处理的网站的链接: http://prestigetrips.com/lapointe/index.php?id=1

希望对您有所帮助!提前致谢!

Answer 1

只需从 #mainnav ul li { 中删除 border-left:solid 1px #B4BC84; 行。

希望对您有所帮助!