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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles