homepage Welcome to WebmasterWorld Guest from 184.73.52.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Nested horizontal menus
Wrong "width" parameter?
DerekH




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

Hi
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
Derek

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">
<head>
<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;
width:100%;
}

#menu li {
display: block;
white-space:nowrap;
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;
}

</style>
</head>

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

</ul>
</div>
</body>
</html>

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved