当前位置 CSS模版园 >> 酷炫特效 >> CSS3超简洁抽屉式下拉菜单

CSS3超简洁抽屉式下拉菜单

CSS3超简洁抽屉式下拉菜单

采用html5的header标签和nav标签,加上css3实现超简单的抽屉式下拉菜单


CSS

body{ font-family: arial, "microsoft yahei", "宋体", sans-serif;background: #eee;color: #444}
nav ul{list-style: none; padding-left: 0; margin-top: 0; margin-bottom: 0;}
a,a:hover{color:#f2f2f2;text-decoration:none}
header{display: block;width: 100%;height: 45px; background: #008C00;border-bottom: 3px solid #ccc;}
.nav{width:985px; margin: 0 auto;color: #f0f0f0;margin: 0 auto;}
.nav a{display: block; padding: 0 16px; line-height: inherit; cursor: pointer;  text-shadow: 0 1px 0px #222;}
.nav .logo{ float: left;width: 150px}
.nav .menu{line-height: 45px;text-transform: uppercase;}
.nav .menu li{display: inline-block; position: relative;}
.nav .menu li:hover{background-color: #006400;}
.nav .menu li:hover .menu_child{display: block;}
.nav .menu .menu_child{font-weight: 300; text-transform: none; display: none; position: absolute; width: 220px; background-color: #006400;}
.nav .menu .menu_child li{display:block}
.nav .menu .menu_child li:hover{background: rgba(0, 0, 0, 0.1);}
.nav a.sel{color:#e1ef04}

html:

<header>
  <nav class="nav">
    <div class="logo"><img src="http://www.cssteach.com/statics/me/images/logo.png" /></div>
    <ul class="menu">
      <li><a href="http://www.cssteach.com/" target="_blank">首页</a></li>
      <li> <a href="http://www.cssteach.com/list-6-1.html" target="_blank">模版</a>
        <ul class="menu_child">
          <li> <a href="http://www.cssteach.com/list-7-1.html" target="_blank">HTML模版</a></li>
        </ul>
      </li>
      <li> <a href="http://www.cssteach.com/list-8-1.html" target="_blank">网站制作</a>
        <ul class="menu_child">
          <li> <a href="http://www.cssteach.com/list-9-1.html" target="_blank">HTML</a></li>
          <li> <a href="http://www.cssteach.com/list-10-1.html" class="sel" target="_blank">JS</a></li>
          <li> <a href="http://www.cssteach.com/list-12-1.html" target="_blank">DIV+CSS</a></li>
        </ul>
      </li>
      <li><a href="http://www.cssteach.com/list-13-1.html" target="_blank" class="sel">酷炫特效</a></li>
    </ul>
  </nav>
</header>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-50.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)