TD_1997 2015-07-19 12:00 采纳率: 33.3%
浏览 10384
已采纳

如何用HTML和CSS编写一个导航下拉菜单，要鼠标经过显示

如题如何用HTML和CSS编写一个导航下拉菜单，要鼠标经过显示，只要一个就行

  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2015-07-19 12:39
    关注

    hover就好了,ie6-不支持，不过也不需要考虑ie6了。。

     <!doctype html>
<style>
    ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;}
    ul.menu li{line-height:25px}
    ul.menu li{float:left;margin-left:10px}
    ul.menu div{display:none;position:absolute;top:20px;left:0px}
    ul.menu div a{display:block}
    ul.menu li:hover div{display:block;}
</style>
<ul class="menu">
    <li><a href="#">Menu1</a><div><a href="#">menu11</a><a href="#">menu12</a></div></li>
    <li><a href="#">Menu2</a><div><a href="#">menu21</a><a href="#">menu22</a></div></li>
    <li><a href="#">Menu3</a><div><a href="#">menu31</a><a href="#">menu32</a></div></li>
</ul>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
    2020-08-28 23:23
    Bootstrap 3.3.7 导航栏下拉菜单鼠标滑过展开效果 ...Bootstrap 3.3.7 导航栏下拉菜单鼠标滑过展开效果是一个非常实用的功能，可以帮助我们快速创建一个美观的下拉菜单，并且可以根据需要进行自定义。
  • css3鼠标悬停导航下拉菜单交替切换特效.zip
    2023-09-23 09:55
    【标题】"CSS3鼠标悬停导航下拉菜单交替切换特效"是网页设计中的一个常见需求，它结合了CSS3的高级特性和jQuery库的交互功能，为用户提供更丰富的用户体验。这种特效通常用于网站的顶部导航菜单，当用户将鼠标悬停在...
  • 如何使用CSS实现一个下拉菜单
    2024-09-10 16:20
    DTcode7的博客 本文将详细介绍如何使用CSS来实现一个基本的下拉菜单，并通过多个示例帮助读者理解和应用这些技术。下拉菜单通常包含两个主要部分：首先，我们需要构建一个基本的下拉菜单结构： 代码解释 ：包含整个导航菜单的标签...
  • jQuery鼠标滑过显示二级下拉菜单代码.zip
    2019-07-11 09:45
    本主题聚焦于使用jQuery库来实现一个鼠标滑过时显示二级下拉菜单的代码实例。jQuery是一个轻量级、功能强大的JavaScript库，它简化了JavaScript的事件处理、动画效果以及Ajax交互，使得创建动态网页变得更加简单。 ...
  • 前端开发实现纯CSS3制作红色下拉导航菜单代码
    2024-04-15 10:49
    一个基础的导航菜单通常由`<ul>`和`<li>`元素组成，每个`<li>`代表一个菜单项，下拉菜单则嵌套在子`<ul>`中。对于三级下拉菜单，我们需要再添加一层嵌套。例如： ```html 菜单1 <li><a href="#">子菜单1</a>...
  • jQuery鼠标经过二级下拉菜单.zip
    2019-07-11 10:30
    在这个“jQuery鼠标经过二级下拉菜单”的示例中，我们将深入探讨如何利用jQuery来创建响应式、动态的二级下拉菜单，提升网站导航的用户体验。 首先，jQuery.1.7.1.js是jQuery的一个版本，它是这个功能实现的核心。...
  • CSS导航条以及简单下拉菜单实现
    2022-03-20 15:07
    白云好懒的博客 css下拉菜单实现
  • vue实现鼠标移过出现下拉二级菜单功能
    2020-10-15 21:13
    可以创建一个包含子菜单的父组件，利用事件和状态管理来控制子菜单的显示和隐藏。当鼠标移过父菜单项时，触发一个事件来更新子菜单的状态，从而显示或隐藏子菜单。同时，可以使用 Vue 的过渡效果来增强用户体验，...
  • jquery下拉竖导航菜单代码
    2024-09-21 20:03
    由于不同的浏览器对CSS和JavaScript的支持程度不同，可能需要编写特定的浏览器兼容性代码或者使用一些polyfill库来确保下拉菜单能够在各种浏览器中正常工作。 使用jQuery来创建一个下拉竖导航菜单是一个涉及HTML...
  • php+jQuery实现的三级导航栏下拉菜单显示效果
    2020-10-19 09:44
    在Web开发中，创建一个具有交互性和用户体验良好的导航栏是至关重要的。本实例通过结合PHP和jQuery，展示了如何实现一个三级导航栏下拉菜单，从而为用户提供更直观的浏览体验。以下是这个实现过程中的关键知识点： ...
  • 没有解决我的问题, 去提问