How can I align this menu?

backa

11-29-2012, 07:54 AM

i would like the dropdown box of this menu to align centered, at the moment it aligns to the left. so the text should remain as it is, centered beneath the menu bar option, but the box itself should move according to the length of the text in the sub-menu options (equal spacing between edges of box and text, instead of too much on the right as it is now).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<ul id="nav">
<li><a href="#">Option 1</a>
<ul>
<li><a href="#">sub-menu 1</a></li>
<li><a href="#">sub-menu 2</a></li>
<li><a href="#">sub-menu 3</a></li>
</ul>
</li>
<li><a href="#">Option 2</a>
<ul>
<li><a href="#">sub-menu 1</a></li>
<li><a href="#">sub-menu 2</a></li>
</ul>
</li>
<li><a href="#">Option 3</a>
<ul>
<li><a href="#">sub-menu 1</a></li>
<li><a href="#">long sub-menu 2</a></li>
<li><a href="#">sub-menu 3</a></li>
</ul>
</li>
</ul>
</body>
</html>

html {
padding:0px;
margin:0px;
}
body {
position: absolute;
background-color: white;
margin: 0 0 0 140px;
width: 900px;
height: auto;
color: black;
padding: 0;
}

#header {
margin: 5px 0px 10px 50px;
padding-top: 1px;
height: 140px;
width: 960px;
background-color: black;
}
#nav {
display: inline-block;
margin: 20px 0px 0px 0px;
padding: 4px 0px 0;
background: black;
border: solid 1px rgba(5, 5, 5, .3);
font: 13px 'arial';
}
#nav li {
margin: 0 0px;
padding: 0 0 6px;
float: left;
position: relative;
list-style: none;
}
#nav a {
font-weight: bold;
color: white;
text-decoration: none;
display: block;
padding: 8px 15px;
margin: 0;
}
#nav li:hover > a {
background: black;
color: white;
}
#nav li:hover li a {
background: black;
border: none;
color: white;
}
#nav ul li:hover a{
background: black;
border: none;
color: yellow;
}
#nav ul {
color: white;
display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 36px;
left: 0;
z-index: 2;
}
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
color: white;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

thanks in advance!

Custard7A

11-29-2012, 01:13 PM

I'm a little confused by what you're asking. I know you said you want the dropdown box to align centered, but some of the other things you said seem to imply you are talking about the text inside the dropdown box instead. Perhaps you could clarify what it is you mean.

As for sizing the box to fit the text inside in a multi-line element, I'm not actually sure. There might be some trickery when using inline (or probably more appropriately, inline-block) elements with no width defined, but I've yet to do something along those lines. Someone else should know more.

Since your code looked workable (and in an attempt to understand what you meant to align), I dumped it on my development site.
It's here, if anyone else wants a bit more clarity: [Gone now]

Excavator

11-30-2012, 01:51 AM

backa

11-30-2012, 06:20 AM

Hello backa,
Right now you have the dropped ul set at 150px width. You could re-think that width or remove it entirely...
Look at it this way once - #nav ul {
color: white;
display: none;
margin: 0;
padding: 0;
/*width: 150px;*/
position: absolute;
top: 36px;
left: 0;
z-index: 2;
white-space: nowrap;
}
You could also just put a smaller width than 150px.

I was setting the width in order to allow for wider text that may be required as options when the real text is put in, but your solution seems to work 100%. Thanks! was not aware of the white-space property.

webdevs

11-30-2012, 10:53 AM

Will you need text align center or sub menu background on center?

backa

12-02-2012, 07:59 PM

ideally I'd like the drop menu width to be was wide as the longest option at least, including the base level option, with all text to be in line. As the example stands, if you have an option named "very long option" and the submenu for it is just "option 1" etc., the submenu will be a shorter width than the option and looks off center. make sense?

rry2k

12-02-2012, 08:43 PM

Hi Thanks for the width and no wrap suggestions. I'm also struggling with the menus. How do I align the text in the sub-menu to align under the menu text

Thanks..Russ

backa

12-03-2012, 01:23 PM

arghh tested this menu now in IE7, and find it's not working properly. It's almost impossible to 'catch' the dropdown menu after mouseover on the base level, as soon as you move off the base option the submenu disappears - however what is strange is that it is not uniform across all options, on some options I can at least get to the first submenu option, and moving below that causes the submenu to disappear. Any ideas how I can prevent this? (unfortunately it needs to work on IE7)

Edit: some playing with settings shows that if I change the 'top' value in #nav ul to 26px instead of 36, the menu almost behaves properly (although the alignment is obviously way out) - but some options remain skittish. Argh!