菜单样式2：css实现下拉菜单

CSS文件：

.header{ width:100%; height:68px; background: url(./images/top_bg.png) center center repeat-x;}

.header_content{ width:1000px; height:68px; margin:0 auto; position:relative; }

.logo{ width:340px; height:46px; background: url(./images/top_logo.png) no-repeat; float:left; margin-top:12px;}

#nav { margin-left:100px; margin-top:15px; display:inline; float:left; }

#nav, #nav ul { list-style-position: outside; position: relative; z-index: 5; }

#nav a { height:40px; display:block; padding:0 10px; text-decoration: none; text-align: center; line-height:40px; color:#fff; outline: none; z-index: 35; position: relative; }

#nav li { width:90px; height:40px; font: 200 16px/40px Microsoft YaHei; color:#fff; text-align:center; display:inline; float:left; position: relative; z-index: 20; }

#nav li li { border-left: none; margin-top: 0; }

#nav ul { position: absolute; display: none; width: 170px; top:40px; left: -1px; }

#nav li ul a { width: 130px; height: auto; float: left; text-align: left; padding: 0 20px; }

#nav ul ul { top: auto; border-top: none; }

#nav li ul ul { left: 170px; top: 0px; }

#nav li.chooseA { background:#46b1f8;}

#nav li:hover { background:#46b1f8; color:#fff; }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; }

/*naviagation*/

#nav ul { padding-bottom:2px; border: 1px solid #DFDFDF; border-top: none; box-shadow:1px 1px 3px #ccc; }

#nav li ul a { border-bottom: 1px solid #fff; border-top: 1px solid #DFDFDF; color:#555; }

#nav ul a, #nav ul li { background-color: #f5f5f5; }

#nav li a.havsub { background:#f5f5f5 url(./images/icon_arrow.gif) no-repeat right center; }

#nav ul a:hover, #nav ul a:focus { background-color:#fff; color:#f30; }

#nav .current_page_parent .current_page_item a, #nav .current_page_item ul a { border-right: 1px solid #f5f5f5; border-left: none; background-image: none; color: #444; }

HTML内容：

<div class="header">

  <div class="header_content">

    <div class="logo"></div>

    <ul id="nav">

      <li class="chooseA"><a href="sharepage_chart2.html">资源目录</a></li>

      <li><a href="#">信息共享</a> </li>

      <li><a href="sharepage_sharecontrol.html">共享监控</a></li>

      <li><a href="#" _t_nav="xxcx">信息查询</a>

        <ul class="children">

          <li class="page_item"><a href="#">二级导航1</a></li>

          <li class="page_item"><a href="#" class="havsub">二级导航2</a>

            <ul class="children">

              <li class="page_item"><a href="#">三级导航1</a></li>

              <li class="page_item"><a href="#">三级导航2</a></li>

            </ul>

          </li>

          <li class="page_item"><a href="#">二级导航3</a></li>

          <li class="page_item"><a href="#">二级导航4</a></li>

        </ul>

      </li>

      <li><a href="#">日志查询</a></li>

    </ul>

    <div class="more"><span><a href="#">Admin</a>丨<a href="../Login.html">退出</a></span></div>

  </div>

</div>

来自为知笔记(Wiz)

附件列表

• icon_arrow.gif
• top_bg.png
• top_logo.png