CSS懸停問題與導航下拉菜單

Question

我正在嘗試更改頂部導航欄，以使其中一個導航項在帶有純CSS的懸停項下在該項下方顯示一個帶有子菜單的下拉div。 但是，我在最初隱藏下拉列表時遇到一些問題，當您將鼠標懸停在特定的導航項目上時，也無法顯示它。

這是導航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;
}

但到目前為止，我還沒有運氣來獲得最初隱藏dropdown元素並使其懸停顯示的功能。 似乎是CSS中的某些內容將其覆蓋，或者我添加的內容完全錯誤。 我不能完全把手指放在上面。

我需要添加什么才能使它正常工作？ 任何幫助將不勝感激！ 謝謝！

Answer 1

這不是答案...但是我看不到可以在哪里發表初步評論。 這里是一個包含代碼的jsfiddle。 這會有所幫助。 另一方面，您可能想考慮隱藏內容可能如何影響屏幕閱讀器和SEO。 也許使用高度：0; 溢出：隱藏； 或什么都不顯示什么等等...

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

        ">

乍一看，我發現您在這里具有內聯樣式。 這些將覆蓋所有其他樣式。 將它們放在.css文件中嗎？ 另外，我敢打賭z-index：3； 會成功的。