主页和联系我们选项卡在我的下拉导航菜单中的悬停效果不是我想要的答案

【问题标题】：Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it主页和联系我们选项卡在我的下拉导航菜单中的悬停效果不是我想要的
【发布时间】：2014-04-02 04:45:57
【问题描述】：

问题是当我将鼠标悬停在主页项目/选项卡上时，它会变成一个方形块并覆盖导航栏的圆角。当我将鼠标悬停在“联系我们”选项卡/项目上时，它会变成一个方形块并停止，并且不会到达导航栏的末尾。如何解决这些悬停问题？

我的导航栏的html：

<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a>
</li>

<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/">What We Do</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>
</li>
</ul>
</div>

我的导航栏的 css：

#nav {

    display: block;

    position:relative;

    border: 1px solid #002799;

    background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -o-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    padding: 0px 0px 0px 0px;

    border-radius: 15px;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    height: 40px;

    width: 470px;

    margin: 0px auto;

    font: Bold 16px Verdana;


}

#nav ul {

    margin: 0px;

    padding: 0px;

    min-width:250%;


}


#nav li {

    list-style: none;

    float: left;

    position: relative;



    width:auto;
}




#nav ul li {

    list-style: none;

    float: left;

    position: relative;

    width:auto;

}

#nav ul li:last-child a {

    border:none;

}

#nav ul li:hover {

    background: #060652;







}



#nav ul li:hover ul {

    display:block;

    width:100%;
}

#nav ul ul {

    display: none;

    position:absolute;

    left:0px;

    min-width:250%;

    z-index: 999;

    background-color: #4970E3;

}

#nav ul ul li {

    border: 1px solid #FFFFFF;

    display:block;

    float: none;


    z-index: 999;

    width: auto;

}

#nav ul ul li a {

    border-right: none;

    font: Bold 16px Verdana;

    width: auto;

}

#nav ul li a {

    text-decoration: none;

    display: block;

    border-right: 1px solid #121B3E;

    padding: 10px 15px;

    color: #fbfbfb !important;

}

【问题讨论】：

标签： html css

【解决方案1】：

将此行添加到您的css：

 #nav ul li.right:hover {
   border-radius: 14px;
   border-bottom-left-radius:0;
   border-top-left-radius:0;
   width:137px;
}

#nav ul li.left:hover {

  border-radius: 14px;
  border-bottom-right-radius:0;
  border-top-right-radius:0;

}

并更改 li 标签包含 Home 像 this：

<li class="left"><a href="http://osweb01.ostech.com.au/">Home</a>
</li>

而li 标签包含Contact Us，例如this：

<li class="right"><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>

This is Demo

【讨论】：

这成功了！工作方式与您的演示完全相同。谢谢基亚拉什。
好的，我会这样做的。我在 Internet Explorer 中发现了一个轻微的缺陷。在正常状态下，“联系我们”选项卡的右边框和块之间只有一点白色。如果您愿意，现在可以查看osweb01.ostech.com.au 的网站。我应该改变什么来解决这个问题？
你的IE版本是多少？
我设法通过稍微改变边界半径和宽度来解决这个问题。所以现在一切都很好。我的IE版本是11.0。
好的...我很高兴答案有帮助...快乐:)

【解决方案2】：

试试这个代码...

<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a></li>
<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
 <ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
 </ul>
</li>
<li><a href="http://osweb01.ostech.com.au/">What We Do</a>
 <ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
 </ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a></li>
</ul>
</div>

【讨论】：

【解决方案3】：

添加了您需要的内容

#nav ul li.round1:hover {
    border-radius: 10px 0 0 10px;
}
#nav ul li.round:hover {
    border-radius: 0 10px 10px 0;
}

DEMO

【讨论】：

看起来很完美，除了在 IE 11 上。IE 的问题是，根据我从导航栏转到的页面，某些页面会向右或向左移动一点。这是中心网站的 IE 浏览器问题。网站上除边框或圆形边框外的所有内容都会在页面更改时向右或向左移动一英寸。
所以基本上导航栏发生的情况是有时它会随着页面的其余部分向右移动，但外部边框保持在同一位置，导致我之前提到的白色区域/间隙。

【解决方案4】：

我采用了 Gadgetster 的做法并对其进行了改进：http://jsfiddle.net/oneeezy/ey9TK/3/

您现在会注意到所有按钮都是弯曲的并且没有间距！

CSS：

    body { overflow-y: scroll; }
    .wrapper { width: 100%; text-align: center; }

    #nav {
        display: inline-block;
        position:relative;
        border: 1px solid #002799;
        background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
        background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
        background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
        background: -o-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;
        padding: 0px 0px 0px 0px;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        height: 40px;
        margin: 0px auto;
        font: Bold 16px Verdana;
    }

    #nav ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
    }


    #nav li {
        list-style: none;
        float: left;
        position: relative;
        width:auto;
    }




    #nav ul li {
        list-style: none;
        float: left;
        position: relative;
        width:auto;
    }

    #nav ul li:last-child a {
        border:none;
    }

    #nav ul li:hover {
        background: #060652;
    }
    #nav ul li.round1:hover {
        border-radius: 10px 0 0 10px;
    }
    #nav ul li.round:hover {
        border-radius: 0 10px 10px 0;
    }

    #nav ul li:hover ul {
        display:block;
        width:100%;
    }

    #nav ul ul {
        display: none;
        position: absolute;
        top: 100%;
        margin: 3px 0 0;
        left: 0px;
        min-width: 250%;
        z-index: 999;
        background-color: #4970E3;
    }

    #nav ul ul li {
        border: 1px solid #FFFFFF;
        display:block;
        float: none;
        z-index: 999;
        width: auto;
    }

    #nav ul ul li a {
        border-right: none;
        font: Bold 16px Verdana;
        width: auto;
    }

    #nav ul li a {
        text-decoration: none;
        display: block;
        border-right: 1px solid #121B3E;
        padding: 10px 15px;
        color: #fbfbfb !important;
    }

【讨论】：