css导航栏两个子菜单同时出现

在设计网站中，导航栏是非常重要的一部分，而CSS作为样式设计的重要工具之一，可以使我们的导航栏更加美观、实用。在开发中有时候我们需要实现导航栏中同时出现两个子菜单的效果，下面我们来看看如何实现。

.nav{
    position: relative;
    display: inline-block;
}
.submenu{
    display: none;
    position: absolute;
    width: 200px;
    top: 30px;
    left: 0;
}
.nav:hover .submenu{
    display: block;
}

.submenu-two{
    display: none;
    position: absolute;
    width: 200px;
    top: 30px;
    left: 200px;
}
.nav:hover .submenu-two{
    display: block;
}

以上代码中，我们首先为导航栏添加了一个相对定位的属性，同时为子菜单添加了绝对定位的属性，使其可以相对于导航栏位置进行定位。然后我们通过display: none;隐藏了两个子菜单，当鼠标移动到导航栏上时，通过display: block;使其显示。

需要注意的是，在实现两个子菜单同时出现时，我们需要为两个子菜单分别指定不同的定位属性，这里我们使用left属性来指定子菜单的水平位置，使其相隔一段距离，从而可以同时出现。

在开发中，我们还可以根据具体需求对子菜单进行其他样式设计，比如设置背景颜色、字体大小等等，从而使导航栏更加美观、实用。