导航的制作,标题有菜单展开
Posted 游称
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航的制作,标题有菜单展开相关的知识，希望对你有一定的参考价值。
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>
以上是关于导航的制作,标题有菜单展开的主要内容，如果未能解决你的问题，请参考以下文章