當前位置：首頁 » 編程語言 » 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下拉菜單相關的閱讀推薦