Question

我正在尝试使用下拉列表创建一个导航栏（已经完成），但是当我将鼠标悬停在其上时，下拉列表会保持不变：（

我为迄今为止所取得的成就制作了一个JS小提琴，我希望得到一些帮助！

http://jsfiddle.net/kkpp6/

我认为这可能是由于我在其中一个ul中使用的display: none;或可能是由于一个愚蠢的错字但我无法弄清楚在哪里！

除此之外，我无法弄清楚如何为我已经存在的子菜单制作一个子菜单..（因此desc选项卡有一个游泳小组的子菜单，它也有一个子菜单其他的事情）..我该怎么做？我无法弄清楚我会从哪里开始！

提前为所有帮助干杯！

Answer 1

尝试这样：LINK

<强> CSS：

.nav-wrap {
    background-color: #125CC1;
    text-align: center;
}
ul.navigation-bar li a {
    color: #FFFFFF;
    background-color: #125CC1;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
}
ul.navigation-bar li a:hover {
    background-color: #06398F;
}
ul.navigation-bar {
    text-align: left;
    display: inline;
    margin: 0;
    list-style: none;
}
ul.navigation-bar li {
    line-height:28px;
    margin-right: -4px;
    position: relative;
    display: inline-block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #125CC1;
    text-align: center;
}
ul.navigation-bar li ul {
    padding: 0;
    position: absolute;
    top: 28px;
    left: 0;
    width: 120px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul.navigation-bar li ul li {
    background: #125CC1;
    display: block;
    color: #fff;
}
ul.navigation-bar li ul li:hover {
    background: #06398F;
    color: #fff;
}
ul.navigation-bar li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

更新了小提琴 LINK

多级下拉菜单 LINK

Answer 2

在第38行，您设置一个列表，以便在用户将鼠标悬停在列表项上时显示。这使它可见，但也会导致整个菜单转换，以便您不再将鼠标悬停在触发该菜单的列表项上。如果您在列表中使用position:absolute，则不会影响页面上的其他元素：

ul.navigation-bar li > ul {
    position:absolute;
}

JSFiddle：http://jsfiddle.net/P9SUg/

Answer 3

我也认为它因为display：none;而不是display：none;你应该使用visibility：hidden;。并添加

ul.navigation-bar li > ul { position:absolute; }

Answer 4

您需要在CSS中进行大量更改才能制作下拉菜单。

 .nav-wrap {
background-color: #125CC1;
text-align: center;
}
ul.navigation-bar {
list-style-type: none;
margin: 0;
padding: 0;
 }
 ul.navigation-bar > li {
display: inline;
position:relative;
 }
 ul.navigation-bar > li > a {
display: inline-block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #125CC1;
text-align: center;
padding: 4px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
 }
 ul.navigation-bar > li > a:hover {
background-color: #06398F;
 }

 ul.navigation-bar ul {
display: none;
 }
 ul.navigation-bar li:hover > ul {
display: block;
position:absolute;
top:23px;
background-color:#ff00ff;
z-index:10;
width:100%;
list-style-type: none;
margin: 0;
padding: 0;
 }
 ul.navigation-bar li ul li a
 {
list-type:none;
text-align: left;
font-weight:normal;
padding: 4px;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
 }
 ul.navigation-bar li ul li:hover
{
background-color:#000;
}
 ul.navigation-bar li ul li:hover a
{
color:#fff;
}

FIDDLE DEMO

导航下拉列表吓坏了，并显示不同的选项卡

4 个答案: