css样式：
<style>
* {
margin: 0;
padding: 0;
}
.s {
width: 100%;
height: 70px;
background-color: navy;
position: relative;
}
.t {
width: 300px;
height: 70px;
margin-left: 100px;
line-height: 70px;
text-align: center;
color: white;
font-size: 24px;
position: relative;
float: left;
}
.m {
width: 120px;
height: 70px;
margin-left: 100px;
line-height: 70px;
text-align: center;
color: white;
font-size: 17px;
position: relative;
float: left;
}
.m:hover {
color: lawngreen;
}
.d {
color: white;
background-color: gray;
list-style-type: none;
line-height: 40px;
width: 120px;
display: none;
}
.d li:hover {
color: lawngreen;
}
</style>
html代码：
<body style="font-family: 微软雅黑;">
<form id="form1" runat="server">
<div class="s" id="main">
<div class="t">井下束管监测系统</div>
<div class="m">
监测监控页
<ul class="d">
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
<div class="m">
用户管理
<ul class="d">
<li>长虹电视</li>
<li>联想电脑</li>
<li>苹果手机</li>
<li>海尔冰箱</li>
</ul>
</div>
<div class="m">
数据查询
<ul class="d">
<li>可口可乐</li>
<li>美年达</li>
</ul>
</div>
<div class="m">
系统设置
<ul class="d">
<li>篮球</li>
<li>足球</li>
<li>排球</li>
</ul>
</div>
<div class="m">
帮助
<ul class="d">
<li>轿车</li>
<li>吉普车</li>
<li>卡车</li>
<li>自行车</li>
<li>电动车</li>
</ul>
</div>
</div>
</form>
</body>
</html>
js代码：
<script>
$(‘#main .m‘).hover(function () { $(this).children(‘ul‘).show(); }, function () { $(this).children(‘ul‘).hide(); });
</script>
时间： 2024-11-08 02:50:12