css dropdown on hover issue with navigation

Question

I am trying to alter a top navigation bar so that one of the navigation items displays a dropdown div with a sub-menu underneath the item on hover with pure CSS. However I am having a few problems hiding the dropdown initially and also getting it to display when you hover over the particular nav item.

Here's the nav 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>

and here's the CSS for the navigation...

.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;
}

I have tried adding a few things to this css like this...

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

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

but I haven't had any luck so far in getting the functionality of hiding the dropdown element initially and get it to show when hovered. It seems as something in the css is overriding it, or what I added is completely wrong. I can't quite put my finger on it.

What do I need to add to make this work? Any help would be greatly appreciated! Thanks!

Answer 1

This isn't an answer... but I don't see where I can make an initial comment. HERE is a jsfiddle with your code in it. This will be helpful. On another note, you might want think about how "hiding" the content might affect screen readers and SEO. Maybe use height: 0; overflow: hidden; or something instead of display none etc...

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

        ">

On first glance, I see that you have inline styles here. These will override all of the other styles. Put them in the .css file maybe? Also, I bet z-index: 3; will do the trick just fine.