网站现有二级菜单，怎么用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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7711

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1232

Related knowledge

Windows 11: 匯入和匯出開始佈局的簡單方法 Aug 22, 2023 am 10:13 AM

在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定

刪除 Windows 11 搜尋中的新聞和趨勢內容的方法 Oct 16, 2023 pm 08:13 PM

當您按一下Windows11中的搜尋欄位時，搜尋介面會自動展開。它在左側顯示最近程式的列表，在右側顯示Web內容。 Microsoft在那裡顯示新聞和趨勢內容。今天的支票宣傳了必應新的DALL-E3圖像生成功能、「與必應聊天龍」的提議、有關龍的更多資訊、來自網路部分的熱門新聞、遊戲建議和趨勢搜尋部分。整個項目清單與您在電腦上的活動無關。雖然一些用戶可能會喜歡查看新聞的能力，但所有這些都可以在其他地方大量獲得。其他人可能會直接或間接將其歸類為促銷甚至廣告。 Microsoft使用介面來推廣自己的內容，

iOS 17 的待機模式將正在充電的 iPhone 變成家庭集線器 Jun 06, 2023 am 08:20 AM

iOS17中的Apple正在引入待機模式，這是一種新的顯示體驗，專為水平方向的充電iPhone而設計。處於這個位置的iPhone能夠顯示一系列全螢幕小部件，將其變成一個有用的家庭中心。待機模式會在水平放置在充電器上執行iOS17的iPhone上自動啟動。您可以查看時間、天氣、日曆、音樂控制、照片等資訊。您可以透過可用的待機選項向左或向右滑動，然後長按或向上/向下滑動以進行自訂。例如，隨著時間的流逝，您可以從類比視圖、數位視圖、氣泡字體和日光視圖中進行選擇，其中背景顏色會根據時間而變化。有一些選項

Windows 11使用者指南：如何停用廣告彈窗 Sep 22, 2023 pm 07:21 PM

Microsoft的Windows11作業系統可能會使用通知系統的電腦上定期將建議顯示為彈出視窗。建議系統最初旨在為使用者提供有關改善Windows11工作流程的提示和建議，現在幾乎完全轉變為推廣Microsoft服務和產品的廣告系統。建議的彈出視窗可能會向用戶宣傳Microsoft365訂閱，建議將Android手機連結到設備，或設定備份解決方案。如果這些彈出視窗惹惱了您，您可以調整系統以完全停用它們。以下指南提供了有關在運行Microosft的Windows11作業系統的裝置上停用彈出建議的

如何在Windows 11的右鍵選單中預設'顯示更多選項” Jul 10, 2023 pm 12:33 PM

我們用戶從來不想要的最煩人的更改之一是在右鍵單擊上下文功能表中包含“顯示更多選項”。但是，您可以刪除它並取回Windows11中的經典上下文功能表。不再需要多次點擊並在上下文選單中尋找這些ZIP捷徑。請依照本指南返回Windows11上成熟的右鍵點選上下文功能表。修復1–手動調整CLSID這是我們清單中唯一的手動方法。您將在登錄編輯器中調整特定鍵或值以解決此問題。注意–像這樣的註冊表編輯非常安全，並且可以正常工作。因此，在系統上嘗試此操作之前，您應該建立註冊表備份。步驟1–嘗試

桌面佈局已鎖定的原因及解決方法 Feb 19, 2024 pm 06:08 PM

顯示桌面佈局已鎖定是怎麼回事在使用電腦的過程中，有時我們可能會遇到顯示桌面佈局已鎖定的情況。這個問題意味著我們無法自由地調整桌面圖示的位置或改變桌面背景等操作。那麼，顯示桌面佈局已鎖定到底是怎麼回事？一、理解桌面佈局和鎖定功能首先，我們需要了解桌面佈局和桌面鎖定這兩個概念。桌面佈局是指桌面上各元素的排列方式，包括捷徑、資料夾和小工具等。我們可以自由

如何在 Windows 11 中立即開啟即時字幕 Jun 27, 2023 am 08:33 AM

如何在Windows11中立即開啟即時字幕1.在鍵盤上預贏+按Ctrl+L2.點擊同意3.將顯示一個彈出窗口，顯示準備以英語（美國）添加字幕（取決於您的首選語言）4.此外，您還可以透過點擊齒輪按鈕來過濾褻瀆？偏好？過濾髒話相關文章如何修復Windows伺服器中的啟動錯誤代碼0xc004f069Windows上的啟動過程有時會突然轉向顯示包含此錯誤代碼0xc004f069的錯誤訊息。雖然啟動程序已經聯機，但一些運行WindowsServer的舊系統可能會遇到此問題。透過這些初步檢查，如果這些檢查不