[分享]css两级导航菜单

CSS两级导航菜单是网站开发中常见的一种菜单形式，通常用于对网站的页面进行分类和展示。以下将介绍如何使用CSS来制作两级导航菜单。首先，我们需要在HTML中创建菜单的结构。一个基本的两级导航菜单可以表...

CSS两级导航菜单是网站开发中常见的一种菜单形式，通常用于对网站的页面进行分类和展示。以下将介绍如何使用CSS来制作两级导航菜单。

首先，我们需要在HTML中创建菜单的结构。一个基本的两级导航菜单可以表示为以下代码：

<ul class="menu">
    <li class="menu-item"><a href="#">首页</a></li>
    <li class="menu-item has-dropdown">
        <a href="#">产品</a>
        <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">产品 1</a></li>
            <li class="dropdown-item"><a href="#">产品 2</a></li>
            <li class="dropdown-item"><a href="#">产品 3</a></li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">联系我们</a></li>
</ul> 

上述代码中，我们使用ul和li标签来创建菜单的结构，并使用class属性来为菜单项和下拉菜单添加样式。其中，“has-dropdown”类用于表示带有下拉菜单的菜单项。

接下来，我们使用CSS来为菜单添加样式，具体样式如下：

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: inline-block;
    margin-right: 20px;
}

.menu-item a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.has-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    display: none;
}

.dropdown-item a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.has-dropdown:hover .dropdown-menu {
    display: block;
} 

上述代码中，我们为菜单项和下拉菜单添加样式。其中，“has-dropdown”类使用position属性为其子元素下拉菜单创建一个相对定位的容器，“dropdown-menu”类使用absolute属性为下拉菜单创建一个绝对定位的容器，并使用display属性控制下拉菜单的显示状态。

接着，我们使用:hover伪类来控制鼠标悬停时下拉菜单的显示状态。

综上所述，参考以上代码，您就可以轻松地制作一个漂亮的CSS两级导航菜单了。