Jquery 样式菜单没有'；t形滑梯

我正在努力做到这一点

我用这个来制作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>

CSS代码-问题可能在这里：

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

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

---

您必须删除相同的id（id是唯一的值），就像Kuro所说的

---

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

这部分代码可以通过添加一些CSS（如border:0；）删除

您正在使用Hosting24，他们会在所有页面中创建脚本…
要删除它，请看这个问题

---

希望这对您有所帮助。

“但另一个错误是缺少一个”}）；“输入结束。”我在这里输入的内容有错误-忘记输入这个}）；我是否应该删除$（“a”）。单击（function（）{$（this.blur（）；}）@用户1515823

blur

部分不相关@Guilherme只是指出，你可以用CSS来代替。我建议您暂时保留它。删除您的animation@Guilherme说真的，这真的不是问题所在。我试图保存你的页面，在我看来，你的底部有一个脚本返回了一个错误，尝试删除它-大家好，我像他一样找到了来源（css文件和查询文件链接到那里的网站）这段代码很有效！你能不能让我的代码在没有从其他页面获取脚本的情况下工作，包括jquery代码和css，并且可以工作？

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