Html+Css水平下拉導航欄
效果圖：
直接拷貝編輯器即可執行；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平下拉導航欄</title>
<style type="text/css">
body { /*設定內容與瀏覽器邊框無間距*/
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none; /*去除li前的標註*/
background-color: #333;
overflow: hidden; /*隱藏溢位的部分，保持一行*/
}
li {
float: left; /*左浮動*/
}
li a, .dropbtn {
display: inline-block; /*設定成塊*/
color: white;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn { /*滑鼠移上去，改變背景顏色*/
background-color: #111;
}
.dropdown {
/*display:inline-block將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，允許空格。*/
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
display: block;
color: black;
padding: 10px 15px;
text-decoration:none;
}
.dropdown-content a:hover {
background-color: #a1a1a1;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active">主頁</a></li>
<li><a href="#">新聞</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉選單</a>
<div class="dropdown-content">
<a href="#">連結01</a>
<a href="#">連結02</a>
<a href="#">連結03</a>
</div>
</div>
</ul>
</body>
</html>
有像業餘開店的，推薦 貝店，應用市場下載“貝店”，註冊填寫邀請碼即可；
我的邀請碼是：1530973
歡迎加入我的公眾號“生活與認知”：
相關推薦
Html+Css水平下拉導航欄
效果圖： 直接拷貝編輯器即可執行； <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平下拉導航欄</title> <
html+css實現下拉菜單
eight lock 二級 charset type 菜單顯示 位置 去除 relative <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
HTML用DIV/CSS實現下拉列表
HTML程式碼： <body> <div class="title" > <h1>SYROS</h1> <ul> <li><a href="">HOME<
純CSS實現下拉選單導航
前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。 －－－－－－－－－－－－－－－－
jquery+css實現下拉列表
aps otto ddc () splay app lec and cti <!DOCTYPE html><html><head><meta charset="UTF-8"><title>fruit</tit
CSS：下拉菜單模板
java nav red align script charset span con 模板 <!DOCTYPE html><html> <head> <meta charset="utf-8">
h5,用css實現下拉列表
gin clas isp pla mar ack 實現 寬高 doc <!DOCTYPE html><html><head><meta charset="utf-8"><style> ul li{ list-st
CSS實現下拉菜單的幾種方法
ansi display ora ble 下拉 技術 body round too PS:轉自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一種:display:none和display:block切換 1 &l
純css修改下拉列表select的默認樣式
png add OS 覆蓋 lec pad repeat 自定義 -c select的一些默認樣式我們很難修改，比如圖標的替換。接下來就說說如何修改這些默認樣式： html代碼： <div> <select name="">
在HTML中的下拉框中怎樣實現超連接?
-h light targe 窗口 ext html中 http com tex 給你個例子自己改吧：<SELECT name="select" onchange="window.open(this.options[this.selectedIndex].value,
用純css改變下拉列表select框的默認樣式
隱藏 如何 pos share ack rop href static image 在這篇文章裏，我將介紹如何不依賴JavaScript用純css來改變下拉列表框的樣式。 事情是這樣的，您的設計師團隊向您發送一個新的PSD（Photoshop文檔），它是一個新的網站的最終設
css - bootstrap3下拉菜單點擊之後怎麽改變背景顏色?
點擊 open nav 背景 trap boot 添加 focus default css添加 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focu
CSS的下拉選單被擋住，修改Z-INDEX也不成功
CSS的下拉選單被擋住，修改Z-INDEX也不成功 做了一個滑鼠放上去就出現的下拉選單，但是這個下拉的內容被擋住了。 Z-INDEX 是設定不同塊的層次的，我修改了問題還是有。 後來發現是必須要把該便籤的父標籤的 position 屬性設定為 absolute 具體原
CSS實現自定義導航欄帶二級選單
程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &
SAP CRM訂單狀態下拉選單欄位裡的值是怎麼配出來的
From: Wang, Jerry Sent: Friday, January 20, 2017 12:17 PM Subject: 為什麼transaction type沒有維護status profile 仍然能看到Open, In Process 和Completed？ 這
css實現下拉選單
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none
使用純css更改下拉選單的預設樣式
目標樣式： 程式碼： <form> <select> <option>中國</option> </select&g
css 知識點2 --》導航欄
width 例項： p { max-height:50px; background-color:yellow; } CSS Display(顯示) 與 Visibility（可見性） 隱藏一
用CSS實現下拉選單功能(過於冗餘，此方法不建議)
<style> .dropdown{ position:relative; display:inline-block; } .dropbtn{ background-color:#4CAF50; color:white; padding:16
CSS設定下拉選單
<div class="nav"> <ul> <li> <a href="">nav item</a> <ul>