css下拉悬停问题与导航

我想改变一个顶部的导航栏，以便其中一个导航项目显示一个下拉div与子菜单下悬停与纯CSS的项目。不过，我最初隐藏下拉菜单时遇到了一些问题，并且在将鼠标悬停在特定的导航项上时也会显示该问题。css下拉悬停问题与导航

这里的导航HTML ...

导航HTML

<div id="nav"> 
<ul class="fancyNav"> 
    <li><a href="item1">item1</a></li> 
    <li><a href="item2">item2</a></li> 
    <li id="dropdown"><a href="item3">item3</a> 

     <!-- dropdown div--> 
     <div id="dropdown-menu" style=" 
       background-color: #888; 
       width: 150px; 
       height: 100px; 
       position: absolute; 
       z-index: 999; 

      "> 
      <ul> 
       <li>sub-menu1</li> 
       <li>sub-menu2</li> 
      </ul> 
     </div> 

    </li> 
    <li><a href="page4">page4</a></li> 
    <li><a href="item5">item5</a></li> 
    <li><a href="item6">item6</a></li> 
    <li><a href="item7">item7</a></li> 
</ul>

，这里是为导航的CSS ...

.fancyNav{ 
/* Affects the UL element */ 
display: inline-block; 
height: 51px; 
border-left: 1px solid #DD6B81; 
border-right: 1px solid #6e0915; 
color: white; 
} 

.fancyNav li{ 
/* Specifying a fallback color and we define CSS3 gradients for the major browsers:  */ 
/* Adding a 1px inset highlight for a more polished efect: */ 
position:relative;  
float: left;  
list-style: none; 
border-right: 1px solid #DD6B81; 
border-left: 1px solid #6E0915; 
height: 51px; 
} 
/* Treating the first LI and li:after elements separately */ 
.fancyNav li: first-child { 
border-radius: 4px 0 0 4px; 
} 
.fancyNav li: first-child: after, 
.fancyNav li.selected: first-child: after { 
box-shadow: 1px 0 0#a3a3a3, 
2px 0 0#fff;-moz-box-shadow: 1px 0 0#a3a3a3, 
2px 0 0#fff;-webkit-box-shadow: 1px 0 0#a3a3a3, 
2px 0 0#fff; 
border-radius: 4px 0 0 4px; 
} 
.fancyNav li: last-child { 
border-radius: 0 4px 4px 0; 
} /* Treating the last LI and li:after elements separately */ 
.fancyNav li: last-child: after, 
.fancyNav li.selected: last-child: after { 
box-shadow: -1px 0 0#a3a3a3, 
-2px 0 0#fff;-moz-box-shadow: -1px 0 0#a3a3a3, 
-2px 0 0#fff;-webkit-box-shadow: -1px 0 0#a3a3a3, 
-2px 0 0#fff; 
border-radius: 0 4px 4px 0; 
} 

.fancyNav li: hover: after, 
.fancyNav li.selected: after, 
.fancyNav li: target: after { /* This property triggers the CSS3 transition */ 
opacity: 1; 
} 

.fancyNav: hover li.selected: after, 
.fancyNav: hover li: target: after { /* Hides the targeted li when we are hovering on the UL */ 
opacity: 0; 
} 

.fancyNav li.selected: hover: after, 
.fancyNav li: target: hover: after { 
opacity: 1!important; 
} /* Styling the anchor elements */ 

.fancyNav li a { 
color: #F3F2EE; 
display: inline-block; 
font-weight: bold; 
font-family: "OpenSans", Tahoma, Arial, Helvetica, sans-serif; 
font-size: 12px; 
padding: 16px 21px 15px 25px; 
position: relative; 
z-index: 2; 
text-decoration:none !important; 
white-space:nowrap; 
height: 20px; 
text-shadow: 0 1px 2px #6A1121; 
background: url(../images/bg-button.png) no-repeat center bottom; 
-webkit-transition: all 0.4s ease-in-out; 
-moz-transition: all 0.4s ease-in-out; 
-o-transition: all 0.4s ease-in-out; 
transition: all 0.4s ease-in-out; 
} 

.fancyNav li a:hover{ 
color: #FFFFFF; 
text-shadow: 0 1px 0 #6A1121; 
background-position: center top; 
}

我曾尝试添加一些东西到这个CSS这样的...

.fancyNav #dropdown-menu { 
    visibility: hidden !important; 
} 

.fancyNav #dropdown:hover #dropdown-menu{ 
    visibility: visible !important; 
}

但我没有任何运气在获得最初隐藏下拉元素，让它显示鼠标悬停时的功能至今。这似乎是在CSS的东西重写它，或者我添加的是完全错误的。我无法完全理解它。

我需要添加什么来完成这项工作？任何帮助将不胜感激！谢谢！

来源

2013-05-30 Dannyd86

这不是一个答案......但我看不到我可以在哪里发表初始评论。 HERE是你的代码在其中的jsfiddle。这将有所帮助。另一方面，您可能需要考虑如何“隐藏”内容可能会影响屏幕阅读器和搜索引擎优化。也许使用高度：0;溢出：隐藏;或者什么东西，而不是显示没有等...

 <!-- dropdown div--> 
     <div id="dropdown-menu" style=" 
      background-color: #888; 
      width: 150px; 
      height: 100px; 
      position: absolute; 
      z-index: 999; 

     ">

乍一看，我看到你在这里有内联样式。这些将覆盖所有其他样式。把它们放在.css文件中吧？另外，我打赌z-index：3;将做的伎俩就好了。

来源

2013-05-31 00:05:29 nouveau

css下拉悬停问题与导航

回答

相关问题