html 右侧二级菜单代码
导读：右侧二级菜单示例/* 定义二级菜单样式 */.submenu {display: none; /* 默认隐藏 */position: absolute;top: 0;left: 100%;background-color: #f1f1f1;...
右侧二级菜单示例/* 定义二级菜单样式 */.submenu {
display: none;
/* 默认隐藏 */position: absolute;
top: 0;
left: 100%;
background-color: #f1f1f1;
min-width: 100px;
max-width: 200px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.submenu a {
color: black;
padding: 8px;
text-decoration: none;
display: block;
}
.submenu a:hover {
background-color: #ddd;
}
/* 定义鼠标悬浮样式 */.menu a:hover + .submenu,.menu .submenu:hover {
display: block;
}
以下是一个示例的右侧二级菜单代码：
ul class="menu">
li>
a href="#">
菜单1/a>
/li>
li>
a href="#">
菜单2/a>
ul class="submenu">
li>
a href="#">
子菜单1/a>
/li>
li>
a href="#">
子菜单2/a>
/li>
li>
a href="#">
子菜单3/a>
/li>
/ul>
/li>
li>
a href="#">
菜单3/a>
/li>
/ul>
以上代码中，“menu”类定义了一级菜单，其中“submenu”类定义了二级菜单，通过鼠标悬浮事件控制显示和隐藏。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html 右侧二级菜单代码
本文地址： https://pptw.com/jishu/304875.html