...

View Full Version : CSS Drop-Down Menu Alignment Problem



davex
12-18-2010, 04:48 PM
Hi,

Sorry this is probably something really obvious and I'm stupid. Any help appreciated.

I am trying to do a drop-down menu with CSS and mainly based on the suckerfish example (not yet included the JS though as just testing).

However though the menu shows and the drop-down lists appear I cannot for the life of me get it to line up - it appears below and to the right of the DIV container I want to use.

If it's not clear I want the menu to be inside the title_div DIV which is within the page_title DIV (i.e. the black section at the top).

Thanks in advance for any help; full HTML/CSS code below.

Regards,

Dave.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>TITLE_HERE</TITLE>

<STYLE TYPE="text/css">
body
{
font-family: Verdana, Arial, Sans-serif;
font-size: 12pt;
background-color: white;
}

div.main_container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border: solid 1px black;
}

div.page_title
{
color: white;
font-size: 14pt;
background-color: black;
padding: 5px;
margin-top: 0px;
}

div.page_content
{
padding: 5px;
clear: left;
}

div.page_footer
{
margin-top: 20px;
padding: 5px;
background-color: black;
color: white;
margin-bottom: 0px;
font-size: 10pt;
font-weight: bold;
}

div.page_footer a
{
color: #e0e0ff;
text-decoration: none;
}

div.page_footer a:hover
{
color: white;
}

div.login_box
{
margin-top: 20px;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

div.error
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
font-size: 14pt;
color: red;
width: 100%;
text-align: center;
}


#nav ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a
{
display: block;
width: 10em;
color: white;
text-decoration: none;
font-size: 10pt;
}

#nav a:hover
{
color: red;
}

#nav li
{
float: left;
width: 10em;
background-color: black;
list-style: none;
padding: 4px;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
height: auto;
}

#nav li ul li
{
border-top: solid 1px white;
}

#nav li:hover ul
{
left: auto;
}

div.page_menu
{
position: absolute:
}</STYLE>

</HEAD>
<BODY>

<DIV ID="container_div" CLASS="main_container">
<DIV ID="page_title" CLASS="page_title">
<DIV ID="title_div" CLASS="main_title">
Page_Title</DIV>

<DIV ID="page_menu" CLASS="page_menu">
<UL ID="nav">
<LI><A HREF="#">Option One</A>
<UL>
<LI><A HREF="#">Option One A</A></LI>
<LI><A HREF="#">Option One B</A></LI>
</UL>
</LI>
<LI><A HREF="#">Option Two</A>

<UL>
<LI><A HREF="#">Option Two The First</A></LI>
<LI><A HREF="#">Option Two The Second One</A></LI>
</UL>
</LI>
</UL>
</DIV>
</DIV>
<DIV ID="content" CLASS="page_content">

Content Goes Here...

</DIV>

<DIV ID="footer_div" CLASS="page_footer">
Footer_Text

</DIV>

</DIV>

Excavator
12-18-2010, 05:10 PM
Hello davex,
The first step would be to check your code with the validators and correct the errors found.
Have a look at the links about validation in my signature line below.

davex
12-18-2010, 05:37 PM
Ok two small tweaks (one CSS parse and the DOCTYPE) but no effect.

Revised code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<HEAD>
<TITLE>TITLE_HERE</TITLE>

<STYLE TYPE="text/css">
body
{
font-family: Verdana, Arial, Sans-serif;
font-size: 12pt;
background-color: white;
}

div.main_container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border: solid 1px black;
}

div.page_title
{
color: white;
font-size: 14pt;
background-color: black;
padding: 5px;
margin-top: 0px;
}

div.page_content
{
padding: 5px;
clear: left;
}

div.page_footer
{
margin-top: 20px;
padding: 5px;
background-color: black;
color: white;
margin-bottom: 0px;
font-size: 10pt;
font-weight: bold;
}

div.page_footer a
{
color: #e0e0ff;
text-decoration: none;
}

div.page_footer a:hover
{
color: white;
}

div.login_box
{
margin-top: 20px;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

div.error
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
font-size: 14pt;
color: red;
width: 100%;
text-align: center;
}


#nav ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a
{
display: block;
width: 10em;
color: white;
text-decoration: none;
font-size: 10pt;
}

#nav a:hover
{
color: red;
}

#nav li
{
float: left;
width: 10em;
background-color: black;
list-style: none;
padding: 4px;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
height: auto;
}

#nav li ul li
{
border-top: solid 1px white;
}

#nav li:hover ul
{
left: auto;
}

div.page_menu
{

}
</STYLE>

</HEAD>
<BODY>

<DIV ID="container_div" CLASS="main_container">
<DIV ID="page_title" CLASS="page_title">
<DIV ID="title_div" CLASS="main_title">
Page_Title</DIV>

<DIV ID="page_menu" CLASS="page_menu">
<UL ID="nav">
<LI><A HREF="#">Option One</A>
<UL>
<LI><A HREF="#">Option One A</A></LI>
<LI><A HREF="#">Option One B</A></LI>
</UL>
</LI>
<LI><A HREF="#">Option Two</A>
<UL>
<LI><A HREF="#">Option Two The First</A></LI>
<LI><A HREF="#">Option Two The Second One</A></LI>
</UL>
</LI>
</UL>
</DIV>
</DIV>
<DIV ID="content" CLASS="page_content">

Content Goes Here...
</DIV>

<DIV ID="footer_div" CLASS="page_footer">
Footer_Text

</DIV>

</DIV>

Excavator
12-18-2010, 05:46 PM
left: auto; is pretty vague. Make the parent li relative so the child has something to measure off of, then specify where you really want the child li to be.

Try these changes highlighted in red -

#nav a:hover
{
color: red;
}

#nav li
{
float: left;
width: 10em;
background-color: black;
list-style: none;
padding: 4px;
position: relative;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
height: auto;
}

#nav li ul li
{
border-top: solid 1px white;
}

#nav li:hover ul {
top: 25px;
left: 0;
}

div.page_menu
{

}

davex
12-18-2010, 05:51 PM
Hi,

Thanks for your suggestions. I made the changes but the main (parent) ul element is still below and to the right of the black container DIV.

The menus do line up much nicer now though!

Regards,

Dave.

Excavator
12-18-2010, 06:02 PM
To make .page_title enclose the ul add this bit in red -

div.page_title
{
color: white;
font-size: 14pt;
background-color: black;
padding: 5px;
margin-top: 0px;
overflow: auto;
}


Also, in your CSS you style #nav ul.
That only applies to the child ul of ul#nav. It works better if you apply that to both uls like this ul#nav, ul#nav ul {

Excavator
12-18-2010, 06:07 PM
And, just because I've always hated the suckerfish code, a demo I have of a very simple CSS only dropdown menu (http://nopeople.com/CSS%20tips/CSS_dropDownMenu-noImages/index.html).

davex
12-18-2010, 06:08 PM
Ok again many thanks for your help. It is now perfectly lined up inside that DIV!

But sadly I have a new problem - the popup menus are now basically hidden - they appear but only inside the DIV and so are cut off at the bottom e.g. they don't display "on top" of everything else including the page content below.

Revised code from your input:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<HEAD>
<TITLE>TITLE_HERE</TITLE>

<STYLE TYPE="text/css">
body
{
font-family: Verdana, Arial, Sans-serif;
font-size: 12pt;
background-color: white;
}

div.main_container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border: solid 1px black;
}

div.page_title
{
color: white;
font-size: 14pt;
background-color: black;
padding: 5px;
margin-top: 0px;
overflow: auto;
clear: left;
}

div.page_content
{
padding: 5px;
}

div.page_footer
{
margin-top: 20px;
padding: 5px;
background-color: black;
color: white;
margin-bottom: 0px;
font-size: 10pt;
font-weight: bold;
}

div.page_footer a
{
color: #e0e0ff;
text-decoration: none;
}

div.page_footer a:hover
{
color: white;
}

div.login_box
{
margin-top: 20px;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

div.error
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
font-size: 14pt;
color: red;
width: 100%;
text-align: center;
}


ul#nav, ul#nav ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
z-index: 10;
}

#nav a
{
display: block;
width: 10em;
color: white;
text-decoration: none;
font-size: 10pt;
}

#nav a:hover
{
color: red;
}

#nav li
{
float: left;
width: 10em;
background-color: black;
list-style: none;
padding: 4px;
position: relative;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
height: auto;
}

#nav li ul li
{
border-top: solid 1px white;
}

#nav li:hover ul
{
top: 20px;
left: 0;
}

div.page_menu
{

}
</STYLE>

</HEAD>
<BODY>

<DIV ID="container_div" CLASS="main_container">
<DIV ID="page_title" CLASS="page_title">
<DIV ID="title_div" CLASS="main_title">
Page_Title</DIV>

<DIV ID="page_menu" CLASS="page_menu">
<UL ID="nav">
<LI><A HREF="#">Option One</A>
<UL>
<LI><A HREF="#">Option One A</A></LI>
<LI><A HREF="#">Option One B</A></LI>
</UL>
</LI>
<LI><A HREF="#">Option Two</A>
<UL>
<LI><A HREF="#">Option Two The First</A></LI>
<LI><A HREF="#">Option Two The Second One</A></LI>
</UL>
</LI>
</UL>
</DIV>
</DIV>
<DIV ID="content" CLASS="page_content">

Content Goes Here...
</DIV>

<DIV ID="footer_div" CLASS="page_footer">
Footer_Text

</DIV>

</DIV>

davex
12-18-2010, 06:26 PM
Hi,

I've added an overflow: visible; instead of auto and it now works!

Thank you ever so much for all your help.

I had a look at your example in CSS which is great but very sadly I need to support IE6 (yuck) and so I think some sort of JS magic needs to be done.

Once again thank you so much.

Kind regards,

Dave.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum