Hi, I'm building a site with a horizontal drop down menu. It works
fine in Firefox & IE8, but in other browsers I'm having problems, as
follows:
Chrome & Safari - the drop down menus are much wider than they need to
be, as if there is loads of extra padding to the right (in one case,
the menu is about 3 times as wide as it needs to be)
IE7 - width of drop-down is fine, except that it is always at least as
wide as the main top-level item, and if the sub-items are short, there
are sometimes 2 on one line.
IE6 (not that bothered about this, but I've included it in case it's
significant) - drop downs are really wide, and always extend to a
particular point on the screen.
I would really appreciate help on this - I've looked online, but can't
find anything that helps. Even a link to somewhere that could help me
out would be gratefully received. Thank you!
Here's the basic HTML:
<div id="hmenu" class="clr">
<ul>
<li class="thisPage"><a href="/newSite/pages/1">Menu Item 1</a>
<ul>
<li><a href="/newSite/pages/14">Sub Item 1</a></li>
<li><a href="/newSite/pages/15">Sub Item 2</a></li>
</ul>
</li>
<li><a href="/newSite/pages/2">Menu item 2</a>
<ul>
<li><a href="/newSite/pages/10">Sub Item 1</a></li>
</ul>
</li>
</ul>
</div>
And the relevant css:
#hmenu {
display: block;
height: 24px;
width: 730px;
padding: 8px 0 0 0;
margin: 0 0 10px 0;
}
#hmenu ul {
list-style: none;
padding: 0;
margin: 0;
}
#hmenu ul li {
float: left;
margin: 0 0 0 0;
white-space: nowrap;
list-style: none;
position: relative;
padding: 0 0 4px 8px;
}
#hmenu ul li a {
display: block;
padding: 0;
margin: 0;
text-decoration: none;
}
/* Sub links */
#hmenu ul li ul {
clear: both;
display: none;
position: absolute;
left: 9px;
top: 22px;
}
#hmenu ul li:hover ul {
display: block;
}
#hmenu ul li:hover ul li{
display: block;
width: 90%;
}
/* General style rules */
.clr {
clear: both;
}
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
