下拉菜单
2020-04-06 本文已影响0人
Tn299
<title>无标题文档</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
.nav{
background-color:#EEEEEE;
height:30px;
width:460px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:30px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:30px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color:white;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</style>
<script type="text/jscript" src="../jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
});
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li class="navmenu">
<a href="#">家用电器</a>
<ul>
<li><a href="#">大家电</a></li>
<li><a href="#">生活电器</a></li>
<li><a href="#">五金套装</a></li>
<li><a href="#">厨房小电</a></li>
<li><a href="#">个护健康</a></li>
</ul>
</li>
<li class="navmenu">
<a href="#">运动户外</a>
<ul>
<li><a href="#">运动鞋包</a></li>
<li><a href="#">户外装备</a></li>
<li><a href="#" onClick="alert('运动服饰大甩卖了啊')">运动服饰</a></li>
<li><a href="#">体育用品</a></li>
<li><a href="#">垂钓用品</a></li>
<li><a href="#">健身训练</a></li>
</ul>
</li>
<li class="navmenu">
<a href="#">食品生鲜</a>
<ul>
<li><a href="#">中外名酒</a></li>
<li><a href="#">休闲食品</a></li>
<li><a href="#">进口食品</a></li>
<li><a href="#">地方特产</a></li>
<li><a href="#">饮料冲调</a></li>
<li><a href="#">粮油调味</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
效果图
image.png
内容改改就行
