1

我正在尝试使用 jquery 的 lavalamp 插件并为其添加下拉功能。

下拉和 lavalamp 效果在此代码上都可以正常工作，除了我的问题是下拉扩展了 lavalamp 效果。

我确定问题出在css上，但我无法确定...欢迎任何提示或指示。

这是代码。

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

对应的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;
}

连同我用于下拉菜单的 jquery。

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

});
4

1 回答 1

1

.1 和 .2 上的 CSS 是什么？此外，更改它们的名称是一个非常好的主意，以便有一个字母作为第一个字符，例如 .c1 和 .c2

我注意到你有 .sub li，但 .sub 是一个 div，要么放弃 div 并制作 ul 的类 sub（或者更好的 id，因为你使用这些类，如 id 的）或制作它

.sub ul li 在哪里 .sub li

此外，border-radius 现在是标准的，所以你可以抛弃 -moz 和 -webkit 废话

于 2010-07-24T01:13:11.567 回答