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

2024-03-21 分類：網站建設

鼠標懸停下拉菜單在網頁中很常見，一般的下拉菜單都是通過 JavaScript 對菜單的顯示和隱藏進行控制，其實用純粹的CSS 也可以實現。用CSS下拉菜單的幾點好處是，不需要考慮客戶端瀏覽器是否禁用了 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 的情況下，它顯示為一個最基本的無序列表的樣式：

下面編寫 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 引入頁面后，下拉菜單就做好了，效果是這樣的（鼠標停在“欄目1”上的效果）：

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

改進后的 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;
}
改進之后已經達到了我們預期的目的，在多種瀏覽器中都實現了鼠標懸停下拉菜單。

CSS下拉菜單演示地址

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

放在了一個只有一行一列的表格中，因為我目前發現只有這樣才可以在 IE6 創新互聯常顯示，具體的原因還不是很清楚。

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

網頁名稱：簡單的CSS下拉菜單制作方法
轉載注明：http://www.js-pz168.com/news0/321100.html

成都網站建設公司_創新互聯，為您提供微信公眾號、面包屑導航、網站制作、服務器托管、App設計、網站內鏈

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

猜你還喜歡下面的內容

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

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