目录
回复讨论(解决方案)
首页 web前端 html教程 网站现有二级菜单,怎么用CSS在二级菜单下显示三级菜单。求好心人帮忙。_html/css_WEB-ITnose

网站现有二级菜单,怎么用CSS在二级菜单下显示三级菜单。求好心人帮忙。_html/css_WEB-ITnose

Jun 24, 2016 pm 12:02 PM
二级 显示 菜单

HTML码如下:

<!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>Miyo Industrial Co.,Ltd - deepne web design</title><link href="css/dee_gray.css" rel="stylesheet" type="text/css" /></head><body><div id="header"><div class="w">  <div class="nav">						<ul class="nav-ul">					<li class="nav-item">						<a class="nav-item-a  on  "							href="/yzjEnglish/index.jhtml">Home</a>					</li>					<li class="nav-item">						<a class="nav-item-a  "							href="/ProductDisplay/index.jhtml">Product display</a> 								<ul class="sub-nav">									<li class="sub-nav-item">										<a href="/ElectronicProducts/index.jhtml">Mens Watch</a>									</li>									<li class="sub-nav-item">										<a href="/A412/index.jhtml">Ladies Watch</a>									</li>								</ul>					</li>					<li class="nav-item">						<a class="nav-item-a  "							href="/AboutUs/index.jhtml">About Us</a> 								<ul class="sub-nav">								</ul>					</li>					<li class="nav-item">						<a class="nav-item-a  "							href="/EnterpriseCulture/index.jhtml">EnterpriseCulture</a> 								<ul class="sub-nav">								</ul>					</li>					<li class="nav-item">						<a class="nav-item-a  "							href="/Honor/index.jhtml">Honor</a> 								<ul class="sub-nav">								</ul>					</li>					<li class="nav-item">						<a class="nav-item-a  "							href="/">Group Home</a> 								<ul class="sub-nav">								</ul>					</li>									</ul>							</div>            </div>            </div></body></html><script src="js/jquery-1.8.2.min.js"></script><script src="js/query.easing.js"></script><script src="js/main.js"></script><!--[if lte IE 6]><script src="js/DD_belatedPNG_0.0.8a-min.js"></script><script src="js/ie6pngs.js"></script><![endif]--><!--S news slider js 2013.07.25--><script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script><script src="js/js/yzj-main.js"></script><!--E news slider js 2013.07.25-->
登录后复制



dee_gray.CSS代码如下:
/*---CSS base---*//*reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul {list-style:none}caption,th {text-align:left}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}q:before,q:after {content:''}abbr,acronym { border:0}/*fonts*/.fb{font-weight:bold}.fn{font-weight:normal}.t2{text-indent:2em}.lh150{line-height:150%}.lh180{line-height:180%}.lh200{line-height:200%}/*position*/.pr{position:relative}.pa{position:absolute}.bc{margin-left:auto;margin-right:auto;}.fl{float:left;display:inline}.fr{float:right;display:inline}.cb{clear:both}.cl{clear:left}.cr{clear:right}.vm{vertical-align:middle}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}.tl{text-align:left}.tc{text-align:center}.tr{text-align:right}.abs-right{position:absolute;right:0}.zoom{zoom:1}.hidden{visibility:hidden}.none{display:none}.text-v{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*width*//*height*//*margin*/.m10{margin:10px}.m15{margin:15px}.m30{margin:30px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt30{margin-top:30px}.mt50{margin-top:50px}.mt100{margin-top:100px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb30{margin-bottom:30px}.mb50{margin-bottom:50px}.mb100{margin-bottom:100px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}/*color*/.gray{color:gray;}.green{color:green;}.red{color:red;}.textover{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/*---CSS main---*//*global*/body{font:12px 'Microsoft yahei', Tahoma, Arial, Helvetica, Sans-serif;color:#555;}a{text-decoration:none; outline:none;color:#09f;}/*a:hover{color: #ae2e8d;}*/input[type=submit],botton{cursor: pointer;}.w{width:990px;margin-left:auto;margin-right:auto;}#mainner .w{overflow:hidden;}#banner .w{position: relative;}#header,#banner,#mainner,#footer,.c{width:100%; min-width:990px;}/*sprite*/.ico,#header,.siteTips .vip-login a,.siteTips .pro-tab a,.siteTips .hot-line a,.locationBar .conte-nav a,.locationBar .conte-nav span,.locationBar .local-nav a,.more a,.footer,#btn-scrollTop a{background: url(../images/yzj-sprite-en.png) no-repeat;}.locationBar{background: url(../images/yzj_location-bg.png) repeat-x;}/*header*/#header{height: 100px; background-repeat: repeat-x; position: relative; z-index: 2;}#header .w{position: relative; height: 100%;}/*head-top*/.logo{position: absolute; left: 0; bottom: 10px; width: 200px; height: 65px;}.siteTips{position: absolute; right: 0; top: 2px; height: 15px; color: white; zoom:1;}.siteTips a{color: #eee;}.siteTips span{float: left; margin-left: 8px;}.siteTips .vip-login a{background-position: -533px -193px; padding-left: 15px;}.siteTips .pro-tab a{background-position: -533px -217px; padding-left: 15px;}.siteTips .hot-line a{background-position: -529px -237px; padding-left: 18px;}.siteTips .smallTip a,.siteTips .bigTip a{display: inline-block; padding-left: 15px; background-position: -338px -158px;}.siteTips .bigTip a{background-position: -235px -159px;}.siteTips .bigTip{width: 79px; background-position: -249px -138px;}.siteTips .noIcoTip a{padding: 0;background: none;}/*nav*/.nav{position: absolute; right: 0; bottom: 0; height: 42px; z-index: 9; clear: both;}.nav-ul{zoom:1; height: 100%;}.nav-ul .nav-item{float: left; position: relative;}.nav-item .nav-item-a{	display: block; border-top: 1px solid #eee; border-left: 1px solid #ddd; 	height: 41px; line-height: 41px; padding: 0 20px; background-color: #f1f1f1; text-align: center; 	font-size: 14px; color: #666; _width: 50px; white-space: nowrap;}.nav-item .nav-item-a:hover, .nav .hover .nav-item-a,.nav .on .nav-item-a{background-color: #09f; color: white; border-color: #09f;}.sub-nav{	display: none; position: absolute; top: 42px; left: 0; width: 130px; height: auto; box-shadow: 5px 6px 12px 0 rgba(66,66,66,0.1);    /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=155,strength=3);*/ z-index: 10;}.sub-nav-item{clear: both; border-bottom: 1px solid #fff;}.sub-nav-item a{	clear: both; display: block; padding-left: 15px; height: 28px; line-height: 28px; text-align: left; 	font-size: 12px; color: #888; border-bottom: 1px solid #e2e2e2; background-color: #f1f1f1;}.sub-nav-item a:hover{background-color: #09f; color: #fff;}.sub-nav-child{	clear: both; border-bottom: 1px solid #fff;    /*filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=155,strength=3);*/ z-index: 10;}/*banner*/#banner .w{border-bottom: 1px solid #eee;}.bannerMini{height: 240px; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden;}/*mainner*/#mainner .w{margin-top: 0;}.locationBar{height: 28px; line-height: 26px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #d9d9d9; margin-bottom: 10px; padding-bottom: 0; margin-top: -1px; background-repeat: repeat-x; box-shadow: 0 3px 10px 0 rgba(99,99,99,0.2);    filter:progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=180,strength=12)\9;}.locationBar .conte-nav,.locationBar .local-nav{max-width:30%;height:28px;line-height:28px;white-space: nowrap;overflow: hidden;}.locationBar .conte-nav{max-width:60%;}.locationBar .conte-nav a,.locationBar .conte-nav span,.locationBar .local-nav a{    display: inline-block; height:28px;  padding-right: 18px; margin-right: 5px; background-position: right -425px; color: #999;    max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.locationBar .conte-nav span,.locationBar .conte-nav a:hover,.locationBar .local-nav a:hover{color: #09f;}.locationBar .local-nav a{margin-right: 8px; background-position: right -466px;}.locationBar .local-nav span{display: inline-block; height:100%; color: #999; overflow: hidden;}
登录后复制


现需要鼠标移动到mens watch上面时显示A watch和B watch。移动到ladies watch上时,显示c watch和d watch.。真心求帮助。谢谢各位程序员。


回复讨论(解决方案)

三级?要求高了点吧

jquery多级下拉菜单插件

n级都行,按照别人的结构来

<link rel="Stylesheet" type="text/css" href="http://www.coding123.net/menu/menu.css" /><style>body{background:#999}</style><div id="menu"><ul class="menu"><li><a href="#" class="parent"><span>level 1_1</span></a><ul><li><a href="#" class="parent"><span>level 2_1</span></a><ul><li><a href="#"><span>level 3_1</span></a></li><li><a href="#"><span>level 3_2</span></a><ul><li><a href="#"><span>level 3_2_1</span></a></li><li><a href="#"><span>level 3_2_2</span></a><ul><li><a href="#"><span>level 3_2_2_1</span></a></li><li><a href="#"><span>level 3_2_2_2</span></a></li></ul></li></ul></li></ul></li></ul></li><li><a href="#"><span>level 1_2</span></a></li><li class="last"><a href="#"><span>level 1_3</span></a></li></ul></div><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script><script type="text/javascript" src="http://www.coding123.net/menu/menu.js"></script>
登录后复制

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Windows 11: 导入和导出开始布局的简便方法 Windows 11: 导入和导出开始布局的简便方法 Aug 22, 2023 am 10:13 AM

在Windows11中,“开始”菜单经过重新设计,并具有一组简化的应用,这些应用排列在页面网格中,这与它的前身不同,后者在“开始”菜单上有文件夹、应用和组。您可以自定义“开始”菜单布局,并将其导入并导出到其他Windows设备,以根据您的喜好对其进行个性化设置。在本指南中,我们将讨论在Windows11上导入开始布局以自定义默认布局的分步说明。什么是Windows11中的Import-StartLayout?导入开始布局是Windows10和更早版本中使用的cmdlet,用于将“开始”菜单的自定

删除 Windows 11 搜索中的新闻和趋势内容的方法 删除 Windows 11 搜索中的新闻和趋势内容的方法 Oct 16, 2023 pm 08:13 PM

当您单击Windows11中的搜索字段时,搜索界面会自动展开。它在左侧显示最近程序的列表,在右侧显示Web内容。Microsoft在那里显示新闻和趋势内容。今天的支票宣传了必应新的DALL-E3图像生成功能、“与必应聊天龙”的提议、有关龙的更多信息、来自网络部分的热门新闻、游戏建议和趋势搜索部分。整个项目列表与您在计算机上的活动无关。虽然一些用户可能会喜欢查看新闻的能力,但所有这些都可以在其他地方大量获得。其他人可能会直接或间接将其归类为促销甚至广告。Microsoft使用界面来推广自己的内容,

iOS 17 的待机模式将正在充电的 iPhone 变成家庭集线器 iOS 17 的待机模式将正在充电的 iPhone 变成家庭集线器 Jun 06, 2023 am 08:20 AM

iOS17中的Apple正在引入待机模式,这是一种新的显示体验,专为水平方向的充电iPhone而设计。处于这个位置的iPhone能够显示一系列全屏小部件,将其变成一个有用的家庭中心。待机模式会在水平放置在充电器上运行iOS17的iPhone上自动激活。您可以查看时间、天气、日历、音乐控制、照片等信息。您可以通过可用的待机选项向左或向右滑动,然后长按或向上/向下滑动以进行自定义。例如,随着时间的流逝,您可以从模拟视图、数字视图、气泡字体和日光视图中进行选择,其中背景颜色会根据时间而变化。有一些选项

Windows 11用户指南:如何禁用广告弹窗 Windows 11用户指南:如何禁用广告弹窗 Sep 22, 2023 pm 07:21 PM

Microsoft的Windows11操作系统可能会使用通知系统的计算机上定期将建议显示为弹出窗口。建议系统最初旨在为用户提供有关改进Windows11工作流程的提示和建议,现已几乎完全转变为推广Microsoft服务和产品的广告系统。建议的弹出窗口可能会向用户宣传Microsoft365订阅,建议将Android手机链接到设备,或设置备份解决方案。如果这些弹出窗口惹恼了您,您可以调整系统以完全禁用它们。以下指南提供了有关在运行Microosft的Windows11操作系统的设备上禁用弹出建议的

如何在Windows 11的右键单击菜单中默认“显示更多选项” 如何在Windows 11的右键单击菜单中默认“显示更多选项” Jul 10, 2023 pm 12:33 PM

我们用户从来不想要的最烦人的更改之一是在右键单击上下文菜单中包含“显示更多选项”。但是,您可以删除它并取回Windows11中的经典上下文菜单。不再需要多次单击并在上下文菜单中查找这些ZIP快捷方式。按照本指南返回Windows11上成熟的右键单击上下文菜单。修复1–手动调整CLSID这是我们列表中唯一的手动方法。您将在注册表编辑器中调整特定键或值以解决此问题。注意–像这样的注册表编辑非常安全,并且可以正常工作。因此,在系统上尝试此操作之前,您应该创建注册表备份。步骤1–尝试

桌面布局已锁定的原因及解决方法 桌面布局已锁定的原因及解决方法 Feb 19, 2024 pm 06:08 PM

显示桌面布局已锁定是怎么回事在使用计算机的过程中,有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么,显示桌面布局已锁定到底是怎么回事呢?一、理解桌面布局和锁定功能首先,我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式,包括快捷方式、文件夹和小部件等。我们可以自由

如何让远程桌面连接显示对方的任务栏 如何让远程桌面连接显示对方的任务栏 Jan 03, 2024 pm 12:49 PM

远程桌面连接使用的用户非常多,很多用户在使用的时候都会遇到些小问题,比如没有显示对方的任务栏,其实很可能是对方的设置问题,下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏:1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。

蓝牙扬声器或耳机在Windows 11/10上持续发出哔声 蓝牙扬声器或耳机在Windows 11/10上持续发出哔声 Feb 19, 2024 am 11:10 AM

如果您的Windows11/10计算机上的蓝牙扬声器或耳机发出持续的嘟嘟声,这可能会破坏您的音乐享受。在本文中,您将找到解决这个问题的方法,以便消除这种令人恼火的情况。蓝牙扬声器或耳机在Windows11/10上持续发出哔声如果您的蓝牙耳机或扬声器在Windows11/10上持续发出哔声,请使用以下建议来解决问题。初步步骤运行音频故障诊断程序更新蓝牙设备的固件重新安装所需的驱动程序重置您的蓝牙设备您的设备可能有故障下面,我们已经详细解释了所有这些修复。1]初步步骤首先,执行一些准备步骤。如果这些

See all articles