本文目录
- 如何使用HTML和CSS制作下拉菜单
- css下拉菜单 有几点不懂，望高手能帮忙解决一下
- 如何通过html和css完成下拉菜单的制作
- CSS下拉二级菜单在IE下被挡住显示不了
- 如何用css制作横排二级下拉菜单
- css怎样实现简单的二级下拉菜单
- Css下拉菜单怎么做
- 右上角的横向二级下拉菜单 css
- 用CSS怎么实现下拉菜单
如何使用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的方式：
《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:#000;}.menu li:hover .menu-two{display: block;}/**鼠标的hover伪类事件对.menu-tow进行显示**/《/style》
3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
css下拉菜单 有几点不懂，望高手能帮忙解决一下
1，一般下拉菜单的二级菜单都是绝对定位的，绝对定位的元素脱离了常规流，所以不占位，他们会叠加在其他元素的上面或者下面2，你可以把这里面的空格当作［内］，也就是子孙元素的意思#menu ul li ---- #menu 内的 ul 内的 li#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after after/before 的意义在于，他们不存在在html文档中，但是又能被浏览器显示出来，因此，可以用来实现一些效果。常用的例如：～文字前面的icon，不用在html中插入多余的空元素，直接使用after或者before，前面后面随便插.......～清除浮动～为引用的文字加入引号～画一些有意思的图标
如何通过html和css完成下拉菜单的制作
首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。使得鼠标移到链接上面时有明显的颜色变化。截止到上一步我们的一级菜单栏已经制作完成，接下来我们需要制作二级菜单栏。我们在有二级菜单栏的一级菜单栏的li标签下面添加ul再添加li标签就可以制作二级菜单了。关于二级菜单的代码以及css样式，和在浏览器中的显示效果如下图所示。大家可以看到，这是静态的二级菜单，二级菜单会一直在网页当中显示，那么我们应该怎样让其先隐藏然后鼠标滑过一级菜单后再显示呢？其实，这只需要我们为二级菜单的ul标签设置display的none和block两个属性就可以。默认情况下设置二级ul的display属性为none；鼠标滑过时dispaly属性为block。这样一个二级菜单就制作完成了，想让其他的一级菜单下面也有二级菜单显示，我们只需要复制相应的代码就可以了。
CSS下拉二级菜单在IE下被挡住显示不了
.menu { font-size: 14px; width: 100%; height: 50px; background: url(/images/nav_bg.jpg) 0 0 repeat-x; position: relative; z-index: 1;}
.menu 样式增加position:relative + z-index:1 就可以了。 但是IE6下面如果遇到select的话，还是不能覆盖掉的。
PS：
如何用css制作横排二级下拉菜单
css制作横排二级下拉菜单，代码如下：
《body》
《ul id=“FM“》
《li》《a href=“#“》一级栏目《/a》
《ul》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《/ul》
《/li》
《li》《a href=“#“》一级栏目《/a》
《ul》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《/ul》
《/li》
《li》《a href=“#“》一级栏目《/a》
《ul》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《li》《a href=“#“》二级菜单《/a》《/li》
《/ul》
《/li》
《/ul》
《/body》
CSS样式设置代码，如下；
《style type=“text/css“》
ul#FM li {
float:left;
width:160px;
list-style:none;
}
ul#FM li ul {
display:none;
margin:0;
padding:0;
}
ul#FM li:hover ul{
display:block;
}
ul#FM li a{
display:block;
border:1px solid red;
text-decoration:none;
color:#000;
}
ul#FM li li a {
display:block;
font-size:12px;
border:1px solid green;
padding:3px;
text-decoration:none;
width:152px;
color:#CC3399;
}
ul#FM》li li a {
width:auto;
}
《/style》
所做出来的效果，鼠标放上去时，如图；
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下拉菜单怎么做
原理hover，二级先设置样式是display:none;，当一级的元素处于:hover鼠标移上的时候，二级的元素就display:block;，二级就会显示出来了。《li》一级《ul》《li》二级1《/li》《li》二级2《/li》《li》二级3《/li》《/ul》《/li》cssli{padding:0;margin:0;list-style:none;}li ul{display:none;}li:hover ul{display:block;}大概是这样，更齐全的代码，你问度娘要：CSS下拉菜单，可以找到纯CSS的或者JS,JQ的，
右上角的横向二级下拉菜单 css
HTML代码如下：
《a href=“#“》用户名xxx《div id=“layer1“》 《p》个人中心《/p》 《p》帐号设置《/p》 《p》首页设置《/p》 《p》退出《/p》《/div》《/a》
CSS代码如下：
《style type=“text/css“》a {font-size: 12px;color: #00F;text-decoration: none;display:block;padding:10px;width:55px;}#layer1 {height: 120px;width: 80px;border: 1px solid #CCC;font-size: 12px;text-align: center;display:none;}a:hover #layer1 {display: block;}#layer1:hover{display: block;}《/style》
用CSS怎么实现下拉菜单
你是想做个二级菜单吧。首先你的结构就错了，二级菜单需要双层ul套用，当默认第二层的ul处于display:none的状态，当你的鼠标第一层的li时你的第二层的display:block;就行了。zend实验室，网站建设交流：