Welcome to WebmasterWorld Guest from 3.227.233.6

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Horizontal Menu & Submenu Woes

Need to format the main menu without affecting submenu

     

j_winter

1:08 pm on Oct 9, 2005 (gmt 0)

Inactive Member
Account Expired

 
 


Hi,
I'm working on my first horizontal CSS menu. Each menu item has a dropdown submenu. I can't seem to center the main horizontal menu without affecting the submenu in strange ways. I also want to keep the main horizontal menu from wrapping. However, when I add a width statement to the ul part, it works fine with the main menu, but apparently the submenu inherits this width too (no matter what I do). Looks terrible! Any suggestions or help would be appreciated.

Here's a sample of the code to display the menu:

<ul id="nav">
<li id="first">
<div><a href="../aboutus.html">About Us</a></div>
<ul>
<li><a href="../profile.html">Profile</a></li>
<li>&nbsp;</li>
<li><a href="../mission.html">Mission</a></li>
<li>&nbsp;</li>
</ul>
</li>
<li>
<div><a href="../admissions.html">Admissions</a></div>
<ul>
<li><a href="../application.html">Application</a></li>
<li>&nbsp;</li>
<li><a href="../tuition.html">Tuition &amp; Fees</a></li>
</ul>
etc...

Here's the code from the stylesheet:

body {
font-family: arial, helvetica, serif;
font-size: 11pt;
text-align: center;
background: #cccccc;
font-color: #000000;
}

#content {
background-color: #640000;
border: #640000;
margin: 0;
voice-family: "\"}\"";
voice-family:inherit;
}

html>body #content {
width: 30em;
}

a {
text-decoration: none;
}

a:link {
color: #640000;
}

a:visited {
color: #640000;
}

a:active {
color: #ffff00;
}

a:hover {
text-decoration: underline;
color: #ffff00;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
font-weight: bold;
color: #ffffff;
}

#nav a {
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: bold;
text-align: left;
color: #640000;
padding:0;
margin: 0;
width: 0;

}

#nav li li a:hover {

border: auto solid #cccccc;
background-color: #cccccc;
}

li {
/* width is space between menu items horizontally*/
float: left;
position: relative;
width: 5em;
text-align: center;
cursor: default;
background-color: #640000;
border: 1px solid #640000;
border-width: 1px 0;
}

li#first {
border-left-width: .1em;
}

li#last {
border-right-width: .1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
font-weight: normal;
text-align: left;
padding:3px;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: list-item;
float: 0;
background-color: #cccccc;
border: 0;
padding: 0;
margin: 0;
}

li:hover ul, li.over ul {
display: block;
margin: 0;
}

[edited by: SuzyUK at 1:46 pm (utc) on Oct. 11, 2005]
[edit reason] fixed formatting.. [/edit]

2:01 pm on Oct 11, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


hi j_winter and Welcome To WebmasterWorld!

there's a couple of things to try..

I can't seem to center the main horizontal menu without affecting the submenu in strange ways.

First I would wrap the ul#nav in a div (it's not completely necessary in this case but it might be easier to control text-alignment).

<div id="navmenu">

the on that set it to:
#navmenu {
text-align: center; /* to center menu in IE5.x */
}

then add:
#navmenu ul#nav {
width: 20.2em; /* add up all the list item widths + 0.2em padding you have */
margin: 0 auto; /* centers in compliant browsers */
text-align: left; /* reset text alignment if required */
}

I also want to keep the main horizontal menu from wrapping

add: white-space: nowrap; to you list items, which should help stop them wrapping. It will be the overall width on the ul#nav that stops the entire menu from wrapping if that's what you meant

you have the floated <li> widths set to 5em, that wasn't enough when I tested. It was causing overlaps in the top level so I changed it to 10em, which is why have the width set to 20.2em (2 x list items + 0.2em padding on the first and last items)

but if you change the widths to smaller you would just calculate your ul#nav width by multiplying the # of list items by the em width you specify then add 0.2em

but apparently the submenu inherits this width too (no matter what I do).

Yes the sub menu's will be 100% of their parent list, the white-space:nowrap; should help that as will your intial link width adjustments?

Suzy