Fatal编程技术网

Javascript 倒车灯重叠

javascript html css jquery-plugins

Javascript 倒车灯重叠,javascript,html,css,jquery-plugins,lavalamp,Javascript,Html,Css,Jquery Plugins,Lavalamp,我正在尝试使用用于jquery的lavalamp插件，并为其添加一个下拉功能 下拉和lavalamp效果在这段代码上都很好，除了我的问题是下拉扩展了lavalamp效果 我确信问题出在css上，但我无法确定它。。。欢迎提供任何提示或建议 这是代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-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>
以及我用于下拉列表的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');
    });     

});
1和2上的css是什么？此外，最好更改这些字符的名称，以便在第一个字符中有一个字母，例如.c1和.c2

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

.sub ul li在哪里。sub li

另外，边界半径现在是标准的，所以你可以抛弃那些-moz和-webkit垃圾

css在.1和.2上是什么？此外，最好更改这些字符的名称，以便在第一个字符中有一个字母，例如.c1和.c2

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

.sub ul li在哪里。sub li

另外，边界半径现在是标准的，所以你可以抛开那些-moz和-webkit的废话

谢谢，我不知道边界半径…关于sub-li，它解决了我的问题，谢谢。谢谢，我不知道边界半径……关于sub-li，这解决了我的问题，谢谢。为答案干杯。 
$(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');
    });     

});