Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop down menu

    I have a horizontal drop down menu which contains a few links. However, only one of them actually contains a drop down. When I mouse over it, the secondary menu drops down, but for some reason the primary and secondary menu get wider, and push over the remaining links to the right of it.

    Here is a snippet of my code:

    HTML:

    <ul id='menu'>
    <li ><a href='link1.html'>Link1</a></li>
    <li ><a href='link2.html'>Link2</a></li>
    <li ><a href='link3.html' >Link3</a>
    <ul>
    <li><a href="link3a">Link3a</A></li>
    <li><a href="link3b">Link3b</A></li>
    </ul>
    </li>
    <li ><a href='link4.html'>Link4</a></li>
    <li ><a href='link5.html'>Link5</a></li>
    </ul>

    CSS:

    #menu li {
    display: block;
    list-style: none;
    width: auto;
    height: 36px;
    background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    float: left;
    padding: 0 10px 0 10px;
    position: relative;
    }

    #menu a {

    color: #FFFFFF;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 250%;
    }

    #menu li a {
    color: #FFFFFF;
    background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
    text-decoration: none;
    width: auto;
    }

    #menu ul ul {
    position: absolute;
    z-index: 500;
    }

    #menu ul li {
    display: block;
    list-style: none;
    height: 36px;
    background: #FFFFFF url("images/menu-bg.gif") top left repeat-x;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    float: left;
    padding: 0 10px 0 10px;
    position: relative;
    }

    #menu ul li a{
    height: 36px;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    float: left;
    }

    div.menu ul ul,
    div.menu ul li:hover ul ul,
    div.menu ul ul li:hover ul ul
    {display: none;}

    div.menu ul li:hover ul,
    div.menu ul ul li:hover ul,
    div.menu ul ul ul li:hover ul
    {display: block;}

    I don't have a lot of css knowledge. I've been tweaking this thing forever and cannot for the life of me figure out how to make it work. Could someone enlighten me please??

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    A good article thats will help you to understand how to create CSS manus is available at Creating CSS Menus


    Hope this helps you to solve your problem.
    Programming & Webmaster Forum - AdSense Revenue Sharing forum


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •