1

我有一个 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

我希望你能帮忙！提前致谢！

4

4 回答 4

0

我玩过并想出了这个：

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

它被称为相邻兄弟选择器。
它应该在 IE8 及更高版本中工作。

于 2013-07-05T06:57:01.993 回答
0

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

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

现在没有“1px 跳跃”了，看起来还不错。谢谢大家的帮助！

于 2013-07-06T16:27:51.207 回答
0

您可以制作一个简短的脚本，例如

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

这是一种解决方案。

于 2013-07-05T03:15:06.950 回答
0

只需border-left:solid 1px #B4BC84;从#mainnav ul li {.

我希望这能帮到您！

于 2013-07-05T02:53:54.190 回答