Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css 2-level menu

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #27926
    tafkanator
    Participant

    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:

    #70669
    tafkanator
    Participant

    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

    #70708
    tafkanator
    Participant

    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.

    #70717
    tafkanator
    Participant

    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

    #70688
    tafkanator
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.