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

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

我希望这会对你有所帮助！

Answer 2

你可以制作一个像

这样的短剧本

$('.menu1').mouseenter(function{
    $(this).css('border-left', '0');
}).mouseleave(function{
    $(this).css('border-left', 'add your values here');
});

这是一个解决方案。

Answer 3

我已经玩过了并想出了这个：

将#mainnav ul li从border-left更改为border-right，
和

#mainnav ul li:last-child {
   border: medium none;
}

为：

#mainnav ul li:first-child {
   border: medium none;
}

现在添加以下样式：

#mainnav ul li:hover,
#mainnav ul li:hover + li {
   border: none;
}

它被称为Adjacent sibling selector 它应该在IE8及更高版本中运行。

Answer 4

我找到了解决方案！我不得不添加

#mainnav ul li:first-child:hover{
margin-right: 0;
}

现在没有“1px跳跃”，看起来很好。谢谢大家的帮助！

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

4 个答案: