Hi,
Im stumped here, ive modified the cssplay dropdown wayfinder css for a site, but for the first time ever ive come across an odd list element.
Ive attached an image but whenever you hover over an item with sub menus, the entire sub li elemtn is indented over to the right underneath the next top level li.
anyone seen this before or know how to fix it cos i have no idea...
my css is
/* common styling */
.menu {
font-family:Arial, Helvetica, sans-serif;
width:700px;
float:right;
position:relative;
font-size:12px;
margin:0px 0 0px 0px;
z-index:100;
}
.menu ul {padding-left:20px;}
.menu ul li a, .menu ul li a:visited {
float:left;
width:auto;
text-decoration:none;
padding:0 15px 0 15px;
height:36px;
line-height:36px;
color:#fff;
border-left:1px solid #eee;}
/*.menu ul li.last a
{
border-right:1px solid #eee;
}*/
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
margin-right:0px;
position:relative;
}
.menu ul li ul {
display: none; }
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff;
background-image: url(../pulse/images/nav-bg-hover.jpg);
background-repeat:repeat-x;}
.menu ul li:hover ul
{
display:block;
position:absolute;
top:36px;
background:transparent;
color:#fff;
height:29px;
}
.menu ul li:hover ul li a {display:block;
background:#1796c3;
height:29px;
padding:0px;
margin:0px;
line-height:28px;
padding-left:6px;
padding-right:6px;
width:auto;
min-width:140px;
}
/*drop down colors*/
.menu ul li:hover ul li a:hover {
background:#144F6F;
color:#fff;
line-height:28px;
}
TIA
