Tue, 2014-07-22 15:58
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>
Mon, 2014-07-28 19:16
#1
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; }