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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Southwestern MI
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    drop down hover brings up all ul not one wanted

    I have a three tier drop down menu. When I hover over the first tier it brings up all the other tiers not just #2. It shows #3 as well. Can you make a suggestion?

    Need any help you can offer...tearing hair.
    Thanks,
    T.

    site: http://http://www.jewelerjoni.com/new_jeweler.htm

    Here's the css:

    /*******start new jeweler list**************/


    .right_list { float:left;
    width: 180px;
    overflow: hidden;
    padding-left: 10px;
    margin-left: 10px;
    }

    #cat_1347111_divs, #nav_1347111 ul, #cat_1348105_divs, #nav_1348105 ul, #cat_1349473_divs, #nav_1349473 ul { padding:0;
    margin: 0;
    list-style: none;
    float: left;

    }

    #nav_1348105 a, #nav_1349473 a, #nav_1347111 a { display: block;
    width: 400px;
    padding:10px;
    color:white;
    height: 25px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px solid #000;
    border-top: 1px solid #fff;
    background: #7681c0;

    }


    /*******1 level control************/

    #nav_1348105 li a:hover, #nav_1349473 li a:hover, #nav_1347111 li a:hover { text-decoration: none;
    background: #626b9f;
    }

    #nav_1348105 li, #nav_1349473 li, #nav_1347111 li { float: left;
    margin-left: -10px;
    }
    /********2 level control*********/

    #nav_1349473 li ul, #nav_1348105 li ul, #nav_1347111 li ul { position: absolute;
    width: 150px;
    left: -999em;
    z-index: 500;
    margin-left: 200px;
    margin-top: -47px;
    font-size: 0.8em;

    }



    #nav_1349473 li:hover ul , #nav_1348105 li:hover ul, #nav_1347111 li:hover ul{ left: auto;

    }

    #nav_1349473 li ul a, #nav_1348105 li ul a, #nav_1347111 li ul a { display: block;
    color: white;
    line-height: normal;
    font-size: 1em;
    text-transform: none;
    font-family: Helvetica, Arial, sans-serif;
    }

    /***gray below****/

    #nav_1349473 li ul li a, #nav_1348105 li ul li a, #nav_1347111 li ul li a { width: 150px;
    border-bottom: 1px solid black;
    border-top: 1px solid gray;
    border-left: 1px solid black;
    height: 10px;
    background: #363636;


    }
    /****purple below****/
    #nav_1349473 li ul li a:hover, #nav_1348105 li ul li a:hover, #nav_1347111 li ul li a:hover { color: #fff;
    background: #955e96;
    }

    /*********third level control*********/

    #nav_1349473 li ul li ul {position: absolute;
    width: 150px;
    left: -999em;
    }


    #nav_1349473 li ul li:hover ul { left: auto;
    background:blue;
    }

    #nav_1349473 li ul li ul a {
    width: 150px;
    height: 10px;
    display:block;
    float: left;
    margin-left: -19px;
    margin-top: -10px;
    font-size: 0.8em;
    border-bottom: 1px solid black;
    border-top: 1px solid gray;
    border-left: 1px solid black;

    }


    /*******end new jeweler list**************/
    Last edited by tartman; 11-19-2011 at 02:49 PM. Reason: corrected url

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Have a try replacing:

    Code:
    #nav_1349473 li:hover ul , #nav_1348105 li:hover ul, #nav_1347111 li:hover ul{ left: auto;
    
    }
    with

    Code:
    #nav_1349473 li:hover > ul , #nav_1348105 li:hover > ul, #nav_1347111 li:hover > ul{ left: auto; 
    
    }
    As you have it, all uls within the hovered li will be set to left:auto - which affects the third as well as the second level. Adding the > selector means that only direct child elements will be displayed - which will exclude the third level. This is not supported in IE6, however, if you're coding for that browser.

  • Users who have thanked SB65 for this post:

    tartman (11-20-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Location
    Southwestern MI
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Wow, Thanks for your solution! Never heard of using > that way.
    T.


  •  

    Posting Permissions

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