dropdown menu

[carranz]

I have a drop down menu and i have a problem. the dropdown menu works fine but for some reason there is a gap between menu click and the results from the menu. so when I move my cursor the results disappear.

Any help would be appreciated

here is the code from my index file for the dropdown
<div id="menu">
<ul>
<li class="style1"><a href="#" title="" class="style1" accesskey="1">Home</a></li>

<li class="menu sfHover"><a href="#" accesskey="2" title="">Current Students </a>
<ul>
<li><a href="#">Entry </a></li>
<li><a href="#">Bus</a></li>
<li><a href="#">Enter Systems</a></li>
<li><a href="#">Limited Specials</a></li>
</ul>

</div>


Here is my .CSS file that controls the menu
/* Menu */

#menu
{
padding: 1em 2em 1em 0em;
font-size: 0.1em;
background-color: #993333;
background-repeat: repeat-x;
background-position: left top;
}

#menu ul
{
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}

#menu li
{

display: inline;
font-size: 12px;
position: relative;
}

#menu li a
{
text-decoration:none;
color: #FFFFFF;
float:none;
font-weight: bold;
text-decoration: none;
line-height:1.6em;
border-right-width: 0.1em;
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
border-left-style: none;
width: auto;
padding-top: 0.25em;
padding-right: 0.75em;
padding-bottom: 0.25em;
padding-left: 0.75em;

#menu li a:hover
{
color: #fff;
background-color: #CCCCCC;
background-repeat: repeat-x;
background-position: bottom;
}

/* DropDown */
#menu li li {
padding:0;
margin:0;
height:2.5em;
line-height:2.5em;
float:none;
font-size: 0.9em;
border:0;
text-indent:0.2em;
display:inline;
}

#menu li li a {
color:#CCC;
display:block;
text-align:left;
width:15em;
border:0;
* font-size:0.9em;
* width:17.2em;
background:transparent;
float:none;
}

#menu li ul {
position:absolute;
margin-top:2.6em;
left:-999em;
background-color: #666666;
}

#menu li ul li a:hover {
color:#FFF;
background-color: #CCCCCC;
background-image: url(../images/nav_bg.gif);
background-repeat: repeat-y;
}

#menu li:hover ul, #nav li:hover ul, #nav li.sfhover ul {
position:absolute;
left:-999em;
}

#menu li:hover ul, #menu li.sfhover ul {
left:0;
width:17.1em;
padding:0;
z-index:1000;
}

 

[BillyRayPreachersSon]

You might find this very recent post helpful:

thread216-1462097

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[carranz]

not sure i would want to do it like that. I don't want to see the gap. I would like it to be seamless

 

[Vragabond]

Your HTML for the menu is missing a lot of elements. Like at least one closing </ul> and another closing </li>. With such incomplete code it is useless to debug.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[MoreFeo]

Also, when putting code in a post, use the [ code ] tags, it will avoid to transform characters into smileys.