CSS實作觸碰下拉式選單並適用各瀏覽

  先前曾有不少朋友問梅干,CSS能製作出滑鼠碰的下拉式選單嗎?感覺好像可以又好像不行,因此便回答可利用hover的方式,讓區塊顯示與關閉,應該是可以實作出來,因此今天整理了一下手邊的資料,與當初的想法,製作了一個小範例,只需純CSS就可實作出滑鼠觸碰的下拉選單,完全不用任何javascript的語法,經梅干測試,可在IE6、IE7、Firefox2、Firefox3、GoogleChrome、Safari、Operausb....等瀏覽器下運行。

CSS_list_menu.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>【梅問題教學網】 CSS觸碰式下拉式選單</title>
<style type="text/css">
/* 整體設置*/ 
.navigation {
	margin:0; 
	padding:0;
	width:610px;
	list-style-type:none; 
	font:12px Arial; 
	}

.navigation li {
	float:left; 
    padding:0; 
	margin:0 10px 0 0; 
	_margin:0 2px 0 0; 
	width:150px;
	}

/* 設置選單區塊*/
.navigation li dl { 
	width:150px;/*ie6*/
    margin:0; 
	padding:0;
	background-color:#fff;
	border:solid 2px #666; 
	}
	
.navigation li dt a , .navigation li dd a{ display:block;}


/* 設置主選單dt */
.navigation li dt {
	margin:0;
	padding: 5px;
	text-align:center;
	background-color:#fff;	
	font-size: 12px;
	font-weight: bold;
	height:15px;
	overflow:hidden;
	}

.navigation li dt a ,.navigation  li dt a:visited {
	display:block; 
    color:#333;
    text-decoration:none;
	}

/* 設置子選單dd */
.navigation li dd { 
	margin:0; 
    padding:0; 
	color: #333; 
	background-color:#efefef;
	border-bottom:dotted 1px #666;
	}
	
.navigation li dd.last {
	border-bottom:0;
	}	

.navigation li dd a, .navigation  li dd a:visited {
	display:block; 
	color:#333; 
    text-decoration:none; 
	padding:4px 5px 4px 20px;
    }

	
/*隱藏子選單*/
.navigation li dd { display:none;}


/* 滑鼠滑入顯示子選單 */
.navigation li:hover dd, .navigation li a:hover dd { display:block;}

/*ie6 hack*/
.navigation li:hover,.navigation li a:hover { border:0;}
.navigation table { border-collapse:collapse; 
    padding:0; 		
	text-align:left;
	}

</style>
</head>

<body>
<ul class="navigation">
	<li>  
    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->  
    	<dl>
			<dt><a href="#">PC電腦不求人</a></dt>
			<dd><a href="#">系統</a></dd>
			<dd><a href="#">網路</a></dd>
			<dd><a href="#">USB</a></dd>
			<dd class="last"><a href="#">防毒</a></dd>
		</dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->    
    </li> 
    <li>
    <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->  
        <dl>
			<dt><a href="#">Photoshop</a></dt>
			<dd><a href="#">疑難雜症</a></dd>
			<dd class="last"><a href="#">實用範例</a></dd>			
		</dl>
     </li>
     <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
     <li>
     <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->  
        <dl>
			<dt><a href="#">css</a></dt>
			<dd><a href="#">實用案例</a></dd>
			<dd class="last"><a href="#">輔助工具</a></dd>
		</dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->     			
    </li>
</ul>
</body>
</html>

範例預覽:

相關文章

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

CSS3教學-利用CSS3中的Flex屬性,讓區塊內元素垂直&水平居中

CSS3教學-利用CSS3中的Flex屬性,讓區塊內元素垂直&水平居中

CSS3教學-CSS3新增自訂變數屬性的功能

CSS3教學-CSS3新增自訂變數屬性的功能

Gridover 線上即時設定CSS文字,字級大小、行高、字距、邊距

Gridover 線上即時設定CSS文字,字級大小、行高、字距、邊距




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 48 梅留言

  • 第2梅
    Ling 說道:

    梅干大您好:

    我依照此篇下拉式選單的教學進行製作,雖然有達到我想要的結果,但同時也出現個問題,情況如下

    當滑鼠移過去 > 子選單下滑出現時就會擠壓到下面的區塊,導致下面的區塊往下推,我試著用z-index解決,可是沒有用,請問有什麼方式可以解決?

    回應:
    把navigation的position設為absolute;
    應該就可解決
  • 第1梅
    galigon 說道:

    往上拉的選單怎麼寫?