Css实现---导航菜单

CSS下拉菜单实现

最新推荐文章于 2025-06-11 08:54:45 发布

最新推荐文章于 2025-06-11 08:54:45 发布 · 103 阅读

文章标签：

#CSS #浏览器 #XHTML

本文介绍了一种使用纯CSS实现的下拉菜单效果。通过浮动和绝对定位等属性，使得主菜单项在鼠标悬停时能够正确显示子菜单。同时，通过:hover伪类实现了菜单项的交互效果。

<style type="text/css">
*{margin:0;padding:0;}
.menu{
     font-size:18px;
     position:relative;
     z-index:100;
     }
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {
          visibility:hidden;
          position:absolute;
          left:3px;top:23px;
          }

.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;/*显示*/}
.menu ul ul{}
.menu ul ul li {
             clear:both;
             text-align:left;
              font-size:12px;
           }
.menu ul ul li a{
     display:blulock;
     width:100px;
     height:15px;
     margin:0;
     border:0;
     border-bottom:1px solid #858685;
     }
.menu ul ul li a:hover{
       border:0;
       background:#fafafa;
       border-bottom:1px solid #fff;}
.menu a{
     display:block;
     border:1px solid #aaa;
     background:#3f3f3f;
     padding:2px 10px;
     margin:3px;
     color:#fff;
     text-decoration:none;}
.menu a:hover{
        background:#fafafa;
        color:#000;
        border:1px solid #000;}
.menu table {position:absolute; top:0; left:0;}
</style>


<div class="menu">
          <ul>
              <li><a href="#">XHTML/CSS
                  <ul>
                      <li><a href="#">标准</a></li>
                      <li><a href="#">教程</a></li>
                      <li><a href="#">技术文章</a></li>
                      <li><a href="#">常见问题</a></li>
                      <li><a href="#">布局教程专题</a></li>
                      <li><a href="#">CSS菜单</a></li>
                      <li><a href="#">浏览器兼容</a></li>
                      <li><a href="#">滚动条相关</a></li>
                      <li><a href="#">圆角矩形专题</a></li>
                      <li><a href="#">CSS特效欣赏专题</a></li>
                  </ul>
                </li>

               <li><a href="#">XHTML/CSS
                  <ul>
                      <li><a href="#">标准</a></li>
                      <li><a href="#">教程</a></li>
                      <li><a href="#">技术文章</a></li>
                      <li><a href="#">常见问题</a></li>
                      <li><a href="#">布局教程专题</a></li>
                      <li><a href="#">CSS菜单</a></li>
                      <li><a href="#">浏览器兼容</a></li>
                      <li><a href="#">滚动条相关</a></li>
                      <li><a href="#">圆角矩形专题</a></li>
                      <li><a href="#">CSS特效欣赏专题</a></li>
                  </ul>
                </li>
          </ul>
</div>