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下拉菜单样式之网页设计相关的知识