jquery - 样式菜单没有滑动

Question

我正在尝试制作这个 style meny

我正在使用这个 guide制作 html 文件 - 只需将其制作在一个文件中

问题是它不是幻灯片。

Html 代码 - 我不知道 html 代码有错误:

<ul>
        <li class="green" id="dropper">
            <p><a href="#">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow" id="dropper">
            <p><a href="#">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red" id="dropper">
            <p><a href="#">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue" id="dropper">
            <p><a href="#">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple" id="dropper">
            <p><a href="#">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>

Jquery 代码 - 问题可能出在这里:

    $(document).ready(function(){
        //Remove outline from links
        $("a").click(function(){
            $(this).blur();
        });

        //When mouse rolls over
        $("#dropper").mouseover(function(){
            $(this).stop().animate({height:'300px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

        //When mouse is removed
        $("#dropper").mouseout(function(){
            $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

CSS 代码 - 问题可能出在这里:

       body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

ul{
    margin:0;
    padding:0;
}

li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

    .subtext{
        padding-top:15px;
    }

/*Menu Color Classes*/
.green{background:#6AA63B url('http://buildinternet.com/live/smoothmenu/images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://buildinternet.com/live/smoothmenu/images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://buildinternet.com/live/smoothmenu/images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://buildinternet.com/live/smoothmenu/images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://buildinternet.com/live/smoothmenu/images/blue-item-bg.jpg') top left no-repeat;}

Answer 1

你必须删除相同的id(id是一个唯一值)，就像Kuro说的

但另一个错误是缺少“});”输入结束。

这部分代码是您可以删除并添加一些 CSS(如 border:0;)的东西

$("a").click(function(){
    $(this).blur();
});

您正在使用 Hosting24，他们在所有页面中创建了一个脚本...
要删除它，请查看此问题 Webhoster inserts a javascript which brokes my code how to remove it?
希望对您有所帮助。