导航:首页 > 万维百科 > 网页设计怎么让二级下拉列表

网页设计怎么让二级下拉列表

 发布时间：2020-11-12 12:41:35

1、Web程序设计二级下拉菜单页面怎么做

W

2、jsp怎样设置二级联动的下拉列表

jsp设置二级联动的下拉列表的例子如下：

<html>
<head>
<title>This is a test!</title>
</head>
<body>
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="1">脚本语言</option>
<option value="2">高级语言</option>
<option value="3">其他语言</option>//下拉列表数据
</select>

<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>
<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);
//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{ select2[i] = new Array();}
//定义基本选项
select2[0][0] = new Option("请选择", " ");

select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");

select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", " ");
select2[2][2] = new Option("C#", " ");

select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");
//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{ temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
temp.options[0].selected=true;
}
</script>
</body>
</html>

3、怎么制作第一级，第二级下拉菜单

打开一个Excel，我们要在性别这一列中设置一个下拉菜单，内容为“男”“女”

选中姓名后面所对着的“性别”单元格

依次打开“数据”—“有效性”

在新出来的对话框中，打开“设置”选项卡，“允许”中选择“序列，在“来源”中输入“男,女”，此处注意，“男,女”之间的逗号为英文逗号。然后勾上“忽略空置”和“提供下拉箭头”。点击确定即可
确定之后，你就可以看到，在“性别”这一列下，都出现了“男,女”下拉菜单

4、网页设置的DIV+CSS二级下拉菜单，为什么没出现？

.menu{margin-top:1px;position:relative;width:100%;float:left;background:url(../images/menu_bg.gif) repeat-x;height:40px;} .menu table{position:absolute; top:0; left:0;} .menu ul{list-style:none;margin:0;padding:0;} .menu ul li{width:105px;float:left;text-align:center;font-size:12px;position:relative;background:url(../images/menu_jiange.gif) no-repeat right center;font-weight:bold;} .menu ul li a{display:block;color:#fff;display:block;height:40px;line-height:40px;z-index:100;} .menu ul li a:hover{color:#ffee00;background:url(../images/menu_bg.gif) no-repeat;text-decoration:underline;} .menu ul li ul{visibility:hidden;position:absolute;background:url(../images/sub_menubg.gif) bottom center;border-bottom:none;z-index:100;top:40px;left:0px;} .menu ul li:hover ul,.menu ul a:hover ul{width:103px;visibility:visible;color:#fff;border:1px solid #ffb569;border-top:none;} .menu ul li:hover ul li,.menu ul a:hover ul li{width:103px;float:left;background:url(../images/su_bmenu_bottombg.gif) no-repeat bottom center ;height:30px;} .menu ul li:hover ul a,.menu ul a:hover ul a{height:30px;color:#fff;font-size:12px;font-weight:normal;text-align:left;text-indent:20px;} .menu ul li:hover ul a:hover,.menu ul a:hover ul a:hover{color:#ff0000;background:#f5f9d1;display:block;font-weight:normal} .menu ul li:hover ul li a,.menu ul a:hover ul li a{top:0;left:0;line-height:30px;} .menu ul li:hover ul li.last{} .menu ul li.last{background:none;} <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">公司简介</a></li> <li><a href="#">公司优势</a></li> <li><a href="#">团队风采</a></li> <li><a href="#">荣誉展示</a></li> <li class="last"><a href="#">代言人介绍</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">新闻中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">公司新闻</a></li> <li><a href="#">行业新闻</a></li> <li class="last"><a href="#">最新公告</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">家用产品中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">红福系列</a></li> <li><a href="#">红运系列</a></li> <li><a href="#">红瑞系列</a></li> <li class="last"><a href="#">红泰系列</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">热水工程中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">工程概述</a></li> <li><a href="#">解决方案</a></li> <li><a href="#">工程案例</a></li> <li><a href="#">工程配件</a></li> <li class="last"><a href="#">工程合作预约</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">客户服务中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">服务理念</a></li> <li><a href="#">科普知识</a></li> <li><a href="#">维修保养</a></li> <li class="last"><a href="#">售后服务</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">人力资源 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">人才理念</a></li> <li><a href="#">招聘信息</a></li> <li class="last"><a href="#">在线应聘</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">经销商专区 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">加盟中心</a></li> <li class="last"><a href="#">经销商下载</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="last"><a href="#">联系我们 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">联系方式</a></li> <li><a href="#">在线留言</a></li> <li class="last"><a href="#">在线加盟</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 用这个吧，IE6,7,FF兼容

5、如何制作网页首页导航菜单显示二级菜单

<!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=utf-8" />
<title>无标题文档</title>
<style>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}

.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}

</style>
<script>
// JavaScript Document

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>

<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何销售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采购</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服务</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商业资讯</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展会帮助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">广告帮助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注册/登录</a></li>
<li><a href="#">·发布信息</a></li>
<li><a href="#">·网上防骗</a></li>
<li><a href="#">·常见问题</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>

这个拿去参考一下吧~~

6、导航下拉菜单（二级分类）怎么弄

首先我们先来确定一下要做到什么样才能到达自己想要的效果，而在修改之前我们先来看一下目标吧！这样方便接下来的修改：

想要看到效果首先就是现在后台添加好一级栏目和二级栏目，这样做出更改以后才能看到效果。打开后台---登录---选择左上方界面----导航设置---添加主导航---添加二级导航

最终的效果就是添加一个主导航然后再在主导航里添加两三个二级导航，这样在你接下来的修改才能看到明显的效果。

这一步就是设置二级导航的样式，也就是图片的箭头所指的位置，这里可设置成1、菜单样式，2、横排样式，两种效果，这两种效果具体什么样的我就不说了，在这主要是图片中框中的，这里最好有链接，加上链接后样式文件中的a才能起到相应的效果：

做完第四步后更新一下缓存，到前台刷新一下就能看到效果了。但是你很可能选择横排发现没效果，但是不用担心，这个问题你可以去源码中实现，找到common.css文件（图片中已经显示中去那些文件夹里找）

然后用DW打开文件（如果你不知道这个软件就用记事本打开也行），用查找工具找到 .p_pop li 然后在后面的括号内加上： float:left; border-right:1px solid #666; padding-left:5px; padding-right:5px;

做到这一步基本上就完成了，如果你还想要加一下自己想要的效果的话可以在图片中的代码中更改，绝对能达到你想要的效果的（前台你懂那些代码）。

7、html页面怎么实现二级下拉菜单

现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>
打开页面预览效果

8、网页制作中，如何做二级菜单（就是鼠标滑过去才有显示）

你说的是把鼠标搁置在某个控件上停留一会，然后弹出快捷菜单吗？

其实我无形中已经告诉你办法了，鼠标事件选择“载入”或者“显示”，事件代码就是“弹出快捷菜单”并写上快捷菜单显示内容

9、html 如何做一个二级联动的下拉表单(select)

<! html><html><head><meta charset="utf-8"><title>联动</title></head><body><select id="s1" onChange="move()"><!-- 根据id获取value，onchange（）触发函数move（）修改二级select的text值实现联动 -->
<option selected value="s1">-- 请选择 --</option>
<!--默认选中-->
<option value="SC">SC</option>
<option value="BJ">BJ</option>
<option value="TJ">TJ</option></select><select id="s2">
<option selected>-- 请选择 --</option>
<!--默认选中，动态生成option --></select><script>
function move()
{
var s1=document.getElementById("s1"); var s2=document.getElementById("s2"); <!-- 获取一级和二级的属性-->
var add;
if(s1.value=="SC")
{
add=new Array("CD","DZ","MY","NC"); <!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="BJ")
{
add=new Array("HD","CY","WFJ");<!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="TJ")
{
add=new Array("TJG","TJ","TJY"); <!--比对value值，实现对应二级text值的动态生成-->
}else if(s1.value=="s1")
{
add=new Array("请选择");
}
else
{
add=null; <!--若没有就为空，当然不可能出现的-->
}

s2.length=0;
for(var i=0;i<add.length;i++) { var ss=new Option(); ss.text=add[i].split()[0];

s2.add(ss);
<!--把text值添加到二级select中，显示出来-->
}

}</script></body></html>

与网页设计怎么让二级下拉列表相关的知识