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“》
#FM 》 li 》 ul.fm{ display:none;}
#FM 》 li:hover 》ul.fm{ display:block;}
《/style》
《/head》
《body》
《/body》
《/html》
《body》
《ul id=“FM“》
《li》《a href=“#“》首页《/a》
《ul class=“fm“》
《li》《a href=“#“》这是二级菜单《/a》《/li》
《li》《a href=“#“》这是二级菜单《/a》《/li》
《/ul》
《/li》
《li》《a href=“#“》关于我们《/a》
《ul class=“fm“》
《li》《a href=“#“》这是二级菜单《/a》《/li》
《li》《a href=“#“》这是二级菜单《/a》《/li》
《/ul》
《/li》
《/li》
《/ul》
《/body》
《/html》
所作出来的效果为：
这样子就很快的用css实现简单的二级下拉菜单啦！
css下拉菜单代码
我给楼主看了一下“`你要的效果没说清楚`如果想显示出下拉列表直接删掉 #menu li dd{display:none;
}
就可以了。如果想鼠标移动后，出现下拉列表，我没看到楼主定义这个类型，所以给楼主一个我以前写的，仅供参考。
.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}
.imcm li a img{display:inline;border-width:0px;}
.imcm span{display:inline;}
.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100;float:left !important;}
.imcm a{display:block;position:relative;}
.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}
.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}
.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}
.imde ul li:hover .imsubc{visibility:visible;}
.imde ul ul li:hover
.imsubc{visibility:visible;}
.imde ul ul ul li:hover
.imsubc{visibility:visible;}
.imde li:hover ul .imsubc{visibility:hidden;}
.imde li:hover ul ul .imsubc{visibility:hidden;}
.imde li:hover ul ul ul .imsubc{visibility:hidden;}
.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}
.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/《/style》《!—-》《!–end–》
《!– *** Infinite Menu Styles: Keep this section in the document head for full validation. –》
《style type=“text/css“》
/* —- */
#imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(bg-daohangS.jpg); width:1px; height:12px; left:0px; top:0px; background-repeat:no-repeat;background-position:top left;}
#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(bg-daohangS.jpg); background-repeat:no-repeat;background-position:top left;}
/* —- */
#imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(stub_arrow_right.gif); width:6px; height:8px; left:0px; top:3px; background-repeat:no-repeat;background-position:top left;}
#imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(stub_arrow_right.gif); background-repeat:no-repeat;background-position:top left;}
/* —- */
#imouter0 {background-color:#95D4CC; border-style:none; border-color:#CCCCCC; border-width:1px; padding:0px; margin:0px; }
/* —- */
#imenus0 li ul {background-color:#95d4cc; border-style:solid; border-color:#687a54; border-width:1px; padding:5px 8px 5px 5px; margin:0px; }
/* —- */
#imenus0 li a, #imenus0 .imctitle {height:16px; background-color:#95D4CC; color:#000; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; padding:3px 6px 1px; margin:0px 5px 0px 0px; }
/* – These settings must be duplicated for IE compatibility.*/
#imenus0 li:hover》a {background-color:#5B9890; text-decoration:none; }
#imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#95d4cc; text-decoration:none; }
/* */
#imenus0 li a.iactive {}
/* —- */
#imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; background-color:transparent; color:#000; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:solid; border-color:#95d4cc; border-width:1px 0px; padding:2px 5px; margin:0px; }
/* – These settings must be duplicated for IE comptatibility.*/
#imenus0 ul li:hover》a {background-color:#5B9890; text-decoration:none; border-color:#687a54; }
#imenus0 ul li a.ihover {background-color:#5B9890; text-decoration:none; border-color:#687a54; }
/* */
#imenus0 ul li a.iactive {}
CSS技巧分享：如何用css制作横排二级下拉菜单
工具/材料
notepad++
浏览器
- 01
打开Notepa何谈从哪里找起？
用下拉框选择CSS的代码如何写
将CSS用变量写到页面中去
比如你有3个CSS
css1.css2.css3
《%
CssUrl=Request(“CssName“)
if CssUrl=““ then
CssUrl=“默认的css“
else
CssUrl=Request(“CssName“)
End if
%》
加载的时候加载默认的一个随便那个都可以了
《link id=“CssInclude“ href=“《%=CssUrl%》“ rel=“stylesheet“ type=“text/css“》
然后再下来菜单中
《form name=frm1 method=post》
《select name=“CssName“ onchange=“js:frm1.submit();“》
《option value=《%=css1地址%》 selected》css1《/option》
《!–默认css样式–》
《option value=《%=css2地址%》 》css2《/option》
《option value=《%=css3地址%》 》css3《/option》
《/select》《/form》
你是什么写的页面
asp按照我说做
如果是html
《link id=“CssInclude“ href=“默认css地址“ rel=“stylesheet“ type=“text/css“》
然后再下来菜单中
《form name=frm1 method=post》
《select name=“CssName“ onchange=“document.all.CssInclude.href=this.value;location.location.reload();“》
《option value=《%=css1地址%》 selected》css1《/option》
《!–默认css样式–》
《option value=《%=css2地址%》 》css2《/option》
《option value=《%=css3地址%》 》css3《/option》
《/select》《/form》求CSS下拉菜单源码
用CSS 快速定制下拉菜单
访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它实现了网页上下拉菜单, 不仅剩去了很多点击的麻烦, 并开创了一个网页设计的
未来之路.
我们知道, 通过 CSS 可以确切地定义一个 HTML 元素的样式，包括它的颜色、字体、边框、3D效果、滤镜等等，我们在考虑制作下拉菜单时，首先是想到 CSS 的定位技术，它精确的定位能力可以使我们放心的甚至是在三维空间设置位置和可见性。
CSS 定位使用“position“属性的两种方法定位 HTML 元素，这就是相对定位(relative)和绝对定位（absolute),相关的定位属性有9个：
position、left、top、width、height、clip、overflow、z-index、visibility
当使用“absolute(绝对)“定位元素时，该元素就被当作一个矩形覆盖物来格式化，格式化后的矩形区域就变成了一个可以放置其他 HTML 元素的容器，这个容器可以凌驾于 HTML 文档的布局之上，区域下面的文字和图形永远也无法环绕和透过该容器显示出来。这样被绝对定位了的元素我们称之为块级元素，在块级元素内放置的 HTML元素我们称之为子元素。
另外，当我们在移动鼠标时，具有对 HTML 元素有感应的 JAVA 动作是 onmouseup、onMouseOver、onMouseOut.
onmouseup 为鼠标点击之后的释放动作
onMouseOver 为鼠标经过时的动作
onMouseOut 为鼠标离开某区域时的动作.
除此之外，我们建立菜单都是为了表达一定的快捷的操作，通常是超级连接(URL).菜单上的每一条命令都应该对鼠标的行踪、点击有感应。所以，必须建立菜单对鼠标行为的多级捕获。首先是容器本身(块级元素)对鼠标经过时和离开时建立捕获，其次是菜单上各条命令对鼠标行为的捕获。也就是鼠标经过时，菜单打开响应，鼠标离去是菜单关闭。
因为菜单都是在网页调入时动态建立的，为了减轻浏览器的运行负担，加快速度，所以各个菜单只初始化一次，以后的打开和关闭操作仅仅是容器本身(块级元素)的可视与隐藏而已。
菜单的动态建立用 document.write 语句完成。 —- 也因为是使用 CSS,因此每个菜单的第一句开头应该如此：
document.write (’《 STYLE type=“text/css“ 》…后跟菜单定位语法,根据浏览器的不同一般而言，Netscape 用相对定位， IE 用绝对定位要好一些。
然后是建立容器(块级元素) 对鼠标 onMouseOver 、 onMouseOut 的捕获。可以这样写: document.write(’《 span id=菜单标识 onMouseOver=“发生的打开动作“ onMouseOut=“菜单的关闭动作“ 》…
其次，以如下方式层层建立菜单及捕获行为。需要注意的是菜单项定义是和鼠标感应操作定义在一块的。
《 a href=“超级连接“ onMouseOver=“菜单响应事件“ onMouseOver=“菜单关闭事件“》 第一条命令《 /a 》《 br 》
《 a href=“超级连接“ onMouseOver=“菜单响应事件“ onMouseOver=“菜单关闭事件“ 》 第二条命令《 /a 》《 br 》
《 a href=“超级连接“ onMouseOver=“菜单响应事件“ onMouseOver=“菜单关闭事件“ 》 第三条命令《 /a 》《 br 》
…
如果要把菜单加上边框的话，只须在菜单(块级元素)属性里加上 border: 《 粗细 》 《 长度 》 《 颜色 》 《 三维效果 》 即可。例如：
…{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;… 就成为一个立体的细边菜单。
以下是原代码 6KB，载入浏览器时，鼠标在“下拉菜单演示”、“编译器”和“许可说明” 停靠时，便会出现下拉式菜单。怎样用 CSS + JS 美化网页中的 select 下拉框
1、首先我们来看一下效果图，横向下拉菜单。
2、接下来我们看一下w3c的菜单，和小编的菜单对比一下。两者内容相同，但w3c的菜单不支持下拉，缺乏动态效果，显得死板。选中效果也不明显。不过他的网页是框架式结构，菜单相对来说还是导向性很明确的。而且将信息分成几大块，每大块有分为几小块，这样的排版很整齐，也简洁。
3、代码分析，这是代码中唯一的一点js，作用是更改下面菜单的class，配合样式表（CSS）可以达到动态效果，比如下拉菜单的下拉功能、选中显示，都是这样做到的。可以说，整个菜单主要部分都是DIV+CSS。而不是JS
4、这是所有的css部分，通过css的继承属性，来让代码达到利用率最大化。通过子类覆盖父类的属性，来让总属性利用率增加，但缺点是代码结构模糊，对新手来说难度较大。
5、接下来是HTML，这里给出两段结构，也就是两列下拉菜单，其他的格式是一样的，就不在全部截图了。链接我涂掉了，百度经验不让带链接。菜单链接你做的肯定跟我不一样，看链接也没用。如图，那个id：nav十分重要，不能丢！！它相当于整个div容器，虽然标签不是div，但思想一样。
6、最后再来看一下效果图吧！
div+css下拉列表怎么写
用div+css的ul、li结合script脚本实现下拉列表菜单，全部代码如下，复制在DW中预览即可看到效果，细节样式可以自行修改：
《!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》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》Css下拉菜单怎么做
原理hover，二级先设置样式是display:none;，当一级的元素处于:hover鼠标移上的时候，二级的元素就display:block;，二级就会显示出来了。
《li》一级
《ul》
《li》二级1《/li》
《li》二级2《/li》
《li》二级3《/li》
《/ul》
《/li》
css
li{padding:0;margin:0;list-style:none;}
li ul{display:none;}
li:hover ul{display:block;}
大概是这样，更齐全的代码，你问度娘要：CSS下拉菜单，可以找到纯CSS的或者JS,JQ的，