css菜單樣式,css 菜單

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

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

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)臨江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

先給你分析一下原理：二級(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代碼：

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前面；

如何自定義wordpress菜單css樣式

1.首先找到wordpress菜單中的class類名

2.在wordpress模版目錄下一般在wp-content\themes\主題名，找到style.css

3.在style.css中為類名添加樣式，如下：

.menu-item:{color:red;}

這樣就可以設(shè)計(jì)菜單css樣式了

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"

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

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