Lavalamp déposer des chevauchements

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

Question

J'essaie de travailler avec le plug-in Lavalamp pour JQuery et ajoutez une fonctionnalité déroulante à celle-ci.

La liste déroulante et l'effet de Lavalamp fonctionne bien sur ce code, sauf mon problème est que la liste déroulante étend l'effet Lavalamp.

Je suis sûr que le problème est avec CSS, mais je ne suis pas capable de l'épiler ... des conseils ou des pointeurs sont les bienvenus.

Voici le 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>

le CSS correspondant 

.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;
}

avec la jQuery que j'utilise pour la descente. 

$(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');
    });     

});

Était-ce utile?

La solution

Quel est le CSS sur .1 et .2?En outre, ce serait une très bonne idée de changer les noms de ceux de sorte qu'il existe une lettre comme premier caractère par exemple..c1 et .c2

J'ai remarqué que vous avez .SUB Li, mais .SUB est un div, abandonnez la div et de rendre la classe de classe UL (ou mieux encore puisque vous utilisez ces classes comme des identifiants) ou de le faire

.SUB UL LI où il est .SUB LI

En outre, la frontière-rayon est standard maintenant, afin que vous puissiez abandonner cela -MOZ et -webkit Crap

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top