SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with drop-down menu on hover

    I am having problems with a menu triggered on a hover; it doesn't stay open as I mouse down to the actual menu items.

    I had this problem with another design too, described in this post and with an answer provided in this post.

    However, I can't seem to apply the same solution in this case. I am not sure what is creating the apparent gap between the list item and the drop-down, since I am just using the height of the list item to push the drop-down down a bit.

    Site: Hippoi Athanatoi: If Wishes Were Horses (mouse over "Home" to see how the drop-down behaves)

    CSS:

    Code:
    ul#MenuLeft, ul#MenuLeft ul {
    height:25px;
    left:210px;
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    top:90px;
    width:460px;
    }
    
    ul#MenuLeft ul {
    background:#5B8699 url(http://www.hippoiathanatoi.com/Graphics/bg_blue.png) repeat;
    border:5px solid #CC5C46; 
    font:normal normal normal 16px Cambria, Georgia, serif;
    height:auto;
    padding-left:10px;
    width:175px;
    }
    
    ul#MenuLeft li, ul#MenuLeft li a {
    float:left;
    position:relative;
    text-decoration:none;
    text-indent:-999em;
    }
    
    ul#MenuLeft li {
    height:50px;
    }
    
    ul#MenuLeft li a {
    background:url(http://www.hippoiathanatoi.com/Graphics/menu_left-ha.png) no-repeat 0 0;
    height:25px;
    } 
    
    ul#MenuLeft li a:focus {
    outline:0
    }
    
    ul#MenuLeft li.Home, ul#MenuLeft li.Home a {
    background-position:0 0;
    width:68px;
    }
    
    ul#MenuLeft li.Home a:hover {
    background-position:0 -25px
    }
    
    ul#MenuLeft li.Updates, ul#MenuLeft li.Updates a {
    background-position:-68px 0;
    width:109px;
    }
    
    ul#MenuLeft li.Updates a:hover {
    background-position:-68px -25px
    }
    
    ul#MenuLeft li.Digest, ul#MenuLeft li.Digest a {
    background-position:-177px 0;
    width:74px;
    }
    
    ul#MenuLeft li.Digest a:hover {
    background-position:-177px -25px
    }
    
    ul#MenuLeft li ul {
    left:0;
    margin-left:-999em;
    position:absolute;
    top:100%;
    }
    
    ul#MenuLeft li li {
    float:none;
    height:25px;
    width:175px;
    }
    
    ul#MenuLeft li li a {
    background:none;
    text-indent:0;
    }
    
    ul#MenuLeft li:hover ul ul {
    margin-left:-999em;
    }
    
    ul#MenuLeft li:hover ul, ul#MenuLeft li li:hover ul {
    margin-left:0;
    }
    
    ul#MenuLeft li li a:link, ul#MenuLeft li li a:visited {
    color:#C8BDB0;
    text-decoration:none;
    }
    
    ul#MenuLeft li li a:link:hover, ul#MenuLeft li li a:visited:hover, ul#MenuLeft li li a:link:active, ul#MenuLeft li li a:visited:active {
    color:#CC5C46;
    text-decoration:underline;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Make these changes.

    Code:
    ul#MenuLeft{z-index:99;height:auto}
    ul#MenuLeft li {height:50px}

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! Thank you, the z-index always stumps me.


Bookmarks

Posting Permissions

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