超简洁CSS抽屉式下拉菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是超简洁CSS抽屉式下拉菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为超简洁CSS抽屉式下拉菜单代码，属于站长常用代码" />
<title>超简洁CSS抽屉式下拉菜单代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<h1>超简洁CSS抽屉式下拉菜单代码</h1>
<nav class="nav">
  <ul class="nav_menu">
    <li class="nav_menu-item"><a href="#" target="_blank">Home</a></li>
    <li class="nav_menu-item"><a href="#" target="_blank">Services</a>
      <ul class="nav_submenu">
        <li class="nav_submenu-item"> <a href="#" target="_blank">Web Design</a></li>
        <li class="nav_submenu-item"> <a href="#" target="_blank">Web Development</a></li>
        <li class="nav_submenu-item"> <a href="#" target="_blank">Web Hosting</a></li>
      </ul>
    </li>
    <li class="nav_menu-item"><a href="#" target="_blank">About</a>
      <ul class="nav_submenu">
        <li class="nav_submenu-item"> <a href="#" target="_blank">Our Company</a></li>
        <li class="nav_submenu-item"> <a href="#" target="_blank">Our Xixi</a></li>
        <li class="nav_submenu-item"> <a href="#" target="_blank">Our Reach</a></li>
      </ul>
    </li>
    <li class="nav_menu-item"><a href="#" target="_blank">Blog</a></li>
    <li class="nav_menu-item"><a href="#" target="_blank">Contact</a></li>
  </ul>
</nav>
</body>
</html>

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
html{-moz-box-sizing:border-box;box-sizing:border-box;}
a,a:hover{color:#FFF;text-decoration:none}
*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box;}
body{margin:0;font-family:'Open Sans',sans-serif;font-size:16px;line-height:1.5;background:#27ae60;}
nav ul{list-style:none;padding-left:0;margin-top:0;margin-bottom:0;}
h1{width:500px;margin:100px auto 20px;color:#f0f0f0;text-align:center;}
.nav{width:500px;margin:0 auto;background:#1e8449;color:#f0f0f0;}
.nav a{display:block;padding:0 16px;line-height:inherit;cursor:pointer;}
.nav_menu{line-height:45px;font-weight:700;text-transform:uppercase;}
.nav_menu-item{display:inline-block;position:relative;}
.nav_menu-item:hover{background-color:#9b59b6;}
.nav_menu-item:hover .nav_submenu{display:block;}
.nav_submenu{font-weight:300;text-transform:none;display:none;position:absolute;width:220px;background-color:#9b59b6;}
.nav_submenu-item:hover{background:rgba(0,0,0,0.1);}

附件:下载该文件资源,减少时间成本(增值服务)