Lavalamp drop down overlapping

StackOverflow https://stackoverflow.com/questions/3316889

Question

I am trying to work with the lavalamp plugin for jquery and add a drop down functionality to that.

Both the drop down and the lavalamp effect works fine on this code except my problem is the drop down extends the lavalamp effect.

i am sure the problem is with css but i am not able to pin it down ... any tips or pointers is welcome.

here is the code.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>        
        <link type="text/css" href="css/sample.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>    
        <script type="text/javascript" src="js/jquery.lavalamp.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/slider.js"></script>    
        <script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

    </head>
    <body>
        <ul class="drop-down" id="1">
        <li class="top">         
           <div class="topbar"><a href="#">Home</a></div>
           <div class="sub">
            <ul>
                <li class="1">
                    <div><a href"#">Calendar</a></div>
                </li>
                <li class="2">
                    <div><a href"#">account</a></div>
                </li>

            </ul> </div>
        </li>
        <li class="top1">
            <div class="topbar1"><a href="#">Resort</a></div>
            <div class="sub1"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>
        <li class="top2">
            <div class="topbar2"><a href="#">Hotel</a></div>
            <div class="sub2"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>

        <li class="top3">
            <div class="topbar3"><a href="#">Farm House</a></div></li>
    </ul>




</html>

the corresponding css

.drop-down {
    position: relative;
    height: 35px;            
    background: #e8e8e8 url('../img/three_0.gif') repeat-x;
    padding: 0px;
    margin:  0px;   
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.top, .top1, .top2, .top3,
.top4, .top5, .top6 {
    float: left;    
    padding-left: 24px;
    padding-right: 24px;
    line-height: 30px;
    list-style: none;
}

.drop-down li.back {
    background: #cecece;
    width:auto;
    height: 32px;
    margin-top: 2px;
    z-index: 8;
    position: absolute;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.drop-down li div.topbar, .drop-down li div.topbar1,.drop-down li div.topbar2,
.drop-down li div.topbar3{
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative; 

}


.sub, .sub1, .sub2, .sub3{
    display: none;    
    float: left;
    top: 34px;
    left: 0;
    width: 160px;   
    margin: 0px 0 0 -4px;
    background: #cecece;
    white-space: nowrap;    
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-top-right-radius: 7px;    
    height: auto;
    position: relative;
    z-index: 20;
}

.sub li, .sub1 li, .sub2 li, .sub3 li{
    display: block;
    height: 25px;
    position: relative;
    z-index: 30;
    float: left;
    width: 160px;   
    font-weight: normal;
    background: #cecece;
}

.sub li a, .sub1 li a , .sub2 li a, .sub3 li a{
    position: relative;
    z-index: 40;
    height: 25px;
    display: block;
    float: left;
    line-height: 20px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;    
    padding-right: 5px;
    text-align: center;
}

.sub li a:hover, .sub1 li a:hover, .sub2 li a:hover, .sub3 li a:hover{
    background: #ffb600;
    width: 120px;    
    line-height: 20px;          
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
}

along with the jquery i use for the drop down.

$(document).ready(function() {   

        $('li.top').hover(function () {            
            $('div.sub').slideDown('medium');
    }, 
        function(){
            $('div.sub').stop(true,true).css('display','none');

    });
        $('li.top1').hover(function () {            
            $('div.sub1').slideDown('medium');
    }, 
        function(){
            $('div.sub1').stop(true,true).css('display','none');
    });        

        $('li.top2').hover(function () {            
            $('div.sub2').slideDown('medium');
    }, 
        function(){
            $('div.sub2').stop(true,true).css('display','none');
    });     

});
Was it helpful?

Solution

whats the css on .1 and .2? also, it would be a VERY good idea to change the names of those so that there is a letter as the first character e.g. .c1 and .c2

i noticed that you have .sub li, but .sub is a div, either ditch the div and make the ul's class sub(or better yet id since you're using these classes like id's) or make it

.sub ul li where it's .sub li

also, border-radius is standard now, so you can ditch that -moz and -webkit crap

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top