css下拉菜单代码怎么写（在CSS中定义下拉菜单的代码）

本文目录

• 在CSS中定义下拉菜单的代码
• htmlcss下拉菜单怎么制作_html如何制作下拉菜单
• 网页中用DIV CSS控制下拉菜单怎么实现
• div+css下拉列表怎么写
• HTML中鼠标悬浮时的下拉菜单用CSS怎么做

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

参考一下这个
***隐藏网址***
***隐藏网址***
《head》
《title》二级菜单《/title》《!--标题栏--》
***隐藏网址***
***隐藏网址***
《《meta name="description" content="下拉菜单,CSS,布局" /》《!--简介--》
《meta content="下拉,菜单,CSS,布局" name="keywords" /》《!--关键词--》
《!--CSS样式开始--》
《style type=text/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》《!--CSS样式结束--》
《/head》《!--网页头部结束--》
《body》《!--网页主体开始--》
《div id="menu"》
《ul》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《li》
《a href=""》第一分类《!--》
《table》
《tr》
《td》《!--》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《li》《a href=""》PHP《/a》《/li》
《li》《a href=""》MySQL《/a》《/li》
《li》《a href=""》Fireworks《/a》《/li》
《li》《a href=""》Photoshop《/a》《/li》
《li》《a href=""》Flash《/a》《/li》
《li》《a href=""》Illustrator《/a》《/li》
《/ul》《!--》
《/td》
《/tr》
《/table》
《/a》《!--》
《/li》
《/ul》
《/div》
《/body》《!--网页主体结束--》
《/html》

htmlcss下拉菜单怎么制作_html如何制作下拉菜单

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（AboutUs）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

网页中用DIV CSS控制下拉菜单怎么实现

直接是用CSS控制的下拉菜单，在各个浏览器中表现的不够完美
最佳的方法是使用jQuery来制作，代码如下：
《div id="nav"》
《ul》
《li》《a href="#"》菜单零《/a》《/li》
《li》《a href="#"》菜单一《/a》《/li》
《ul class="childnav"》
《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》
《li》《a href="#"》子菜单《/a》《/li》
《/ul》
《li》《a href="#"》菜单二《/a》
《ul class="childnav"》
《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》
《li》《a href="#"》子菜单《/a》《/li》
《/ul》
《/li》
《li》《a href="#"》菜单四《/a》《/li》
《!-- /nav --》
《/ul》
《/div》
《script type="text/javascript"》
$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown(’fast’).show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp(’slow’);
});
});
});
《/script》
《style type="text/css"》
* { padding:0; margin:0; list-style:none; }
#nav {
margin:200px;
}
#nav ul { background:#333; padding:5px; float:left; width:100%; }
#nav li {
float:left;
padding:0 5px;
position:relative;
}
#nav li a {
float:left;
padding:0 5px;
display:block;
text-align:center;
color:#fff;
text-decoration:none;
font-size:12px;
height:18px;
line-height:18px;
}
#nav li a:hover, #nav li a.on {
background:#444;
text-decoration:none;
}
#nav li ul {
display: none;
position: absolute;
left: -2px;
top: 18px;
background: #999;
border-bottom:3px solid #333;
z-index:1000;
}
#nav li ul li {
background:none;
float:none;
padding:0;
}
#nav li ul a {
float:none;
}
#nav li ul a:hover {
background:#888;
}
#nav li:hover ul, #nav li.over ul {
display: block;
z-index:999
}
《/style》

div+css下拉列表怎么写

用div+css的ul、li结合script脚本实现下拉列表菜单，全部代码如下，复制在DW中预览即可看到效果，细节样式可以自行修改：
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》DIV+CSS实现下拉列表菜单《/title》
《style type="text/css"》
《!--
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
li{
float:left;
width:160px;
margin-left:1px;
}
ul li a{
display:block;
font-size:12px;
border:#CCCCCC 1px solid;
padding:3px;
text-decoration:none;
color:#777777;
margin-top:1px;
text-align:center;
}
ul li a:hover{
background-color:#0099CC;
color:#FFFFFF;
}
li ul{
display:none;
top:20px;
margin-top:1px;
}
li:hover ul,li.over ul{
display:block;
}

--》
《/style》
《/head》
《script type="text/javascript"》《!--//--》《!//》《!--
startlist = function() {
if （document.all&&document.getElementByIdx) {
navRoot = document.getElementByIdx("nav");
for (i=0;i《navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over","");
}
}
}
}
}
window.onload=startlist;
//--》《!]]》《/script》
《/script》
《body》
《ul 》
《li》《a href=""》文章《/a》
《ul》
《li》《a href=""》CSS 教程《/a》《/li》
《li》《a href=""》DOM 教程《/a》《/li》
《li》《a href=""》XML 教程《/a》《/li》
《li》《a href=""》Flash 教程《/a》《/li》
《/ul》
《/li》
《li》《a href=""》参考《/a》
《ul》
《li》《a href=""》XHTML《/a》《/li》
《li》《a href=""》XML《/a》《/li》
《li》《a href=""》CSS《/a》《/li》
《/ul》
《/li》
《li》《a href=""》Blog《/a》
《ul》
《li》《a href=""》全部《/a》《/li》
《li》《a href=""》网页技术《/a》《/li》
《li》《a href=""》UI 技术《/a》《/li》
《li》《a href=""》Flash 技术《/a》《/li》
《/ul》
《/li》
《li》《a href=""》摇滚《/a》
《ul》
《li》《a href=""》纯音乐《/a》《/li》
《li》《a href=""》古典金曲《/a》《/li》
《li》《a href=""》UI 技术《/a》《/li》
《li》《a href=""》Flash 技术《/a》《/li》
《/ul》
《/li》
《/ul》
《/body》
《/html》

HTML中鼠标悬浮时的下拉菜单用CSS怎么做

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：
《html》《head》《title》《/title》《style》*{margin:0;padding:0;}ul,li{list-style-type:none;padding:0;margin:0;}#nav li a{display:block;width:100px;text-align:center;text-decoration:none;color:#ffffff;background-color:#000000;}#nav li{position:relative;margin-bottom:2px;float:left;margin-right:5px;}#nav li ul{position:absolute;left:10px;top:20px;display:none;width:100px;}#nav li:hover ul{display:block;}《/style》《/head》《body》《ul id="nav"》《li》《a href="#"》首页《/a》《/li》《li》《a href="#"》关于我们《/a》《ul》《li》我们的故事《/li》《li》我们的团队《/li》《/ul》《/li》《li》《a href="#"》我们的服务《/a》《ul》《li》网页设计《/li》《li》页面制作《/li》《li》程序开发《/li》《/ul》《/li》《li》《a href="#"》联系我们《/a》《ul》《li》团队主力《/li》《li》团队成员《/li》《/ul》《/li》《/ul》《/body》《/html》