1 reply [Last post]
darrin goldberg
darrin goldberg's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-4
Joined: 2014-07-22
Posts: 1
Points: 2

I am having trouble aligning this drop down menu I created. The drop down menu won't align with the main menu correctly. Please help me align it properly.

Here is my CSS:

li {
display:inline;
padding-left:30px;
padding-right:30px;
}
ul {
list-style: none;
text-align:center;
}
ul li {
display: inline-block;
}
ul li a {
color: 000000;
text-decoration: none;
font-size: 24px;
text-align:left;
}
ul li ul {
display: none;
position: absolute;
}
ul li:hover ul {
display:block;
background-color: transparent;
position:absolute;
text-align:center;
}
ul a:hover {
color:ac061a;
font-size:28px;
position:relative;
}

And here is my HTML:
<ul>
<li><a href="/home.htm">Home</a></li>
<li><a href="/aboutus.htm">About Us</a><ul><li><a href="/aboutus.htm#areasweserve">Areas We Serve</a></li><br><li><a class1 href="/aboutus.htm#aboutthefounder">About the Founder</a></li></ul></li>
<li><a href="/ourservices.htm">Our Services</a><ul><li><a href="/ourservices.htm#counseling">Counseling</a></li><br><li><a href="/ourservices.htm#casemanagement">Case Management</a></li><br><li><a href="/ourservices.htm#cleaning">Cleaning</a></li></ul></li>
<li><a href="/whytreatment.htm">Why Treatment?</a><ul><li><a href="/whytreatment.htm#issuesweaddress">Issues We Address</a></li></ul></li>
<li><a href="/appointments.htm">Appointments</a><ul><li><a href="/appointments.htm#gettingstarted">Getting Started</a></li><br><li><a href="/appointments.htm#yourfirstsession">Your First Session</a></li><br><li><a href="/appointments.htm#payment">Payment</a></li></ul></li>
<li><a href="/resources.htm">Resources</a></li>
<li><a href="/careers.htm">Careers</a></li>
<li><a href="/contactus.htm">Contact Us</a></li>
</ul>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 27 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi darrin goldberg, If you

Hi darrin goldberg,
If you use position: absolute here

ul li ul {
display: none;
position: absolute;
}

The the sub menu is positioned from a parent that has been positioned or the top left of the page.
adding position:relative here should help.
ul li {
display: inline-block;
position:relative;
}