0

我正在尝试更改顶部导航栏，以便其中一个导航项显示一个下拉 div，并在使用纯 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中的某些内容覆盖了它，或者我添加的内容完全错误。我不能完全把我的手指放在它上面。

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

4

1 回答 1

0

这不是答案......但我看不出我可以在哪里发表初步评论。HERE是一个 jsfiddle，其中包含您的代码。这会很有帮助。另一方面，您可能需要考虑“隐藏”内容可能如何影响屏幕阅读器和 SEO。也许使用 height: 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-31T00:05:29.517 回答