下拉菜单
Posted hys-blog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉菜单相关的知识,希望对你有一定的参考价值。
比较简陋的下拉菜单;
贴代码:
<style type="text/css"> * {margin: 0;padding: 0;} ul {list-style: none;} li {float: left;width: 140px;margin-right: 10px;} li dt {padding: 5px;text-align: center;border-bottom: 3px solid #b00;background: #ed8;} li dd {border-bottom: 1px solid gray;height: 31px;line-height: 31px;text-align: center;color: #fff;background: #3498db;} dd a {text-decoration: none;color: #fff;} dd {display: none;} li:hover dd {display: block;} dd:hover {background: green;} </style>
<div class="nav"> <ul> <li> <dl> <dt><strong><a href="#">栏目一</a></strong></dt> <dd><a href="#">菜单一</a></dd> <dd><a href="#">菜单二</a></dd> <dd><a href="#">菜单三</a></dd> </dl> </li> <li> <dl> <dt><strong><a href="#">栏目二</a></strong></dt> <dd><a href="#">菜单一</a></dd> <dd><a href="#">菜单二</a></dd> <dd><a href="#">菜单三</a></dd> </dl> </li> </ul> </div>
以上是关于下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章