Grow your CSS skills. Land your dream job.

css 2-level menu

  • # February 8, 2010 at 5:44 pm

    Hi everyone!

    Im creating 2-level menu with unordered list. The problem is that the second menu has to start where the first one starts ( pic 1 ). And im trying to keep it semantic. Here is the code i came up with:

    and css:

    Code:
    .menu{
    position:relative;
    background:#CCC;
    width:305px
    }
    .menu ul{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    }
    .menu ul li{
    margin:0;
    padding:0
    }
    .menu ul a{
    color:#454444;
    display:block;
    width:114px;
    text-align:right;
    padding:2px 10px 2px 5px;
    }
    .menu ul a:hover,
    .menu ul li.selected a{
    text-decoration:none;
    color:#00baf2;
    background:url(images/menu_arrow.gif) no-repeat right 8px #ebf2f7;
    }

    .menu ul ul{
    position:absolute;
    right:0;
    margin:0;
    top:0;
    padding:0;
    width:176px;
    background:#ebf2f7
    }

    The problem is in absolute positioning. <p> tag should below the menu, but it isnt. I tried giving a <div> tag position:relative. It didnt work. Is there a way to accomplish it not ruing html. Any ideas would be welcome.

    PS! Im not trying to make a flyout menu. Second menu comes after page refresh not after hovering first class. And the weird words between <a> tags are estonian language :mrgreen:

    # February 8, 2010 at 8:18 pm

    You need to change the .menu from:

    Code:
    .menu{
    position:relative;
    background:#CCC;
    width:305px
    }

    to:

    Code:
    .menu{
    float:left;
    position:relative;
    background:#CCC;
    width:305px
    }
    # February 9, 2010 at 4:27 am

    sry but didnt work for me. <p> tag needs to be under the .menu div. Ill finish rest of the template and provide a link then. Maybe its easier to understand what i need then

    # February 9, 2010 at 5:19 am

    If you are using the float as Jamy_Za suggested put this after your menu

    Code:

    This should be after the menu not under!!!

    This should be under the other p tag

    and CSS

    Code:
    p.under {
    margin-top: 50px;
    }

    .clear {
    clear: left;
    }

    # February 9, 2010 at 8:43 pm

    Here is the complete code
    http://taavi.atv06.ee/egtt/

    Ill explain once more what i need:
    *the menu on the left side has submenu. Submenu has to start at the same level where the first one did (and it does).
    *Problem is that if i use position:absolute then everything that is under the menu doesent move down.
    *menu is going to be dynamic so there can not be fixed heights.

    I provided an image of the way it should be.

    Any ideas would be appreciated.

    # February 10, 2010 at 8:54 am

    You cannot put position absolute on the fly out because you are removing it from the normal flow. I only did this in Firebug so you will need to check other browsers.

    Code:
    #left div.menu {
    float:left;
    margin-top:10px;
    position:relative;
    width:305px;
    }

    .menu ul ul {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EBF2F7 none repeat scroll 0 0;
    float:right;
    margin:-63px 0 0 5px;
    padding:3px 10px;
    width:156px;
    }

    Giving the left div.menu a width and floating it left pushes the rest down below it. I hope this helps…

    # February 10, 2010 at 9:28 am

    this solution does not work. Its not dynamic. you are using margin-top:-63px. What if the first or fifth element was selected. The position of second level menu changes too. As i see at this point some things are just not possible. I guess ill just find a workaround in php code and make two seperate ul lists

    # February 10, 2010 at 9:40 am

    OK, then still using the code for the left div menu add a minimum height so it will push down, and leave the fly out as you had it.

    # February 10, 2010 at 10:32 am

    with this case there is no difference if i use height or min-height. And it is still static. Final product will have cms. User can add and delete menu items. I will never know how many menu items there will be. Fixed height is a stacic solution and sadly not working for me :(. It still can cause overflow or stupid whitespace

    # February 10, 2010 at 11:45 am

    Have you tried Stu Nichols menus, he has a lot of options that could fit your bill or inspire you
    http://www.stunicholls.com/index.html
    http://www.cssplay.co.uk/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".