css下拉悬停问题与导航

我正在尝试更改顶部导航栏，以便其中一个导航项显示一个下拉div，并在项目下方的子菜单上使用纯CSS悬停 . 但是，我在最初隐藏下拉列表时遇到一些问题，并且当您将鼠标悬停在特定导航项上时也会显示它 .

这是导航HTML ...

Navigation 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中的某些内容覆盖它，或者我添加的内容完全错误 . 我不能完全把手指放在上面 .

我需要添加什么才能使其工作？任何帮助将不胜感激！谢谢！