码迷,mamicode.com
首页 > 其他好文 > 详细

二级菜单导航

时间:2015-05-24 15:26:14      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

通过CSS样式实现二级菜单导航。

首先写好一级栏目和二级栏目的基本内容。

<div class="nav">
<ul>
  <li><a href="#">首页</a>
    <ul>
      <li><a href="#">首页1</a></li>
      <li><a href="#">首页1</a></li>
      <li><a href="#">首页1</a></li>
    </ul>
  </li>
  <li><a href="#">第二页</a>
    <ul>
      <li><a href="#">第二页1</a></li>
      <li><a href="#">第二页1</a></li>
      <li><a href="#">第二页1</a></li>
    </ul>
  </li>
  <li><a href="#">第三页</a>
    <ul>
      <li><a href="#">第三页1</a></li>
      <li><a href="#">第三页1</a></li>
      <li><a href="#">第三页1</a></li>
    </ul>
  </li>
  <li><a href="#">第四页</a>
    <ul>
      <li><a href="#">第四页1</a></li>
      <li><a href="#">第四页1</a></li>
      <li><a href="#">第四页1</a></li>
    </ul>
  </li>
</ul>

</div>

其次设置好样式,

.nav li a{
display: block;
text-align: center;
text-decoration: none;
background-color: gray;
height: 22px;
line-height: 22px;
}
通过display:none对二级栏目进行隐藏,
.nav li ul{
display: none;
}

再设置

.nav li:hover ul{
       display: block;

}实现二级菜单导航

二级菜单导航

标签:

原文地址:http://www.cnblogs.com/wby-blog/p/4525794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!