广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >用CSS实现水平下拉菜单
  • 704

0
分享到

用CSS实现水平下拉菜单

2024-04-02 19:04:59 704人浏览 安东尼
摘要

这篇文章主要介绍“用CSS实现水平下拉菜单”，在日常操作中，相信很多人在用CSS实现水平下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用CSS实现水平下拉菜单”的疑惑

这篇文章主要介绍“用CSS实现水平下拉菜单”，在日常操作中，相信很多人在用CSS实现水平下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用CSS实现水平下拉菜单”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！


代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu - Horizontal</title>
<style type="text/css">
<!--
@import"dhtml-horiz.css";
-->
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
h2 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, Helvetica, sans-serif;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
background: #900;
color: #FFF;
}


ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px;
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul li {
float: none;
display: block !important;
display: inline;
}

ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important;
float: left;
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}

ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
</style>
<script type="text/javascript">
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
</head>
<body>
<h2>CSS Menu - Horizontal</h2>
<hr />
<ul id="navmenu">
<li><a href="#">Blog</a></li>
<li><a href="#">Work +</a>
<ul>
<li><a href="#">WEBsites +</a>
<ul>
<li><a href="#">qrayg</a></li>
<li><a href="#">qArcade</a></li>
<li><a href="#">qLoM</a></li>
<li><a href="#">qDT</a></li>
</ul>
</li>
<li><a href="#">Pen and Ink</a></li>
<li><a href="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#">Learn +</a>
<ul>
<li><a href="#">Fireworks +</a>
<ul>
<li><a href="#">aquaButton</a></li>
<li><a href="#">aquaButton2</a></li>
<li><a href="#">waterDrop</a></li>
<li><a href="#">lightFX</a></li>
<li><a href="#">lightFX2</a></li>
</ul>
</li>
<li><a href="#">CSS +</a>
<ul>
<li><a href="#">footerStick</a></li>
<li><a href="#">spriteNav</a></li>
<li><a href="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

到此，关于“用CSS实现水平下拉菜单”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 用CSS实现水平下拉菜单

本文链接: https://www.lsjlt.com/news/77348.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 用CSS实现水平下拉菜单
    这篇文章主要介绍“用CSS实现水平下拉菜单”，在日常操作中，相信很多人在用CSS实现水平下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用CSS实现水平下拉菜单”的疑惑...
    99+
    2022-10-19
  • css怎样实现下拉菜单
    这篇文章将为大家详细讲解有关css怎样实现下拉菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　<!DOCTYPEhtml> 　　<html&...
    99+
    2022-10-19
  • css如何实现下拉菜单
    这篇文章主要为大家展示了“css如何实现下拉菜单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何实现下拉菜单”这篇文章吧。 　　HTML代码： 　　...
    99+
    2022-10-19
  • css怎么实现下拉菜单
    这篇文章主要介绍css怎么实现下拉菜单，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！css的全称是什么css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样...
    99+
    2023-06-14
  • 纯CSS怎么实现下拉菜单
    这篇文章将为大家详细讲解有关纯CSS怎么实现下拉菜单，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体如下：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。设置下拉菜单的高度添加过渡效果，高度为auto...
    99+
    2023-06-08
  • HTML+CSS如何实现下拉菜单
    小编给大家分享一下HTML+CSS如何实现下拉菜单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！1.下拉列表实例代码如下：<!doctype html><html><head>...
    99+
    2023-06-08
  • 怎么用css实现下拉菜单功能
    这篇文章主要讲解了“怎么用css实现下拉菜单功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用css实现下拉菜单功能”吧！ ...
    99+
    2022-10-19
  • 怎么用CSS实现4级下拉菜单
    这篇文章主要介绍“怎么用CSS实现4级下拉菜单”，在日常操作中，相信很多人在怎么用CSS实现4级下拉菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现4级下拉...
    99+
    2022-10-19
  • HTML+CSS+JavaScript实现下拉菜单效果
    本文实例为大家分享了HTML+CSS+JavaScript实现下拉菜单效果的具体代码，供大家参考，具体内容如下 实现思路： HTML 方面，导航栏的每个 <li> 元素里...
    99+
    2022-11-13
  • 纯CSS怎么实现大型下拉菜单
    小编给大家分享一下纯CSS怎么实现大型下拉菜单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！HTML结构该大型菜单的HTML结构如下：<nav>&nb...
    99+
    2023-06-08
  • 怎么用DIV+CSS实现绿色水平一级菜单
    这篇文章主要介绍“怎么用DIV+CSS实现绿色水平一级菜单”，在日常操作中，相信很多人在怎么用DIV+CSS实现绿色水平一级菜单问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2022-10-19
  • CSS导航栏和CSS下拉菜单怎么实现
    这篇文章主要介绍“CSS导航栏和CSS下拉菜单怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS导航栏和CSS下拉菜单怎么实现”文章能帮助大家解决问题。导...
    99+
    2022-10-19
  • HTML+CSS如何实现简单下拉菜单效果
    小编给大家分享一下HTML+CSS如何实现简单下拉菜单效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用Html+css实现简单的下拉菜单代码非常简单，需要的...
    99+
    2023-06-08
  • 怎么用CSS实现三级下拉菜单效果
    这篇文章主要介绍“怎么用CSS实现三级下拉菜单效果”，在日常操作中，相信很多人在怎么用CSS实现三级下拉菜单效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS实现...
    99+
    2022-10-19
  • 怎么用CSS实现二级下拉导航菜单
    这篇文章主要讲解了“怎么用CSS实现二级下拉导航菜单”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现二级下拉导航菜单”吧！这是一款纯CSS菜单...
    99+
    2022-10-19
  • CSS怎么实现灰色下拉菜单效果
    本篇内容介绍了“CSS怎么实现灰色下拉菜单效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！这是一款基于C...
    99+
    2022-10-19
  • js实现下拉菜单栏
    下面是一个基本的JavaScript实现下拉菜单栏的示例：HTML代码：```html菜单选项1选项2选项3```JavaScrip...
    99+
    2023-09-15
    JS
  • 使用jquery 简单实现下拉菜单
    可以通过以下方式使用 jQuery 实现简单的下拉菜单：首先，需要在 HTML 文件中引入 jQuery 库和一个 CSS 文件来定...
    99+
    2023-08-17
    jQuery
  • 利用CSS实现多级下拉横向导航菜单
    本篇内容主要讲解“利用CSS实现多级下拉横向导航菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“利用CSS实现多级下拉横向导航菜单”吧!本文实例为大家分享了纯...
    99+
    2022-10-19
  • 怎么使用HTML+CSS+JavaScript实现下拉菜单效果
    今天小编给大家分享一下怎么使用HTML+CSS+JavaScript实现下拉菜单效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一...
    99+
    2023-07-02
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作