htmlcssmenunavigationsubmenu

CSS navigation horizontal submenu not directly below parent


I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.

At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?

Thanks!

EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg

Link to what I've done so far - http://www.eventav.biz/site/

ul.top_menu {
        position:               relative;
        margin:                 0;
        margin-bottom:          -1px;
        list-style:             none;
        display:                table;
        width:                  1024px;
        border:                 1px solid #111111;
        border-bottom:          1px solid #000000;
        border-radius:          10px 10px 0px 0px;
    }

    .top_menu li {
        display:                block;
        position:               relative;
        border-right:           1px solid #111111;
        float:                  left;
        margin:                 0px;
        display:                table-cell;
        vertical-align:         middle;
    }

    .top_menu li:first-child {
        border-left:            1px solid #111111;
    }

    .top_menu li a {
        display:                block;
        text-decoration:        none;
        color:                  #000000;
        text-shadow:            3px 3px 8px #3A3A3A;
        padding:                15px;
        height:                 30px;
        display:                table-cell;
        vertical-align:         middle;
        margin:                 0px;
    }

    #top_menu_item ul { 
        display:                none;
        margin:                 0px;
    }

    #top_menu_item:hover ul {
      display:                  block;
      position:                 fixed;
      margin:                   0;
    }

    #top_menu_item:hover li {
        width: 1024px;
        background-color: #666;
      text-align:               left;
      color:                    #FFF;
      font-size:                12px;
      margin:                   0px;
    }

<ul class="top_menu">
                        <li id="top_menu_item"><a href="#">HOME</a></li>
                        <li id="top_menu_item"><a href="#">OUR SERVICES</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">EXAMPLES OF OUR WORK</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">CONTACT US</a></li>
                    </ul>

Solution

    1. Remove position: relative; from #top_menu_item

    2. Set #top_menu_item ul to position: absolute; left: 0; instead

    3. Remove left padding on #top_menu with padding-left: 0;

    4. Add:

    #top_menu_item:first-child {
       margin-left: 40px;
    }
    

    Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.

    It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.

    Let me know if you have any problems!