用CSS樣式制作的網(wǎng)頁(yè)二級(jí)導(dǎo)航！

style body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } /style div id="nav" ul li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"我的首頁(yè) div class="list" a href="#"我的CHINAY/abr / a href="#"我的首頁(yè)/abr / a href="#"我的日志/abr / a href="#"我的日志/abr / a href="#"我的相冊(cè)/abr / a href="#"我的收藏/abr / /div /li li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"社區(qū)圈子 div class="list" a href="#"我的CHINAY/abr / a href="#"我的首頁(yè)/abr / a href="#"我的日志/abr / a href="#"我的相冊(cè)/abr / a href="#"我的收藏/abr / /div /li li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"我的短信 div class="list" a href="#"我的CHINAY/abr / a href="#"我的相冊(cè)/abr / a href="#"我的收藏/abr / /div /li li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"賬戶(hù)管理 div class="list" a href="#"我的CHINAY/abr / a href="#"我的首頁(yè)/abr / a href="#"我的日志/abr / a href="#"我的相冊(cè)/abr / a href="#"我的收藏/abr / a href="#"我的日志/abr / a href="#"我的相冊(cè)/abr / a href="#"我的收藏/abr / /div /li /ul /div

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、化德網(wǎng)站維護(hù)、網(wǎng)站推廣。

采納哦

CSS技巧分享：如何用css制作橫排二級(jí)下拉菜單

工具/材料

notepad++

瀏覽器

打開(kāi)Notepad++，先輸入個(gè)頁(yè)面框架

！DOCTYPE html

html xmlns=""

hade

/hade

body

/body

框架好了，那么就該定義頁(yè)面的title，關(guān)鍵詞keyword，和描述description

meta charset="UTF-8" content="text/html" http-equiv="content-type"

title純css二級(jí)導(dǎo)航下拉菜單/title

meta name="keyword" content="搜狗略懂"

meta name="description" content="描述"

這些內(nèi)容只能在head/head中完成。

定義頁(yè)面使用的css樣式，也是需要在head里定義的。

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只選擇nav下一級(jí)里面的ul元素

nav ul選擇nav內(nèi)所包含的所有ul元素

navul比nav ul限定更嚴(yán)格，必須后面的元素只比前面的低一個(gè)級(jí)別。

這里根據(jù)你的需求來(lái)自己定義。

--

/style

添加一個(gè)DIV標(biāo)簽，在頁(yè)面中劃分出一個(gè)塊來(lái)，用來(lái)顯示。

div中所用的樣式為剛才咱們聲明的樣式“jiao”這個(gè)盒子來(lái)描述

然后使用無(wú)序標(biāo)簽ul+樣式li 來(lái)實(shí)現(xiàn)模塊。

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗問(wèn)問(wèn)/a/li

lia href="#"搜狗輸入法/a/li

lia href="#"搜狗瀏覽器/a/li

lia href="#"搜狐/a/li

/ul

/div

放上全部的代碼吧，可以參考一下啊，

!DOCTYPE html

html xmlns=""http://允許你通過(guò)一個(gè)網(wǎng)址來(lái)識(shí)別你的標(biāo)記

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta name="keyword" content="利用css實(shí)現(xiàn)下拉菜單"

meta name="description" content="搜狗略懂、css分享"

titlecss實(shí)現(xiàn)下拉導(dǎo)航欄菜單/title

style type="text/css"

* {

margin:0;

padding:0;

}

.jiao ul li a:hover{

color:#red;

}

ul, li {

list-style:none;

}

a {

text-decoration:none;

}

.jiao {

border:5px solid #pink;

border-right:none;

overflow:hidden;

float:left;

margin:200px 0 0 600px;

}

.jiao ul li ul li a {

border-right:solid;

border-top:2px dotted #666;

background:#black;

}

.jiaoulli { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }

.jiaoulliulli { float:none;}

!--navul只選擇nav下一級(jí)里面的ul元素

nav ul選擇nav內(nèi)所包含的所有ul元素

navul比nav ul限定更嚴(yán)格，必須后面的元素只比前面的低一個(gè)級(jí)別。

這里根據(jù)你的需求來(lái)自己定義。

--

/style

/head

body

div class="jiao"

ul

lia href="#"搜狗略懂/a

ul

lia href="#"搜狗問(wèn)問(wèn)/a/li

lia href="#"搜狗輸入法/a/li

lia href="#"搜狗瀏覽器/a/li

lia href="#"搜狐/a/li

/ul

/li

/ul

/div

/body

/html

如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可

特別提示

寫(xiě)代碼過(guò)程中一定要記得換行，開(kāi)頭留空，否則過(guò)后找東西，連你自己都不知道寫(xiě)的是什么。何談從哪里找起？

如何用css制作橫排二級(jí)下拉菜單

css制作橫排二級(jí)下拉菜單，代碼如下：

body

ul id="FM"

lia href="#"一級(jí)欄目/a

ul

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

/ul

/li

lia href="#"一級(jí)欄目/a

ul

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

/ul

/li

lia href="#"一級(jí)欄目/a

ul

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

lia href="#"二級(jí)菜單/a/li

/ul

/li

/ul

/body

CSS樣式設(shè)置代碼，如下；

style type="text/css"

ul#FM li {

float:left;

width:160px;

list-style:none;

}

ul#FM li ul {

display:none;

margin:0;

padding:0;

}

ul#FM li:hover ul{

display:block;

}

ul#FM li a{

display:block;

border:1px solid red;

text-decoration:none;

color:#000;

}

ul#FM li li a {

display:block;

font-size:12px;

border:1px solid green;

padding:3px;

text-decoration:none;

width:152px;

color:#CC3399;

}

ul#FMli li a {

width:auto;

}

/style

所做出來(lái)的效果，鼠標(biāo)放上去時(shí)，如圖；

css二級(jí)菜單樣式如何設(shè)置

代碼粘貼的太復(fù)雜；

先給你分析一下原理：二級(jí)菜單沒(méi)有在沒(méi)有hover屬性的情況下是隱藏的所以需要display：none，當(dāng)鼠標(biāo)hover的時(shí)候二級(jí)菜單才會(huì)列出來(lái)，這是純css可以實(shí)現(xiàn)的；

知道上面的原理之后，下面比較容易實(shí)現(xiàn)具體看例子：

HTML代碼：

ul

lia?href=""一級(jí)菜單/a/li

lia?href=""一級(jí)菜單/a

ul?class="drop-ul"

li?a?href=""二級(jí)菜單/a/li

/ul

/li

/ul

CSS代碼：

ul?li?ul.drop-ul{?display:?none;position:relative?}/*正常情況下隱藏*/

ul?li:hover?ul.drop-ul?li{display:?block;}?/*當(dāng)鼠標(biāo)放上去二級(jí)菜單li?顯示出來(lái)*/

/*這個(gè)時(shí)候你會(huì)發(fā)現(xiàn)二級(jí)菜單顯示的位置可能不對(duì)可以使用position屬性*/

ul?li:hover?ul.drop-ul?li{position:absolute;}

/*通過(guò)top?right?left?調(diào)整位置，根據(jù)實(shí)際情況調(diào)整背景顏色，字體顏色等，細(xì)節(jié)東西*/

此時(shí)可能會(huì)發(fā)現(xiàn)會(huì)二級(jí)菜單出現(xiàn)有那么一點(diǎn)點(diǎn)的生硬；沒(méi)關(guān)系配合jquery實(shí)現(xiàn)緩慢展現(xiàn)效果

$(document).ready(function()?{

if($(window).width()??768)?{

$('ul?li').hover(

function()?{

$('ul',?this).stop().slideDown(200);

},

function()?{

$('ul',?this).stop().slideUp(200);

}

);

}

});

注意不知道jquery的新手使用記住先加載Jquery.min.js文件，放在此段js前面；

css小問(wèn)題：為什么二級(jí)菜單樣式?jīng)]顯示？

你的html結(jié)構(gòu)不對(duì)，一級(jí)菜單的結(jié)束li標(biāo)簽放錯(cuò)位置了

!--建立HTML框架--

div id="navigation"

ul id="listUL"

lia href="#"Home/a/li

lia href="#"News/a

ul class="myHide"

lia href="#"Lastest News/a/li

lia href="#"All News/a/li

/ul

/li

lia href="#"Sports/a

ul

lia href="#"Basketball/a/li

lia href="#"Football/a/li

lia href="#"Volleyball/a/li

/ul

?/li

lia href="#"Weather/a

ul

lia href="#"Today's Weather/a/li

lia href="#"Forecast/a/li

/ul

?/li

lia href="#"Contact Me/a/li

/ul

/div

css：二級(jí)菜單樣式問(wèn)題

我?guī)湍憧匆豢矗缘龋。?/p>

看到你的問(wèn)題了，以后直接向我提問(wèn)就可以了。

問(wèn)題一：也是這個(gè)二級(jí)菜單，a:link的樣式怎么加上去呢？

不是link，而是a:hover把：

a:hover{?color:#fff;?background:?url();??}//和之前那個(gè)一樣設(shè)置，就是顏色不一樣

問(wèn)題二：select樣式，怎么給select添加樣式呢？

select樣式不好加啊。要么你就自己寫(xiě)一個(gè)下拉列表，不用原生的。

標(biāo)題名稱(chēng)：css二級(jí)樣式,css層級(jí)樣式
文章網(wǎng)址：http://chinadenli.net/article22/dsijgjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、ChatGPT、響應(yīng)式網(wǎng)站、服務(wù)器托管、小程序開(kāi)發(fā)、網(wǎng)站改版

廣告

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