当前位置：首页 » 编程语言 » html5下拉菜单

html5下拉菜单

发布时间: 2021-03-18 04:41:45

❶ html5怎么实现div+css二级下拉菜单

1.外部为ul标签，在每个li里嵌套一个ol列表
2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位
3.设置ol的高为0，溢出隐藏
4.外部li标签:hover 时，设置ol的高度，transition渐变

❷ html里怎么设置下拉选项

<select name="yourName" id="yourId">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

这样就行了，一个option就是一个选项，value表示当前选项的值

❸ html下拉菜单怎么写

方法如下：

方法一：

HTML

5、定位下拉菜单，并将菜单项对齐。这将会同时去除灰色背景。

position:relative;声明必须添加到列表项顶端。
position:absolute;声明必须添加到相对位置定位的列表中。

❹ html+css下拉菜单怎么制作

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

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

❺ html下拉列表怎么做

</select>

❻ html5下拉列表怎么定位急！！

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id
然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。
在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。
下面是示例代码：
<form action="">
<input type="text" list="url_list" name="text" />
<input type="submit" />
</form>
<datalist id="url_list">
<option label="HZ赫兹工作室" value="http://weibo.com/hz421247910" />
<option label="提示1" value="列表项1" />
<option label="提示2" value="列表项2" />
<option label="" value="列表项3" />
</datalist>
HTML5之前一般使用select标签或者div+js实现

❼ 如何用HTML编程实现下拉菜单

下拉菜单，其实就是使用HTML+css和一些小小的js就能很简单的实现，

首先需要你有至少有2个div然后在将第一个div作为父级元素，然后在使用position:absolut;绝对定位一下；
然后在使用JS，获取对象，然后添加一个鼠标的onmouseover事件就行了
在这里给你看下我以前的写的一个代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>简洁实用的二级下拉导航菜单</title>

body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

#subNav a{text-decoration:none;font-weight:normal;display:block;}

#subNav a:hover{color:#f00;background:#f00;}

</style>

</head>

<body>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

<a href="#">Admin</a>

</div>

</li>

</ul>

</div>

var nav=document.getElementById("nav").getElementsByTagName("li");

for(i=0;i<nav.length;i++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold";

this.style.overflow="visible";

this.style.background="#666666";

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";

this.style.background="#999999"

this.style.overflow="hidden";

}

</script>

</body>

</html>

#header #shousuo{

width:950px;

height:50px;

background:#f4f4f4;

margin-top:10px;

}

#shousuo ul li{

line-height:50px;

list-style-type:none;

float:left;

margin-left:5px;

font-weight:bold;

font-size:14px;

}

❽ html+css+javascript 菜单单击式下拉菜单怎么弄

【方法步骤】：

写好HTML代码以实现下拉菜单。
CTR+S保存代码，在浏览器中F5刷新网页查看效果。

❾ html+css+javascript 菜单单击式下拉菜单

HTML:

<!DOCTYPEhtml>
<html>
<head>
<title>Dropdown</title>
<linkrel="stylesheet"href="style.css">
<metacharset="utf-8"/>
</head>
<body>
<ul>
<liclass="dropdown">
<aid="a"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题A</a>
<divclass="dropdown-content"id="dropdown-a">
<ahref="#">下拉</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
<liclass="dropdown">
<aid="b"href="javascript:void(0)"class="dropbtn"onclick="showList(this)">标题B</a>
<divclass="dropdown-content"id="dropdown-b">
<ahref="#">下拉1</a>
<ahref="#">下拉2</a>
<ahref="#">下拉3</a>
</div>
</li>
</ul>
<scriptsrc="script.js"></script>
</body>
</html>

CSS (style.css):

body{
font-family:"LucidaSansUnicode","LucidaGrande",sans-serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
lia,.dropbtn{
display:inline-block;
color:white;
text-align:center;
padding:14px16px;
text-decoration:none;
}
lia:hover,.dropdown:hover.dropbtn{
background-color:#1f75cf;
}
li.dropdown{
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
background-color:#fafafa;
min-width:160px;
box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
}
.dropdown-contenta{
color:black;
padding:12px16px;
text-decoration:none;
display:block;
text-align:left;
}
.dropdown-contenta:hover{
color:white;
background-color:#1f75cf;
}
.show{
display:block;
}

JavaScript (script.js):

functionshowList(o){
hideList("dropdown-content"+o.id);
document.getElementById("dropdown-"+o.id).classList.toggle("show");
}


functionhideList(option){
vardropdowns=document.getElementsByClassName("dropdown-content");

for(vari=0;i<dropdowns.length;i++){
varopenDropdown=dropdowns[i];
if(openDropdown.id!=option){
if(openDropdown.classList.contains('show')){
openDropdown.classList.remove('show');
}
}
}
}


window.onclick=function(e){
if(!e.target.matches('.dropbtn')){
hideList("");
}
}

点击标题 A：

JSFiddle 调试：jsfiddle.net/soL73u4y/2/

阅读全文

html5下拉菜单

与html5下拉菜单相关的阅读推荐