Putting together my portfolio for school and I’m having a problem with my drop down menu in IE 6. It appears vertical when it should be horizontal. It’s not a huge issue, but I would like to make it as compatible as possible. I’ve tried many of the recommended fixes, such as setting height or setting width on floated elements, but nothing seems to do the trick. Any help is appreciated!
CSS is below. URL is Sean McCarty’s Portfolio
/* Navigation Section */
#navigation_wrap {
width: 100%;
height: 32px;
background-color: #b4a078;
border: 1px solid #b4a078;
}
#menu {
width: 780px;
margin-left: auto;
margin-right: auto;
height: 32px;
background: none;
overflow: visible;
}
#menu img { border: none; }
#menu ul {
list-style: none;
margin: 0 0 0 0;
padding: 0 10px 0 10px;
float: left;
text-align: left;
}
#menu ul li {
height: 32px;
padding: 3px 0 0 0;
margin: 0 0 0 0;
}
#menu ul li ul li {
height:auto;
padding: 4px 8px 4px 12px;
}
#menu ul li h2, #menu ul li h2 a {
text-align: left;
font: bold 12px Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
}
#menu ul li ul {
background-color:#ffffff;
border: 1px solid #b4a078;
padding: 2px 0px 8px 0px;
min-width: 180px;
}
#menu a {
text-decoration:none;
font: bold 12px Arial, Helvetica, sans-serif;
display: block;
}
#menu ul li a {
text-align: left;
text-decoration:none;
color: #000000;
}
#menu ul ul a {
text-decoration: none;
color: #333333;
padding: 0 10px 0 0;
background: url(images/go_arrow.png) no-repeat right center;
}
#menu ul ul a:hover { text-decoration: underline; }
#menu li { position: relative; }
#menu ul ul {
position: absolute;
z-index: 500;
padding-left: 0;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
#menu ul:hover { cursor: pointer; } /* Ensures a “pointer” cursor when using Opera */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{top: -3000px;}
div#menu ul li:hover ul, div#menu ul li a:focus ul
{top: 32px; cursor: pointer;}
div#menu ul li ul li:hover { background: #E1E1E1; }
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{top: 0px; cursor: pointer;}
/* END: Navigation Section */
The main issue i see is that with every new menu item you start a new <ul> element which is non semantic markup, when creating menus the best practice is to open 1 parent element and wrap all the child elements inside. See the below HTML to see what i am talking about…
<div id="menu">
<ul>
<li><a href="http://seanmccarty.org/index.php">Home</a></li>
<li><a href="http://seanmccarty.org/resume/index.php">Resume</a></li>
<li>
<a href="http://seanmccarty.org/work/index.php">Professional Work</a>
<ul>
<li><a target="_blank" href="http://seanmccarty.org/reo/rhctutorial/index.htm">Staff Tutorial</a></li>
<li><a target="_blank" href="http://seanmccarty.org/reo/raresource/index.htm">Student Tutorial</a></li>
<li><a target="_blank" href="http://seanmccarty.org/reo/rhctutorial/brownsheets.htm">Brown Sheets</a></li>
<li><a target="_blank" href="http://seanmccarty.org/contdb/index.htm">Gone Fission, Inc.</a></li>
<li><a target="_blank" href="http://seanmccarty.org/ercras/raindex.html">RA Resource</a></li>
<li><a target="_blank" href="http://seanmccarty.org/work/gmmodule/course/course29342.html">Market Module</a></li>
<li><a target="_blank" href="https://sites.google.com/site/edtec570campus/">EdTec 570</a></li>
</ul>
</li>
<li>
<a href="http://seanmccarty.org/standards/index.php">Graduate Work</a>
<ul>
<li><a href="http://seanmccarty.org/standards/processes/index.php">Desk Job Aid</a></li>
<li><a href="http://seanmccarty.org/standards/communication/index.php">ERC RA</a></li>
<li><a href="http://seanmccarty.org/standards/technical/index.php">Video Tutorial</a></li>
<li><a href="http://seanmccarty.org/standards/data/index.php">Podcast Survey</a></li>
<li><a href="http://seanmccarty.org/standards/interpersonal/index.php">Art Game</a></li>
<li><a href="http://seanmccarty.org/standards/principles/index.php">Distance Ed Cert</a></li>
<li><a href="http://seanmccarty.org/standards/cognitive/index.php">Parcel Manager</a></li>
<li><a href="http://seanmccarty.org/standards/systems/index.php">PT Makeover</a></li>
</ul>
</li>
<li><a href="http://seanmccarty.org/contact/index.php">Contact Info</a></li>
</ul>
</div>
See the updated menu CSS below which i updated so you can still customize it quite easily but rather then setting heights and such directly onto the LI elements i changed it so the anchor elements store 99% of the properties as that is were most of the browser compatibility occurs.
#navigation_wrap {
background-color: #B4A078;
border: 1px solid #B4A078;
height: 32px;
}
#menu {
background: none repeat scroll 0 0 transparent;
height: 32px;
margin-left: auto;
margin-right: auto;
overflow: visible;
width: 780px;
}
#menu img {
border: medium none;
}
#menu ul { list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
}
#menu ul li {
float: left;
margin: 0;
}
#menu ul li ul li { width: 100%; }
#menu ul li h2, #menu ul li h2 a {
color: #FFFFFF;
font: bold 12px Arial,Helvetica,sans-serif;
margin: 0;
text-align: left;
text-decoration: none;
}
#menu ul li ul {
background-color: #FFFFFF;
border: 1px solid #B4A078;
min-width: 180px;
padding: 2px 0 8px;
}
#menu a {
display: block;
font: bold 12px Arial,Helvetica,sans-serif;
text-decoration: none;
}
#menu ul li a {
color: #000000;
display: block;
height: 29px;
line-height: 26px;
padding: 3px 10px 0;
text-align: left;
text-decoration: none;
}
#menu ul ul a {
background: url("http://www.sitepoint.com/forums/images/go_arrow.png") no-repeat scroll right center transparent;
color: #333333;
display: block;
height: auto;
line-height: 20px;
padding: 4px 8px 4px 12px;
text-decoration: none;
}
#menu ul ul a:hover {
text-decoration: underline;
}
#menu li {
position: relative;
}
#menu ul ul {
padding-left: 0;
position: absolute;
z-index: 500;
}
#menu ul ul ul {
left: 100%;
position: absolute;
top: 0;
}
#menu ul:hover {
cursor: pointer;
}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {
top: -3000px;
}
div#menu ul li:hover ul, div#menu ul li a:focus ul {
cursor: pointer;
top: 32px;
}
div#menu ul li ul li:hover {
background: none repeat scroll 0 0 #E1E1E1;
}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
cursor: pointer;
top: 0;
}
Many thanks for the help. I didn’t even realize I had been starting a new ul for each link.
With your help I was able to get the menu to work in IE 6, but I still had to set the width on the floated ul li. Tried setting the width in a conditional IE 6 comment in the index file, but I couldn’t get it to work. The inline styles below was the best solution I came across (that didn’t sabotage other browsers).
<div id="menu">
<ul>
<li style="width:60px;"><a href="http://seanmccarty.org/index.php">Home</a></li>
<li style="width:75px;"><a href="http://seanmccarty.org/resume/index.php">Resume</a></li>
<li style="width:130px;">
<a href="http://seanmccarty.org/work/index.php">Professional Work</a> . . .