When I hover over a parent navigation item with children, the dropdown appears but there is blank space between the parent and its children so the two are not "connected". Thus, I cannot smoothly scroll to the children, hover, or click on them. I have tried the z-index fix with no results. Please help. I am a newbie at this and no amount of searching and trying has found a solution.
Thank you,
Deanne
CSS follows:
#nav1 {
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0;
margin:0 5px 10px 5px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #3a3a3a;
border-bottom-color: #3a3a3a;
}
#nav1 ul {
width:740px;
float:left;
padding:0;
}
/*Main Nav Bar Spacing*/
#nav1 ul.sf-menu li {
position:relative;
z-index:2;
float:left;
line-height:40px;
padding:4px 5px;
text-align:middle;
}
/*Main Nav Bar Text Formatting*/
#nav1 ul.sf-menu li a {
color:#3a3a3a;
margin:0;
padding:1px 10px;
}
#nav1 ul.sf-menu li a:current_page_item { padding:0 9px; color:#686868; background:#686868; border:1px solid #686868; }
/*Main Nav Bar Hover Formatting*/
#nav1 ul.sf-menu li a:hover, #nav1 ul.sf-menu li a:active {
padding:0 9px;
color:#333333;
background:#c0d3e1;
}
/*Child 1st level Text and Background Formatting*/
#nav1 ul.sf-menu li ul.children {
margin:0;
background:#ececec;
width:210px;
padding:0;
border:1px solid #dadada;
}
/*Child 1st level Text Formatting*/
#nav1 ul.sf-menu li ul.children a {
margin: 0px 0px 0px 10px;
padding:0;
color:#2f6d9b;
width:210px;
}
#nav1 ul.sf-menu li ul.children a:hover #nav1 ul.sf-menu li ul.children a:active {
color:#fff;
background:#c0d3e1;
width:200px;
text-decoration:none;
vertical-top: 30px;
}
#nav1 ul.sf-menu li ul.children li {
border:0;
padding:0;
z-index:1;