Forums

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

Home Forums CSS align submenu items in horizontal menu

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #29594
    allampatu
    Participant

    hi guys
    i’m going mad for this menu

    i’ve build a little menu where only one item has 2 sub item

    my troubles are:
    1- the two sub items are displayed horizontally and not vertically
    2- i can’t color the item box but it colors the entire row.

    html code

    css code

    Code:
    menu {
    width: 1130px;
    margin-left: 54px;
    margin-top:-1px;
    margin-bottom: -23px;
    text-align:center;
    }

    .menu ul ul {
    position: absolute;
    visibility:hidden;
    top: 317px;
    margin-left: -40px;
    width: 900px
    }

    .menu ul li:hover ul {
    visibility:visible;

    }

    .menu:after
    {
    content: “.”;
    display: block;
    line-height: 1px;
    font-size: 1px;
    clear: both;
    }

    .menulist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 80%;
    font-size: 0.8em;
    }

    .menulist li
    {
    display: block;
    float: left;
    width: 15%;
    margin: 0;
    padding: 0;
    }

    .menulist li a
    {
    display: block;
    width: 100%;
    padding: 0.5em;
    border-width: 1px;
    border-color: #ffe #aaab9c #ccc #fff;
    border-style: solid;
    color: #777;
    text-decoration: none;

    }

    .menu>ul.menulist li a { width: auto; }

    ul.menulist li#active a
    {
    background: #f0e7d7;
    color: #000;
    }

    ul.menulist li a:hover, ul#navlist li#active a:hover
    {
    color: #000;
    background: transparent;
    border-color: #aaab9c #fff #fff #ccc;
    }

    i hope you can help me, :D

    #79480
    jamygolden
    Member
    Code:
    .menu ul ul li {float: none;}
    #79481
    allampatu
    Participant

    yahoooooooo. it works!

    and now i’ve added a background-color to fill the sub items

    thanks a lot!

    #79820

    Use this menu for the Horizontal and Vertical position format. :-)

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