簡單的CSS下拉菜單制作方法

2024-03-21 分類：網(wǎng)站建設(shè)

鼠標(biāo)懸停下拉菜單在網(wǎng)頁中很常見，一般的下拉菜單都是通過 JavaScript 對菜單的顯示和隱藏進(jìn)行控制，其實(shí)用純粹的CSS 也可以實(shí)現(xiàn)。用CSS下拉菜單的幾點(diǎn)好處是，不需要考慮客戶端瀏覽器是否禁用了 JS，而且用 CSS下拉菜單效率比 JS 要高，還可以方便地制定樣式和定位。

CSS下拉菜單演示地址

首先寫出 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>
<link rel="stylesheet" type="text/css" href="test.css" />
head>
<body>
<ul id="navigation">
<li>
<a href="#">欄目1a>
<ul>
<li><a href="#">欄目1-->CSS下拉菜單1a>li>
<li><a href="#">欄目1-->CSS下拉菜單2a>li>
<li><a href="#">欄目1-->CSS下拉菜單3a>li>
<li><a href="#">欄目1-->CSS下拉菜單4a>li>
ul>
li>
<li>
<a href="#">欄目2a>
<ul>
<li><a href="#">欄目2-->菜單1a>li>
<li><a href="#">欄目2-->菜單2a>li>
<li><a href="#">欄目2-->菜單3a>li>
<li><a href="#">欄目2-->菜單4a>li>
<li><a href="#">欄目2-->菜單5a>li>
ul>
li>
<li>
<a href="#">欄目3a>
<ul>
<li><a href="#">欄目3-->CSS下拉菜單1a>li>
<li><a href="#">欄目3-->CSS下拉菜單2a>li>
<li><a href="#">欄目3-->CSS下拉菜單3a>li>
ul>
li>
ul>
body>
html>

在沒有 CSS 的情況下，它顯示為一個(gè)最基本的無序列表的樣式：

下面編寫 CSS，代碼如下：

body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation , #navigation li ul{
padding:0;
margin:0;
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li ul {
display: none;
}

/* 以下只支持非IE6瀏覽器 */
#navigation li:hover a {
color:#fff;
background:#2687eb;
}
#navigation li:hover ul {
display:block;
position:absolute;
top:40px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li:hover ul li a:hover {
color:#fff;
background:#6b839c;
}
把 CSS 引入頁面后，下拉菜單就做好了，效果是這樣的（鼠標(biāo)停在“欄目1”上的效果）：

你可能注意到了，我在 CSS 代碼中使用了 li:hover 這個(gè)偽類選擇器，這在 Firefox、Opera 等瀏覽器中都沒有問題，但是有一個(gè)很嚴(yán)重的問題就是：在 IE6 中，hover 偽類僅可用于 a 標(biāo)簽，li:hover 在 IE6 中是無效的。所以，這個(gè)下拉并沒有在 IE6 中實(shí)現(xiàn)，我們需要針對 IE6 作出一些改進(jìn)。既然它只支持 a:hover，那我們就想辦法把需要控制的下拉菜單寫進(jìn) 標(biāo)簽中。

改進(jìn)后的 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>

head>
<body>
<ul id="navigation">
<li>
<a href="#">欄目1

<table><tr><td>
<ul>
<li><a href="#">欄目1-->CSS下拉菜單1a>li>
<li><a href="#">欄目1-->CSS下拉菜單2a>li>
<li><a href="#">欄目1-->CSS下拉菜單3a>li>
<li><a href="#">欄目1-->CSS下拉菜單4a>li>
ul>
td>tr>table>

li>
<li>
<a href="#">欄目2
<table><tr><td>
<ul>
<li><a href="#">欄目2-->菜單1a>li>
<li><a href="#">欄目2-->菜單2a>li>
<li><a href="#">欄目2-->菜單3a>li>
<li><a href="#">欄目2-->菜單4a>li>
<li><a href="#">欄目2-->菜單5a>li>
ul>
td>tr>table>

li>
<li>
<a href="#">欄目3
<table><tr><td>
<ul>
<li><a href="#">欄目3-->CSS下拉菜單1a>li>
<li><a href="#">欄目3-->CSS下拉菜單2a>li>
<li><a href="#">欄目3-->CSS下拉菜單3a>li>
ul>
td>tr>table>
,

li>
ul>
body>
html>
針對 IE6 的 CSS 代碼如下：

body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation , #navigation li ul{
padding:0;
margin:0;
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li ul{
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
}
/* 以下針對IE6 */
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li a:hover ul {
display:block;
position:absolute;
top:40px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li a:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li a:hover ul li a:hover {
color:#fff;
background:#6b839c;
}
改進(jìn)之后已經(jīng)達(dá)到了我們預(yù)期的目的，在多種瀏覽器中都實(shí)現(xiàn)了鼠標(biāo)懸停下拉菜單。

CSS下拉菜單演示地址

改進(jìn)的地方主要有：針對 IE6 重新寫了一個(gè) CSS，命名為 testforIE.css；通過 IE 和非 IE 瀏覽器的條件注釋實(shí)現(xiàn)了針對不同的瀏覽器設(shè)定標(biāo)簽不同的結(jié)束位置，從而可以在 IE6 中通過 a:hover 來控制下拉菜單；把下拉菜單的

放在了一個(gè)只有一行一列的表格中，因?yàn)槲夷壳鞍l(fā)現(xiàn)只有這樣才可以在 IE6 創(chuàng)新互聯(lián)常顯示，具體的原因還不是很清楚。

到此，用純CSS下拉菜單就制作完成了。

網(wǎng)頁名稱：簡單的CSS下拉菜單制作方法
轉(zhuǎn)載注明：http://muchs.cn/news0/321100.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、面包屑導(dǎo)航、網(wǎng)站制作、服務(wù)器托管、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容