Html5實現下拉菜單

不多說，直奔主題

<!--html代碼-->
<div>
			<ul>
				<li><a href="#home" class="active">主頁</a></li>
				<li><a href="#news">新聞</a></li>
				<li>
					<div class="dropdown">
            <a href="#" class="dropbtn">下拉菜單</a>
              <div class="dropdown-content">
                <a href="#">鏈接 1</a> 
                <a href="#">鏈接 2</a> 
                <a href="#">鏈接 3</a>
              </div>
					</div>
				</li>
				<li><a href="#about">關于</a></li>
			</ul>
			<h3>導航欄上的下拉菜單</h3>
			<p>鼠標移動到 "下拉菜單" 鏈接先顯示下拉菜單。</p>
		</div>

/*css代碼*/
ul {
			     list-style-type: none;
			     margin: 0;
			     padding: 0;
			     background-color: #999;
			     overflow: hidden;
			     /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(當li{float:left}時)。         來源鏈接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */
			 }
			
			 li {
			     float: left;
			 }
			
			 li a {
			     color: white;
			     padding: 14px 16px;
			     display: inline-block;
			     text-decoration: none;
			 }
			
			 li>a.active {
			     background-color: green;
			 }
			
			 li>a:hover:not(a.active),
			 .dropbtn:hover {
			     background-color: #555;
			 }
			
			 .dropdown-content {
			     display: none;
			     position: absolute;
			     /* 默認相對于<html>進行絕對定位 */
			     background-color: #f9f9f9;
			     min-width: 100px;
			     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
			 }
			
			 .dropdown-content a {
			     color: black;
			     display: block;
			     /* 因為<a>標簽不是塊元素，min-width:100px不會生效 */
			 }
			
			 .dropdown-content a:hover {
			     background-color: #f1f1f1;
			     color: deepskyblue;
			 }
			
			 .dropdown:hover .dropdown-content {
			     display: block;
           opacity: 0.9;/*下拉菜單半透明效果*/
			 }
			
			 /* 中間的空格表示，鼠標懸念在.dropdown上時，dropdown的子元素.dropdown-content變為塊元素 */
			 /* ### 待完善 ###   
			    因為.dropdown只用過一次，覺得可以刪除<div class="dropdown"></div>來減少代碼量，嘗試  將.dropdown:hover .dropdown-content {display: block;} 修改為.dropbtn:hover+.dropdown-content {display: block;} 并刪除<div class="dropdown"></div>后，鼠標懸停在“下拉菜單”上，會顯示下拉菜單， 但無法選中菜單中的“鏈接 x”， ### 為什么？該如何完善？ ###    
			 */

最終效果圖：

tml5移動端常用顯示隱藏菜單的實現，點擊側邊菜單內容展開，這些都是移動端頁面經常用到的

如下：

點擊菜單按鈕后

展開第三級菜單效果如下

實現方法

html結構代碼:

css:

樣式代碼有點多，想要源碼的可以私信找我要

javascript：

認情況下，當我們使用 Safari 或 iPhone 上的任何網絡瀏覽器訪問網站時會看到該網站的移動版本。雖然從地址欄手動請求桌面網站非常容易，但如果我們一直需要使用站點的完整桌面版本，可強制 Safari 將桌面站點加載到 iPhone 上。

蘋果 iPhone 手機的尺寸越來越大，再加上有了 HTML5，我們在手機上查看桌面網站并沒有想象的那么糟糕。正確設置后，Safari 即可加載網站的桌面版本，以下為強制 Safari 在 iPhone 上加載桌面站點的操作方法：

一：打開從 iPhone 主屏幕進入【設置】；

二：在設置菜單中，向下滾動并點擊【Safari】；

三：進入【 Safari 】后向下滾動，找到【請求桌面網站】；

四：在所有網站上自動請求桌面版本。

這樣設置后，訪問 Safari 中的任何網站就會自動進入該頁面的完整桌面版本。

當然了，我們仍然可以隨時通過點擊【aA】圖標并選擇【請求移動網站】來查看該網站的移動版本。

需要注意的是，Safari 只能在可用時顯示網站的桌面版本。例如，當我們嘗試訪問 Apple 官方網站時，將看到移動版而不是完整的桌面版網站。

在線咨詢

上一篇：第66節表單按鈕下拉選項及表單序列化-Web前端開發之JavaScript
下一篇：如何利用谷歌(google)翻譯對整篇PDF和word文檔進行翻譯

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html5實現下拉菜單

您的項目需求