I'm looking to implement a simple CSS dropdown menu on my website. Here is the code:
#topNav { font-size: 12px; width: 970px; margin: 0 auto; height: 33px; background: url(images/menubg.png); /*border-bottom: solid 1px #cccccc;*/ }
#topNav ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; }
#topNav ul li { height: 33px; float: left; padding: 0px; font: bold 12px/37px ; }
#topNav ul li a{ padding: 0 18px; height: 33px; float: left; text-decoration: none; display: block; color: #7b7a76; font: 14px/37px Arial, Helvetica, sans-serif; }
#topNav ul li a:hover { padding: 0 18px; height: 33px; /*float: left;*/ text-decoration: underline; display: block; color: #e52128; font: 14px/37px Arial, Helvetica, sans-serif; background: url(images/menuover.png); }
#topNav ul li a:active { padding: 0 18px; height: 33px; /*float: left; text-decoration: none; display: block; color: #666666;*/ font: 14px/37px Arial, Helvetica, sans-serif; background: url(images/menuover.png); }
and :
.nav, .nav ul { list-style: none; margin: 0; padding: 0; }
.nav { font-family: Arial, Helvetica, sans-serif; z-index: 1000; position: absolute; }
.nav li { float: left; margin: 0; padding: 0; position: relative; /*background: url(images/navbg.jpg) repeat-x 0 0 #292929;*/ }
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; color: #959595; display: block; padding: 0 9px; text-decoration: none; }
.nav li a:hover { background: /*#f2f2f2*/ #FAFBFF; color: #000; }
<!-- More styles omitted for brevity -->
Although the dropdown menu appears as expected, I encounter an issue where it disappears when hovering over its items.
The menu structure is within a div element and looks like this:
<div id="topNav">
<ul class="nav">
I have already tried enclosing it in a wrapper without success.