CSS下拉菜單簡單制作方法介紹

來源：懂視網責編：小OO 時間：2020-11-27 18:52:50

CSS下拉菜單簡單制作方法介紹

<。<；/p>；<；p class="；dropdown"；>；<；span>；鼠標移動到我這。<；/span>；<；p class="；dropdown-content"；>；<；p>；Gxl網<；/p>；<；p>；www.gxlcms.com<；/p>；<；/p>；<；/p>；<；/body>；<；/html>；；相關文章。CSS 下拉菜單；CSS 下拉菜單詳解。簡單帶下劃線跟隨效果的CSS3下拉菜單特效。

推薦度：

點擊下載本文 文檔為doc格式

導讀<。<；/p>；<；p class="；dropdown"；>；<；span>；鼠標移動到我這。<；/span>；<；p class="；dropdown-content"；>；<；p>；Gxl網<；/p>；<；p>；www.gxlcms.com<；/p>；<；/p>；<；/p>；<；/body>；<；/html>；；相關文章。CSS 下拉菜單；CSS 下拉菜單詳解。簡單帶下劃線跟隨效果的CSS3下拉菜單特效。

本文實例為大家分享了CSS下拉菜單的具體實現代碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
<head>
 <title>下拉菜單實例</title>
 <meta charset="utf-8">
 <style>
 .dropdown { 
 position: relative; 
 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); 
 padding: 12px 16px; 
 } 
 .dropdown:hover .dropdown-content { 
 display: block; 
 } 
 </style>
</head>
<body>
<h2>鼠標移動后出現下拉菜單</h2>
<p>將鼠標移動到指定元素上就能看到下拉菜單。</p>
<p class="dropdown">
 <span>鼠標移動到我這！</span>
 <p class="dropdown-content">
 <p>Gxl網</p>
 <p>www.gxlcms.com</p>
 </p>
</p>
</body>
</html>

QQ截圖20170320115023.png