css設(shè)置下拉列表(select)樣式首先我們需要獲取到這個元素的id或者是class，然后在通過給這個元素設(shè)置它的width和height等等一些樣式，具體的看代碼:
10年積累的做網(wǎng)站、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有寧河免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
html
head
style
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}
.div select option{
width:150px;
height:30px;
}
/head
body
div class='div1'
select
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
/div
/body
/html
select{
width: 90%;
padding: 8px 0;
font-size: 14px;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
div:after{
content: "";
width: 13px;
height: 7px;
background: url(../../../images/about/sanjiaoxing2.png) no-repeat center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
right: 20px;
top: 45%;
//給自定義的圖標實現(xiàn)點擊下來功能
pointer-events: none;
}
工具/材料
notepad++
瀏覽器
01
打開Notepad++，先輸入個頁面框架
！DOCTYPE html
html xmlns=""
hade
/hade
body
/body
02
框架好了，那么就該定義頁面的title，關(guān)鍵詞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中完成。
03
定義頁面使用的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
04
添加一個DIV標簽，在頁面中劃分出一個塊來，用來顯示。
div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述
05
然后使用無序標簽ul+樣式li 來實現(xiàn)模塊。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/div
06
放上全部的代碼吧，可以參考一下啊，
!DOCTYPE html
html xmlns="" //允許你通過一個網(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
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
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗問問/a/li
lia href="#"搜狗輸入法/a/li
lia href="#"搜狗瀏覽器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
07
如果要添加更多的菜單，只需要后邊繼續(xù)添加ul/li即可
特別提示
寫代碼過程中一定要記得換行，開頭留空，否則過后找東西，連你自己都不知道寫的是什么。何談從哪里找起？
例一：
＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
＜option value="2" selected＞yesky.com＜/option＞
＜option value="1"＞redidea.net＜/option＞
＜/select＞
查一下手冊,還有好多項可以設(shè)置.
例二：
html
head
style
.box
{
border: 1px solid #C0C0C0;
width: 182px;
height: 20px;
clip: rect( 0px, 181px, 20px, 0px );
overflow: hidden;
}
.box2
{
border: 1px solid #F4F4F4;
width: 180px;
height: 18px;
clip: rect( 0px, 179px, 18px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width: 183px;
line-height: 14px; color: #909993;
border-style: none;
border-width: 0px;
}
/style
/head
body
div class = boxdiv class = box2
select size = "1" name = "D1"
option內(nèi)容一/option
option內(nèi)容二/option
/select
/div/div
/body
/html
純CSS的下拉菜單，此處理解的意思就是
標簽套
標簽，然后再給
標簽設(shè)置樣式。在被套的
標簽設(shè)置平時狀態(tài)為隱藏，再等鼠標移動到上一個
標簽時，將被套的
標簽顯示（樣式：overflow:hidden;
）。
貼一段網(wǎng)上摘的純CSS下拉菜單（二級）
利用float制作兼容ie6純css下來菜單
*
{
margin:0;
padding:0;
}
ul
{
list-style:none;
}
a:hover
{color:#555;
}
.nav
{
float:left;
overflow:hidden;
text-align:center;
font-size:14px;
}
.nav
dd
{
float:left;
width:300px;
margin:-888px
-150px
0;
}
.nav
dd
a
{
float:left;
margin-top:888px;
display:block;
position:relative;
background:#eee;
width:150px;
height:30px;
line-height:30px;
border-bottom:1px
solid
#fff;
}
.nav
a:hover
{
margin-right:1px;
background:#3cf;
}
.nav
dd
ul
{
float:left;
font-size:0;
z-index:888;
}
.nav
dd
li
a
{
clear:left;
width:150px;
margin-top:0;
font-size:14px;
}
.nav
dd
li
a:hover
{
margin-right:1px;
}
首頁
關(guān)于我們
公司簡介
公司文化
企業(yè)榮譽
聯(lián)系我們
新聞動態(tài)
國內(nèi)新聞
國外新聞
產(chǎn)品展示
111
222
重慶分公司
重慶分公司
