CSS Drop Down Menu Alignment

Posted on 2010-01-07
Last Modified: 2013-11-19
The site I'm working on,, 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
    LVL 1

    Expert Comment

    try putting this in your stylesheet.

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

    Accepted Solution

    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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    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…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now