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

时间：2014-04-02 04:45:57

标签： html css

问题是当我将鼠标悬停在Home项目/标签上时，它会变为方块并覆盖导航栏的圆角。当我将鼠标悬停在“联系我们”选项卡/项目上时，它将变为方块并停止，并且不会转到导航栏的末尾。我怎样才能修复这些悬停？

导航栏的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;

}

4 个答案:

答案 0 :(得分：0)

试试这段代码...... 

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

答案 1 :(得分：0)

添加了您需要的内容

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

DEMO

答案 2 :(得分：0)

将此行添加到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

答案 3 :(得分：0)

我已经采取了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;
    }
相关问题
最新问题