New Zenner
- Join Date:
- Apr 2010
- Posts:
- 1
- Plugin Contributions:
- 0
Links on header overlapping in display
Hi
Using Zen 1.3.9a and a template called iC_AthemeV1.3. I have a problem with the links on my header
To view problem ... go to https://www.q-lobby.co.za or see attachment
There are 2 rows of links - One row on top and the other row below the top one. When a hover on any of the top row links - the drop down menu opens with the sub catogories.
However and here is the problem. The bottom row links text shows in between the drop down menu giving a distorted look.
Here is the header stylesheet css (as supplied with the template)
body {
behavior: url(csshover.htc);
}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {
color: #4f4f4f!important;
background:#DAD8BD;
}
#dropMenuWrapper {
margin:auto;
font-size:11px;
background:#F2F2F5;
}
div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}
div#dropMenu ul {
margin: 0;
padding: 0;
}
div#dropMenu li {
position: relative;
list-style: none;
float: left;
line-height: 1em;
}
div#dropMenu ul.level1 {
width:750px;
margin:0 auto;
text-align:center;
background:#F2F2F5;
height:50px;
z-index:1000;
}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; text-transform:uppercase; color:#505050; text-align:center;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#F2F2F5;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#F2F2F5}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: #505050; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
Any help would really be appreciated
Many thanks