Theme on this site: Dropdown-menu for top navigation does not work in IE6. Is it a known bug?
I have a solution for the IE bug
on this site + displaying more than two levels in horizontal menu. If you would like to test it I would appreciate a feedback
HTML:
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl'}
<div class="clearb"></div>
<hr class="accessibility" />
</div>
{* End Navigation *}
CSS:
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
#menu_vert {
margin-left: 1px;
margin-right: 1px;
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background: #2e72b8 url(images/nav-bg.gif) left repeat-x;
width: 100%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 210px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a,
#primary-nav a:visited {
display: block;
margin: 0px;
text-decoration: none;
color:#ffffff;
font-size:1.5em;
font-family:Arial, Helvetica, sans-serif;
padding:.5em 1.25em;
}
#primary-nav li a {
background-image: url(images/nav-divider.gif);
background-position: right;
background-repeat: repeat-y;
}
/* second level list items */
#primary-nav ul li, #primary-nav ul li.menuparent {
background-color: #2e72b8;
border:1px solid #215893;
border-right:none;
font-size:8px;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
/* first level parents list item */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
background-image: url(images/nav-divider.gif);
background-position: right;
background-repeat: repeat-y;
background-color:transparent;
}
/* first level parents link style */
#primary-nav li.menuparent a.menuparent,
#primary-nav li.menuparent:hover a.menuparent,
#primary-nav li.menuparenth a.menuparent {
/* arrow for menuparents */
background: url(images/nav-menuparent-arrow.gif) right repeat-y;
background-position: center right;
background-repeat: no-repeat;
padding-right:2.4em;
}
/* second level parents list item */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/nav-menuparent-arrow.gif);
background-position: center right;
background-repeat: no-repeat;
background-color: #2e72b8;
}
/* second level parents link item */
#primary-nav ul li.menuparent a.menuparent,
#primary-nav ul li.menuparent:hover a.menuparent,
#primary-nav ul li.menuparenth a.menuparent {
background-image: url(images/nav-divider.gif);
background-position: right;
background-repeat: repeat-y;
}
#primary-nav ul li:hover a:hover,
#primary-nav ul li.menuh a:hover,
#primary-nav ul li.menuparenth a:hover,
#primary-nav ul li.menuactiveh a:hover {
background-color: #fff;
color:#000;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}