首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

嵌套列表下拉菜单HTML和CSS

嵌套列表下拉菜单是一种常见的网页导航菜单形式,通过HTML和CSS实现。它通常由一个主菜单和若干子菜单组成,当鼠标悬停或点击主菜单时,对应的子菜单会展开或收起。

HTML部分:

代码语言:txt
复制
<ul class="menu">
  <li>
    <a href="#">主菜单1</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="#">主菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
    </ul>
  </li>
  <li><a href="#">主菜单3</a></li>
</ul>

CSS部分:

代码语言:txt
复制
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

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

.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 0;
  margin: 0;
}

.menu li:hover .submenu {
  display: block;
}

.menu .submenu li {
  width: 200px;
}

.menu .submenu a {
  background-color: #fff;
  color: #333;
}

.menu .submenu a:hover {
  background-color: #f0f0f0;
}

以上代码实现了一个简单的嵌套列表下拉菜单。主菜单使用<ul><li>标签表示,子菜单使用嵌套的<ul><li>标签表示。通过CSS设置菜单的样式,其中.submenu类控制子菜单的显示和隐藏。

这种嵌套列表下拉菜单适用于网站的导航菜单,可以提供清晰的导航结构,使用户能够方便地浏览和访问网站的各个页面。

腾讯云提供的相关产品和产品介绍链接地址如下:

以上是关于嵌套列表下拉菜单HTML和CSS的完善且全面的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

5分48秒

01-html&CSS/14-尚硅谷-HTML和CSS-无序列表

19分17秒

37.尚硅谷_HTML&CSS基础_无序列表和有序列表.avi

45秒

01-html&CSS/05-尚硅谷-HTML和CSS-HTML简介

1分18秒

01-html&CSS/23-尚硅谷-HTML和CSS-CSS介绍

4分30秒

01-html&CSS/06-尚硅谷-HTML和CSS-创建HTML页面

2分23秒

01-html&CSS/24-尚硅谷-HTML和CSS-CSS语法介绍

6分53秒

01-html&CSS/32-尚硅谷-HTML和CSS-css常用样式

6分1秒

01-html&CSS/07-尚硅谷-HTML和CSS-html的书写规范

7分9秒

01-html&CSS/08-尚硅谷-HTML和CSS-HTML标签的介绍

5分0秒

01-html&CSS/09-尚硅谷-HTML和CSS-HTML标签的语法

1分36秒

01-html&CSS/01-尚硅谷-HTML和CSS-引课

5分1秒

01-html&CSS/10-尚硅谷-HTML和CSS-font标签

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券