css下拉级联菜单

quanzhankaifa

温馨提示:这篇文章已超过78天没有更新,请注意相关的内容是否还可用!

css下拉级联菜单

CSS下拉级联菜单是一种常见的网页导航菜单样式,它可以让用户通过鼠标悬停或点击菜单项,展开或收起子菜单。这种菜单通常由一个主菜单和若干个子菜单组成,子菜单在主菜单的下方或右侧以垂直或水平的方式展开。

下面是一个简单的CSS下拉级联菜单的示例代码:

<!DOCTYPE html>

<html>

<head>

<style>

/* 设置菜单样式 */

ul.menu {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

}

/* 设置主菜单项样式 */

ul.menu li {

position: relative;

cursor: pointer;

}

/* 设置子菜单样式 */

ul.menu ul {

display: none; /* 默认隐藏子菜单 */

position: absolute;

top: 0;

left: 100%;

width: 200px;

background-color: #ddd;

}

/* 鼠标悬停或点击主菜单项时显示子菜单 */

ul.menu li:hover ul,

ul.menu li:focus-within ul {

display: block;

}

/* 设置菜单项样式 */

ul.menu li a {

display: block;

padding: 10px;

text-decoration: none;

color: #333;

}

/* 设置子菜单项样式 */

ul.menu ul li {

border-bottom: 1px solid #ccc;

}

/* 设置最后一个子菜单项样式 */

ul.menu ul li:last-child {

border-bottom: none;

}

</style>

</head>

<body>

<ul class="9669-d82e-7e83-6e9d menu">

<li>

<a href="#">主菜单1</a>

<ul>

<li><a href="#">子菜单1</a></li>

<li><a href="#">子菜单2</a></li>

<li><a href="#">子菜单3</a></li>

</ul>

</li>

<li>

<a href="#">主菜单2</a>

<ul>

<li><a href="#">子菜单4</a></li>

<li><a href="#">子菜单5</a></li>

<li><a href="#">子菜单6</a></li>

</ul>

</li>

<li>

<a href="#">主菜单3</a>

<ul>

<li><a href="#">子菜单7</a></li>

<li><a href="#">子菜单8</a></li>

<li><a href="#">子菜单9</a></li>

</ul>

</li>

</ul>

</body>

</html>

在上面的示例代码中,我们首先创建了一个无序列表(ul)作为菜单的容器,并为其添加了一个类名为"menu"的样式。然后,每个主菜单项都是一个列表项(li),主菜单项中包含一个链接(a)作为菜单的文本内容。

接下来,我们为主菜单项设置了一个相对定位(position: relative),以便子菜单可以相对于主菜单项进行绝对定位。子菜单是通过一个嵌套的无序列表(ul)来实现的,并且默认是隐藏的(display: none)。

当鼠标悬停或点击主菜单项时,我们使用:hover伪类和:focus-within伪类来显示子菜单(display: block)。这样,当用户与主菜单项进行交互时,子菜单就会展开。

我们还设置了一些其他的样式,如菜单的背景颜色、菜单项的边框样式等,以增强菜单的外观和可读性。

通过以上的示例代码,我们可以实现一个简单的CSS下拉级联菜单。你可以根据自己的需求,进一步扩展和定制菜单的样式和功能,例如添加动画效果、调整菜单的布局等。还可以结合JavaScript等技术,实现更复杂的交互效果,如菜单的动态加载、搜索功能等。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码