[分享]css下拉二级横向菜单

CSS下拉二级横向菜单可以让网页菜单更加美观和实用。在这篇文章中，我们将学习如何使用CSS创建一个简单的下拉二级横向菜单。 一级菜单1 二级菜单1 二级菜单2 一级菜单2 二级菜单3 二级...

CSS下拉二级横向菜单可以让网页菜单更加美观和实用。在这篇文章中，我们将学习如何使用CSS创建一个简单的下拉二级横向菜单。

<nav>
   <ul>
      <li><a href="#">一级菜单1</a>
         <ul>
            <li><a href="#">二级菜单1</a></li>
            <li><a href="#">二级菜单2</a></li>
         </ul>
      </li>
      <li><a href="#">一级菜单2</a>
         <ul>
            <li><a href="#">二级菜单3</a></li>
            <li><a href="#">二级菜单4</a></li>
         </ul>
      </li>
   </ul>
</nav> 

在这个代码段中，我们创建了一个nav元素和一个包含两个li元素的ul元素。每个li元素都有一个包含一级菜单名称的a元素和一个包含二级菜单的ul元素。每个二级菜单由一个或多个包含菜单名称的li元素组成。

为了正确显示和定位菜单，我们需要添加一些CSS。

nav ul {
   list-style:none;
   padding:0;
   margin:0;
}

nav li {
   float:left;
   position:relative;
}

nav ul ul {
   position:absolute;
   top:100%;
   left:0;
   display:none;
}

nav ul li:hover > ul {
   display:block;
}

nav li a {
   display:block;
   padding:10px;
   text-decoration:none;
   color:#000;
   background:#fff;
}

nav ul ul li a {
   background:#f0f0f0;
   color:#000;
   width:200px;
   border-bottom:1px solid #ccc;
}

nav ul ul li:last-child a {
   border-bottom:none;
} 

这些CSS规则逐步说明：

• list-style：none;，padding：0，margin：0使li元素的内容不出现不必要的间距和列表样式。
• float：left;和position：relative;创建浮动元素和相对定位，使我们能够将菜单和下拉菜单放在一起。
• position：absolute; top：100%; left：0;和display：none;属性将下拉菜单从常规流中删除并将其放置在其父元素下方。
• nav ul li:hover > ul { display:block; }，当鼠标悬停在以li元素表示的一级菜单上时，我们通过设置下拉菜单的显示属性来显示二级菜单。
• nav li a { display:block; padding:10px; text-decoration:none; color:#000; background:#fff; }和nav ul ul li a { background:#f0f0f0; color:#000; width:200px; border-bottom:1px solid #ccc; }，用于设置菜单和二级菜单的样式。

现在，我们已经创建了一个简单的CSS下拉二级横向菜单。尝试在实际项目中使用它，并根据需要进行调整和自定义。