css下拉菜单样式？css导航栏下拉菜单特效

编程之家2026-05-29794次浏览

大家好,今天小编来为大家解答以下的问题，关于css下拉菜单样式，css导航栏下拉菜单特效这个很多人还不知道，现在让我们一起来看看吧！

在CSS中定义下拉菜单的代码

参考一下这个

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">

<head>

<<meta name="description" content="下拉菜单,CSS,布局"/>

margin:0;

padding:0;

border:0;

}

html{

background:#bfc4c7;/*背景颜色*/

}

body{

font:12px/150%'宋体';

margin:0 auto;

width:770px;

text-align:center;

}

#menu,#nav,#footer{

clear:both;

}

#nav{

padding-left:20px;

text-align:left;

background:#a60;

}

#footer{

background:#a30;

}

#logo,#banner,#mail,#left,#middle,#right{

float:left;

width:180px;

background:#f00;

}

#logo,#banner,#mail{

height:60px;

}

#banner{

width:468px;

background:#f60;

}

#mail{

width:122px;

background:#f90;

}

#left,#right{

width:200px;

}

#left{

background:#093;

}

#middle{

width:370px;

background:#063;

}

#right{

background:#033;

}

/*menu部分*/

#menu{

margin:0;

position:relative;

width:770px!important;

}

#menu ul{

list-style:none;

}

#menu li{

float:left;

position:relative;

}

#menu ul ul{

visibility:hidden;

position:absolute;

left:0px;

top:30px;

}

#menu table{

position:absolute;

left:0;

top:0;

}

#menu ul li:hover ul,#menu ul a:hover ul{

visibility:visible;

}

#menu a{

display:block;

text-align:center;

text-decoration:none;

width:77px;

height:30px;

color:#000;

line-height:30px;

background:#c9c9a7;

}

#menu a:hover{

color:#fff;

background:#b3ab79;

}

#menu ul ul li{

clear:both;

text-align:left;

}

#menu ul ul li a{

display:block;

width:77px;

height:30px;

background:#faeec7;

color:#000;

}

#menu ul ul li a:hover{

background:#dfc184;

color:#000;

}

</style>

</head>

<ul>

<li>

<table>

<tr>

<ul>

<li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">XHTML</a></li>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

<li>

<table>

<tr>

<ul>

</ul><!--[if lte IE 6]>

</td>

</tr>

</table>

</a><![endif]-->

</li>

</ul>

</div>

</body>

</html>

如何用css做下拉菜单

纯CSS的下拉菜单，此处理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden;）。

贴一段网上摘的纯CSS下拉菜单（二级）

<!DOCTYPE HTML>

<html>

<head>

<title>利用float制作兼容ie6纯css下来菜单</title>

*{ 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 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;}

</style>

</head>

<body>

<dd>

<ul>

</ul>

</dd>

<dd>

<ul>

</ul>

</dd>

<dd>

<ul>

</ul>

</dd>

</dl>

</body>

</html>

CSS技巧分享:如何用css制作横排二级下拉菜单

看到网站的导航按钮很炫酷不会怎么办？本片教程介绍如何使用css制作网站导航横排二级下拉菜单

打开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="描述"这些内容只能在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内所包含的所有ul元素 navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。这里根据你的需求来自己定义。--/style

添加一个DIV标签，在页面中划分出一个块来，用来显示。 div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述

然后使用无序标签ul+样式li来实现模块。 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

放上全部的代码吧，可以参考一下啊，!DOCTYPE html html xmlns="允许你通过一个网址来识别你的标记 head meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ meta name="keyword" content="利用css实现下拉菜单" meta name="description" content="搜狗略懂、css分享" titlecss实现下拉导航栏菜单/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内所包含的所有ul元素 navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。这里根据你的需求来自己定义。--/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

如果要添加更多的菜单，只需要后边继续添加ul/li即可

OK，本文到此结束，希望对大家有所帮助。

王者荣耀服务器未响应怎么解决？游戏服务器未响应是什么原因源代码下载图片？源码编辑器官方下载