css下拉菜單樣式之網頁設計_【網頁設計教程】：如何使用css樣式實現網站下拉菜單效果

1、網頁設計中怎麼對下拉菜單的css樣式進行修改

這個網上應該有很多案例的啊。

先幫你找了一個，你參考下：
http://ourjs.com/detail/551b9b0529c8d81960000007

2、CSS 選擇下拉菜單樣式怎麼寫

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS下拉菜單</title>
<style type="text/css">
dd{
display:none;
}
dl:hover dd,a:hover dd{
display:block;
}
a:hover{
border:0;
}
</style>
</head>

<body>

<dl>
<dt>一級菜單</dt>
<dd>二級菜單</dd>
<dd>二級菜單</dd>
<dd>二級菜單</dd>
</dl>

</body>
</html>

3、【網頁設計教程】：如何使用css樣式實現網站下拉菜單效果

4、html導航的下拉菜單樣式。

http://www.lanrentuku.com/js/hang-570.html
19個精彩的CSS菜單打包下載

下載解壓後，選擇第2個效果即可，和你的非常接近，改下顏色值就好。

附加：更多菜單導航效果
http://www.lanrentuku.com/js/hang.html

5、如何通過html和css完成下拉菜單的製作

首先需要打開自己電腦上的DW軟體，新建一個html頁面，然後將其保存在桌面上。

接下來我們需要在body裡面添加DIV標簽，並在其內使用ul無序列表和li標簽製作一個一級菜單欄，代碼和瀏覽器的效果如下面兩張圖片所示。

因為菜單欄一般都是有鏈接的，我們就需要為每個li標簽添加一個a標簽，並增加適當的樣式。使得滑鼠移到鏈接上面時有明顯的顏色變化。

截止到上一步我們的一級菜單欄已經製作完成，接下來我們需要製作二級菜單欄。我們在有二級菜單欄的一級菜單欄的li標簽下面添加ul再添加li標簽就可以製作二級菜單了。
關於二級菜單的代碼以及css樣式，和在瀏覽器中的顯示效果如下圖所示。

大家可以看到，這是靜態的二級菜單，二級菜單會一直在網頁當中顯示，那麼我們應該怎樣讓其先隱藏然後滑鼠滑過一級菜單後再顯示呢？
其實，這只需要我們為二級菜單的ul標簽設置display的none和block兩個屬性就可以。默認情況下設置二級ul的display屬性為none；滑鼠滑過時dispaly屬性為block。

這樣一個二級菜單就製作完成了，想讓其他的一級菜單下面也有二級菜單顯示，我們只需要復制相應的代碼就可以了。

6、怎樣用 CSS + JS 美化網頁中的 select 下拉框

這個可以換種方式實現，首先select的樣式每個瀏覽器都有其默認的樣式，需要先去除這些默認樣式，其次，select裡面的樣式諸如箭頭，下拉框等等的樣式，這里提供一種思路，就是在select的外層添加一個div，對這個div元素設置樣式，select元素則是沒樣式，從而達到一種掩眼法的效果，實現方式如下：

<div id="selectStyle">
<select id="select">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
  <option>option 5</option>
</select>
</div>

首先要去掉 #select 的默認樣式：

/* 去掉默認樣式，設置新的樣式 */
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff;
}

然後在外層div#selectStyle設置自定義樣式

#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭頭圖片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/* 如果不想加圖片，
   則可以設置一個自己的三角形樣式，
   如下的自定義方式，
   見代碼1 */
position:relative;
z-index:1;
}
/* 代碼1 */
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/* 代碼1 */
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}

以上就是自定義select樣式的方法；

同時也可以完全不要select這個元素使用div+css來自定義一個跟select一樣效果的下拉框（需要Javascript輔助）。

7、通過製作一個頁面,定義不同的CSS樣式,通過下拉菜單,改變頁面的樣式

我寫了一個簡單的方法，你把樣式調成自己喜歡的就可以了：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>測試</title>
<style type="text/css">
table{ display:none;}
td{ cursor:pointer;}
.test{ float:left; width:100px; height:20px; border:1px solid #000;}
.test2{float:left; width:400px; height:100px; border:1px solid #000;background:#fff;}
.bg1{width:400px; height:100px; border:1px solid #000;background:#00ff00;}
.bg2{width:400px; height:100px; border:1px solid #000;background:#ff0000;}
.bg3{ width:400px; height:100px; border:1px solid #000;background:#0000ff;}
</style>
<script type="text/javascript">
function turn(x){
document.getElementById("id").className="bg"+x+"";
}
function show(){
document.getElementById("hd").style.display="block";
}
function hide(){
document.getElementById("hd").style.display="none";
}
</script>
</head>
<body>
<div class="test" onMouseOver="show()" onMouseOut="hide()">
<div style="border-bottom:1px solid #000;">請選擇...</div>
<table border="1" width="100%" id="hd">
<tr>
<td onClick="turn('1')">樣式1</td>
</tr>
<tr>
<td onClick="turn('2')">樣式2</td>
</tr>
<tr>
<td onClick="turn('3')">樣式3</td>
</tr>
</table>
</div>
<div class="test2" id="id">
</div>
</body>
</html>

8、如何使用HTML和CSS製作下拉菜單

製作下拉菜單有2種方法：

使用jquery方法實現；實現方法：首先需要引入jquery的版本，引用toggle()的方法，點擊當前的一級導航。用this方法來進行當前包含的二級菜單隱藏與顯示。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>
<style>
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.menu{width: 1000px; margin: 0 auto;}
.menu li{float: left;width: 100px;line-height: 40px; text-align: center;}
.menu li a{display: block; color:red;font-size: 18px;}
.menu-two{display: none;width: 100px;}
.menu li .menu-two a{font-size: 14px;color:#0000FF;}
</style>
<body>
<ul class="menu">
<li><a href="#">一級菜單</a>
<ul class="menu-two">
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
</ul>
</li>
<li><a href="#">一級菜單</a>
<ul class="menu-two">
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
</ul>
</li>
<li><a href="#">一級菜單</a>
<ul class="menu-two">
<li><a href="#">二級菜單</a></li>
</ul>
</li>
<li><a href="#">一級菜單</a>
<ul class="menu-two">
<li><a href="#">二級菜單</a></li>
</ul>
</li>
<li><a href="#">一級菜單</a>
<ul class="menu-two">
<li><a href="#">二級菜單</a></li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
$(".menu > li a").toggle(
function(e){
$(this).siblings().show();//對當前的.menu>li a的兄弟節點menu-two進行顯示
e.preventDefault();//阻止冒泡事件.
},function(e){
$(this).siblings().hide();對當前的.menu>li a的兄弟節點menu-two進行隱藏
e.preventDefault();
}
)
})

</script>
</html>

2.使用css的偽類樣式hover實現，html結構上面的一樣，只需要把二級菜單進行隱藏(display:none);然後在用hover方式，滑鼠移上去讓當前隱藏的（.menu-tow）進行（display:block）顯示，純css的方式：

3.2種方式都可以實現想要的下拉菜單效果，jquery的實現方式與純css的實現方式均可以，如果需要有個緩動的動畫效果，可以在當前的jquery方式下進行修改，純css的實現需要用css3的屬性來實現。都是很酷炫的（PS：css3的效果只支持ie9及以上）。

9、如何在外聯式css內寫懸浮下拉菜單樣式

<!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=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
body {
font-family:"宋體";
font-size:12px;
}
.menu {
height:30px;
background:#e6e6e6;
margin-left:10px;
}
.menu a {
text-decoration:none;
}
ul {
margin:0;
padding:0;
}
.menu li {
list-style:none;
float:left;
width:90px;
overflow:visible;
cursor:pointer;
}
ul.level0 {
height:30px;
overflow:visible;
}
ul.level1, ul.level2, ul.level3 {
width:90px;
display:none;
}
ul.level2, ul.level3 {
margin:-28px 0 0 90px;
}
ul.level0 > li {
height:30px;
line-height:30px;
text-align:center;
background:#999;
}
ul.level1 > li, ul.level2 > li, ul.level3 > li {
height:28px;
line-height:28px;
background:#bbb;
}
ul.level0 > li:hover {
background:#ccc;
}
ul.level1 > li:hover, ul.level2 > li:hover, ul.level3 > li:hover {
background:#ddd;
}
ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul {
display:block;
}
</style>
</head>
<body>
<div class="menu">
<ul class="level0">
<li class="imyeah"> <a href="#">immenu0</a>
<ul class="level1">
<li> <a href="#">imdropmenu00</a> </li>
<li class="imyeah"> <a href="#">imdropmenu01</a>
<ul class="level2">
<li class="imyeah"> <a href="#">imdropmenu010</a>
<ul class="level3">
<li> <a href="#">imdropmenu0100</a> </li>
<li> <a href="#">imdropmenu0101</a> </li>
</ul>
</li>
<li> <a href="#">imdropmenu011</a> </li>
<li> <a href="#">imdropmenu012</a> </li>
</ul>
</li>
<li> <a href="#">imdropmenu02</a> </li>
<li> <a href="#">imdropmenu03</a> </li>
<li> <a href="#">imdropmenu04</a> </li>
</ul>
</li>
<li class="imyeah"> <a href="#" class="top_link">immenu1</a>
<ul class="level1">
<li class="imyeah"> <a href="#">imdropmenu10</a>
<ul class="level2">
<li> <a href="#">imdropmenu100</a> </li>
<li class="imyeah"> <a href="#">imdropmenu101</a>
<ul class="level3">
<li> <a href="#">imdropmenu1010</a> </li>
<li> <a href="#">imdropmenu1011</a> </li>
</ul>
</li>
<li> <a href="#">imdropmenu102</a> </li>
</ul>
</li>
<li> <a href="#">imdropmenu11</a> </li>
<li> <a href="#">imdropmenu12</a> </li>
<li> <a href="#">imdropmenu13</a> </li>
<li> <a href="#">imdropmenu14</a> </li>
<li> <a href="#">imdropmenu15</a> </li>
</ul>
</li>
<li class="imyeah"> <a href="#" class="top_link">immenu2</a>
<ul class="level1">
<li> <a href="#">imdropmenu20</a> </li>
<li> <a href="#">imdropmenu21</a> </li>
</ul>
</li>
<li class="imyeah"> <a href="#" class="top_link">immenu3</a>
<ul class="level1">
<li> <a href="#">imdropmenu30</a> </li>
<li> <a href="#">imdropmenu31</a> </li>
<li> <a href="#">imdropmenu32</a> </li>
</ul>
</li>
<li> <a href="#" class="top_link">immenu4</a> </li>
</ul>
</div>
</body>
</html>

導航:首頁 > 萬維百科 > css下拉菜單樣式之網頁設計

css下拉菜單樣式之網頁設計

與css下拉菜單樣式之網頁設計相關的知識