Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Nested horizontal menus

Wrong "width" parameter?

2:35 pm on Oct 12, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2003
posts: 801
votes: 0

I've not been posting here for ages, but I'm stuck.

I've set up a couple of sites with a horizontal top-level menu bar, letting the user choose a TOPIC. It's a CSS-styled UL List. It's great and works with every platform I've tried it on.

On the pages for that TOPIC, I've placed a vertical menu on the left, again a CSS-styled UL list, which occasionally has a nested list (as a submenu) for the rare occasions I need to go "three deep". All that's fine.

And then I tinkered with it <grin>...
As it's rare that I wanted to go three deep, I decided to make the vertical menu a horizontal one, and stick it under the topic menu, displaying an appropriate menu for that topic. That bit works.

Because the "three deeps" are rare and small, I wanted them to sit to the right of their parent, in italics, rather than eat up screen space.

I attach the code.

It goes wrong...
It seems that because the nested UL is attached to the appropriate LI, it seems to calculate the required width of the nested LIs correctly, but when it displays it, it includes the parent LI as well, whose width is unknown to the CSS, so can't be incorporated as a fix.

If you save the attached as an HTML, you'll see the menu is wrapped in Red, and the Submenu is wrapped in blue (wrongly).

The blue is the right size for the nested LIs, but the parent LI (of a different size) is included, so the box is the wrong size and too small, causing the final element to spill out. It goes wrong in Mac Safari and Mac Firefox, and doesn't quite work in Opera.

What am I doing wrong, please?
Thanks in anticipation

Code here...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
width: 100%;
clear: both;

#menu ul {
border: 1px solid #F66;
background-color: #FFFCFC;
height: 33px;
list-style-type: none;
margin: 0;
padding: 0;
#menu ul ul {
border: 1px solid #66F;
height: 27px;
background-color: #FFFCFC;

#menu li {
display: block;
float: left;
margin: 0 0 0 5px;

#menu li li {
font-style: italic;

#menu li a {
height: 25px;
color: #777;
text-decoration: none;
display: block;
float: left;
padding: 7px 7px 0;

#menu ul li a:hover {
color: red;


<p>(Main menu - omitted for clarity)</p>
<div id="menu">
<li><a href=".">Menu 1</a></li>
<li><a href=".">Menu 2</a></li>
<li><a href=".">Menu 3&gt;</a>
<li><a href=".">Submenu number 1</a></li>
<li><a href=".">Submenu number 2</a></li>
<li><a href=".">Menu 4</a></li>


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members