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

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

html css

Html 主页和联系我们选项卡'；我的下拉导航菜单中的悬停效果不是我想要的效果,html,css,Html,Css,问题是，当我将鼠标悬停在主页项/选项卡上时，它会变成一个方形块，并覆盖导航栏的圆角。当我将鼠标悬停在“联系我们”选项卡/项目上时，它会变成一个方形块，并短暂停止，不会转到导航栏的末尾。我怎样才能修复这些悬停我的导航栏的html： <div id="nav"> <ul> <li><a href="http://osweb01.ostech.com.au/">Home</a> </li> <li><a hr

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

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

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

}

请尝试此代码

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

添加了您需要的

#nav ul li.round1:hover {
    border-radius: 10px 0 0 10px;
}
#nav ul li.round:hover {
    border-radius: 0 10px 10px 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

标记包含的

主页更改为此：

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

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

我采纳了Gadgetster的做法，并对其进行了改进：
你会注意到现在所有的按钮都是弯曲的，没有空格
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;
    }

这成功了！工作原理与您的演示完全相同。谢谢Kiyarash。好的，我会这么做的。我注意到它在internet explorer中有一个小小的缺陷。在正常状态下，“联系我们”选项卡的右边框和块之间有一点白色。如果你想的话，现在可以看看这个网站。我应该改变什么来解决这个问题？你的IE版本是什么？我只是通过稍微改变边界半径和宽度来解决这个问题。现在一切都好了。我的IE版本是11.0。好的。。。我很高兴答案有帮助。。。快乐：）看起来很完美，除非是在11号州际公路上。IE的问题是，一些页面会根据导航栏中的页面而左右移动。这是一个以网站为中心的IE浏览器问题。网站上除了边框或圆形边框以外的所有内容都会在页面更改时向右或向左移动一英寸。因此，导航栏的基本情况是，它有时会随着页面的其余部分向右移动，但外部边框保持在相同的位置，导致我前面提到的白色区域/间隙。