问题二：如何在 HTML 页面中创建简单的下拉列表框 select标签可以创建下拉列表，列入
我是下拉项目1 我是下拉项目2 我是下拉项目3 我是下拉项目4
问题三：CSS网页下拉列表大小怎么调整 贴上代码才可以帮你解决问题， 或预览出来效果后，截图发上来。
问题四：网页设计中下拉菜单怎样挡住下面的图片 下拉菜单的样式里 设置z-index属性
问题五：HTML 下拉菜单中的选项怎样设置连接到目标网页，求代码 ]@]@]
@select the item
item a
item b
item c
item d
选项i查询i
问题六：淘宝装修怎么把 自定义页面 设置在 首页分类的下拉菜单里显示？ 导航是独立的可以使用CSS写入 当然你新建一个自定义也是可以的新建的自定义加上你的页头为150 系统自带的就会被替换掉但是不会消失前台是不会显示系统原始的导航条的 如果你想让你的导航有下拉菜单 你可以使用在线淘宝导航 工具编辑
问题七：下拉菜单，功能图标如何全部显示在同一页面，如何设置？ 嗨！
你好，你可以进入设置，然后选择通知栏设置，有精简页面，还有全部在一页的页面，选择就可以了
更详细的描述问题有助于网友理解你遇到的麻烦，帮助你更准确的解决问题。谢谢你支持小米手机！
问题八：html页面中下拉列表怎么控制宽度 ]@]@]
@Volvo
Saab
用width控制哦。
问题九：html怎么设置下拉列表必须选择 10分 js表单验证
如:
text1
text2
var options=$(#test option:selected)获取选中的项
if(options==&&options=null)
{
alret(请至少选择一互)
return
}
问题十：jsp页面中如何设置下拉菜单 ]@]@]
@2008
2009
2010
2011
2012
2013
年
01
02
03
04
05
06
07
08
09
10
11
12
月
试一试吧，其他代码你懂的
制作下拉菜单有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: leftwidth: 100pxline-height: 40px text-align: center}
.menu li a{display: block color:redfont-size: 18px}
.menu-two{display: nonewidth: 100px}
.menu li .menu-two a{font-size: 14pxcolor:#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: leftwidth: 100pxline-height: 40px text-align: center}
.menu li a{display: block color:redfont-size: 18px}
.menu-two{display: nonewidth: 100px}/***隐藏当前的二级菜单***/
.menu li .menu-two a{font-size: 14pxcolor:#000}
.menu li:hover .menu-two{display: block}/**鼠标的hover伪类事件对.menu-tow进行显示**/
</style>
3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）