[Solved] CSS Menu Drop Down Alignment Help

[Capt Otis]

Hey guys,

I have built my own menu system with drop downs and what not. I have run into a problem, maybe yall can help.

Everything works fine, except for my last drop down. When a user hovers over the main menu item, the drop down appears below it aligning the left side of the drop down with the left side of the menu item. Problem is, when the user resizes the screen or doesnt have a big enough screen to view the whole page, the drop down doesnt appear all the way. So for the last menu drop down, I want it to open aligning its right side to the right side of the main menu item.

I cant get the drop down to overlap the block before it, as it is in a nested list. Any thoughts/comments/help?

CSS:

Code:

/*BEGIN MENU*/
#menu {
width:940px;
height:30px;
text-align:left;
background-image:url(images/menubg.jpg);
background-repeat:repeat-x;
font-weight:bold;
font-family:Tahoma, serif, “Times New Roman”;
font-size:15px;
margin-bottom:5px;
z-index:1000;
}
#nav, #nav ul {
float: left;
width: 940px;
height:25px;
list-style: none;
line-height: 1;
font-weight: bold;
padding: 0;
margin: 0;
background:url(images/menubg.jpg);
text-align:left;
}

#nav a {
display: block;
width: auto;
font-family:Tahoma, serif, “Times New Roman”;
font-size:13px;
color: #FFFFFF;
text-decoration: none;
padding: 0.5em 2em;
}

#nav li li a.daddy {
background:url(images/rightarrow2.gif) right no-repeat;
}

#nav li {
float: left;
padding: 0;
width: auto;
}

#nav li ul { /*entire and all drop downs 1st level*/
position: absolute;
left: -999em;
height: auto;
width: 15em;
font-weight: normal;
margin: 0em;
background-image:none;
background-color:#5381ac;
border: 1px solid #165487; /*dropdown menu border*/
z-index:1005;
overflow:visible;
}

#nav li li { /*each option of level 1 drop down*/
padding:0;
width: 15em;
height:auto;
}

#nav li ul a {
width: 13em; /*arrow*/
margin-left:-1em;
}

*html #nav li ul a { /*arrow & width of drop downs for IE */
width:16.5em;
}

#nav li ul li ul { /*drop down level 2*/
margin: -2.5em 0 0 15em;
z-index:1006;
margin-top:-1.8em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #225588;
}
#addto {
background-image:url(img/add.gif);
background-position:right;
background-repeat:no-repeat;
width:16em;
overflow:hidden;
}
#addto a:hover {
background-image:url(img/add.gif);
background-position:right;
background-repeat:no-repeat;
background-color: #225588;
width:15em;
}
#menu_last { /*last drop down*/
position:relative;
left: -15em;
}
/*END MENU*/

I dont see the point in posting the html… its one big ul (id="nav"). Menu items are <li> and drop downs are their own unordered list (ul) inside the parent li.

-Tom

[Capt Otis]

Has anyone actually taken a look at this? i am truly stumped.

-T

[roosterdude]

Hey, I was stuck on this earlier today and came across your thread hoping to find a solution.

Well I have since figured it out and here it is:

Firstly give the faculty <li> an id of ‘faculty’ so we can target this in the CSS.

Then using the id of menu_last that you’re currently using for the <ul> we can start the CSS magic:

Code:

li#faculty {
position: relative;
}

ul#menu_last {
position: absolute;
right: 0;
}

That’ll do it!!

[Capt Otis]

Thank you, I got it working!

-Tom

[Author]

Posts