CSS Drop Down Menu Alignment

Posted on 2010-01-07
Medium Priority
Last Modified: 2013-11-19
The site I'm working on, www.visualdemocracy.com, has a Jqeury/CSS drop down menu that has some CSS issues.

The menu works, but the menu itesm is positioned too far up and should be further down closer to the green line.

The first drop down example works, but I want the drop down to align to the top left of the menu item parent and now its down a bit to the lower right.

Any help would be very much appreciated.
Question by:jsuissa

Expert Comment

ID: 26207878
try putting this in your stylesheet.

ul.nav ul { top: 100%; left: 0; }

Accepted Solution

vinkrins earned 2000 total points
ID: 26208285
Hi jsuissa,

replace following css code with the attached css code ,

.nav li:hover ul,
.nav li.sfHover ul {
  top: 25px;

let me know if there any problem or confusion :D

Vinay Rajput
.nav li:hover ul,
.nav li.sfHover ul {
    top: 100%;

#menubar ul ul{

Open in new window


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question