This particular PyroCMS site is quite dynamic, which is why using jsfiddle for posting doesn't work as smoothly. The menu seems to be functioning properly in all major current browsers and their versions, except for IE7, which is not supported. However, in IE8, only the lists and sublists are visible, but not the complete menu. What could be causing this issue?
The CSS:
nav ul#head-nav
{
width: 700px;
height: 35px;
float:right;
position:relative;
margin:10px 0 0 0;
padding-top:10px;
bottom:90px;
}
nav ul#head-nav ul
{
position: absolute;
left:-30px;
top:26px;
visibility: hidden;
z-index: 1000;
}
nav ul#head-nav li
{
font-family:Lato;
font-weight:700;
font-variant:small-caps;
background: url('../img/body-bg.jpg') top left repeat;
border-top-left-radius:5px;
border-top-right-radius:5px;
moz-border-top-left-radius:5px;
moz-border-top-right-radius:5px;
position: relative;
height:30px;
list-style: none;
padding-top:10px;
margin-left:1.5px;
margin-right:1.5px;
float: left;
text-align:center;
min-width:115px;
}
nav ul#head-nav .first
{
min-width:90px;
}
nav ul#head-nav li:hover
{
background:#5a81a0;
}
nav ul#head-nav li a, ul#head-nav li a:visited
{
font-size: 16px;
color: white;
text-decoration:none;
}
nav ul#head-nav li a:hover, ul#head-nav a:visited:hover
{
color: #ff6900;
text-decoration: none;
}
/* Header Menu second level */
nav ul#head-nav li:hover ul
{
visibility: visible;
}
nav ul#head-nav ul li
{
min-height:20px;
height:auto;
width:200px;
display: table-cell;
vertical-align: middle;
border-radius:0px;
border: 1px solid #e9e9e9;
padding: 3px;
background: #d8d8d8;
}
nav ul#head-nav ul li:hover
{
background:#5a81a0;
visibility: visible;
}
/* Header Menu third level */
nav ul#head-nav ul ul li
{
visibility: hidden;
}
nav ul#head-nav ul li:hover ul li
{
visibility: visible;
}
nav ul#head-nav ul ul
{
left:177px;
top:-15px;
padding-top: 0;
}
And here's the HTML structure:
<nav>
<ul id="head-nav">
<li class="first current"><a href="http://127.0.0.1/home">Home</a></li>
<li class="has_children"><a href="http://127.0.0.1/about-us">About Us</a>
<ul class="dropdown">
<li class="first"><a href="http://127.0.0.1/about-us/who-is-who">Who is Who</a></li>
<li><a href="http://127.0.0.1/about-us/bylaws">Bylaws</a></li>
<li><a href="http://127.0.0.1/blog">Blog</a></li>
<li><a href="http://127.0.0.1/about-us/meetings">Meetings</a></li>
<li><a href="http://127.0.0.1/about-us/trustees">Trustees</a></li>
<li><a href="http://127.0.0.1/about-us/history">History</a></li>
<li><a href="http://127.0.0.1/about-us/intergovernmental-agreement">Intergovernmental Agreement</a></li>
<li><a href="http://127.0.0.1/about-us/staff">Staff</a></li>
<li class="last"><a href="http://127.0.0.1/about-us/contact-us">Contact Us</a></li>
</ul>
</li>
(and so on...)
</ul>
</nav>