css菜單樣式,css 菜單

css二級菜單樣式如何設置

代碼粘貼的太復雜；

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

先給你分析一下原理：二級菜單沒有在沒有hover屬性的情況下是隱藏的所以需要display：none，當鼠標hover的時候二級菜單才會列出來，這是純css可以實現(xiàn)的；

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

HTML代碼：

lia?href=""一級菜單/a/li

lia?href=""一級菜單/a

ul?class="drop-ul"

li?a?href=""二級菜單/a/li

/ul

/li

/ul

CSS代碼：

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

ul?li:hover?ul.drop-ul?li{display:?block;}?/*當鼠標放上去二級菜單li?顯示出來*/

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

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

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

此時可能會發(fā)現(xiàn)會二級菜單出現(xiàn)有那么一點點的生硬；沒關系配合jquery實現(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;}

這樣就可以設計菜單css樣式了

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

工具/材料

notepad++

瀏覽器

打開Notepad++，先輸入個頁面框架

！DOCTYPE html

html xmlns=""

hade

/hade

body

/body

框架好了，那么就該定義頁面的title，關鍵詞keyword，和描述description

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

title純css二級導航下拉菜單/title

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

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

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

定義頁面使用的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下一級里面的ul元素

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

navul比nav ul限定更嚴格，必須后面的元素只比前面的低一個級別。

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

/style

添加一個DIV標簽，在頁面中劃分出一個塊來，用來顯示。

div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述

然后使用無序標簽ul+樣式li 來實現(xiàn)模塊。

div class="jiao"

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

lia href="#"搜狗問問/a/li

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

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

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

/ul

/div

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

!DOCTYPE html

html xmlns=""http://允許你通過一個網(wǎng)址來識別你的標記

head

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

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

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

titlecss實現(xiàn)下拉導航欄菜單/title