<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script src=></script>
<style type="text/css">
li{
outline: none;
list-style: none;
}
#nav1{
width: 400px;
height: 60px;
border:1px solid white;
align-content: center;
}
*{
margin:0px;
padding:0px;
}
li,p{
background:#ccc;
margin-left:5px;
float:left;
width: 100px;
height: 40px;
}
p{
background:none;
margin:0px;
}
.blue{
background:blue;
}
.red{
background:red;
}
</style>
</head>
<body>
<nav>
<ul id="nav1">
<li>
<p>
你吃啥
</p>
<ul>
<li>红烧茄子1</li>
<li>小酥肉</li>
<li>麻辣香姑</li>
</ul>
</li>
<li>
<p>
你喝啥
</p>
<ul>
<li>红酒1</li>
<li>香槟2</li>
</ul>
</li>
<li>
<p>
星期天怎么安排
</p>
<ul>
<li>睡觉+1</li>
<li>睡觉+2</li>
<li>睡觉+3</li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(function(){
$("#nav1>li ul").hide();
$("li").hover(
function(){
$(this).addClass("red");
},
function(){
$(this).removeClass("red");
});
$("#nav1>li").hover(
function(){
$(this).children("ul").show();
},
function(){
$(this).children("ul").hide();
});
})
</script>
加粗样式
1491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
