用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）

随便打开网上的任何一个网站，你会发现这些网站都有导航部分，而且有些导航在鼠标经过后，会出现下拉菜单，那这种下拉菜单怎么做呢？其实，用纯CSS就可以做导航下拉菜单。接下来，就和大家聊聊CSS怎么做下拉菜单，好，进入正题。

HTML 部分：
1、我们可以使用任何的 HTML 元素来打开下拉菜单，如：或 a 元素
2、使用容器元素 (例如

) 来创建下拉菜单的内容，并放在任何你想放的位置上。
3、使用

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
1、.dropdown 使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
2、.dropdown-content 中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% 。
3、:hover 选择器用于将鼠标移动到下拉按钮上时显示下拉菜单。

实例：用纯CSS做一个导航下拉菜单，当鼠标经过时出现下拉菜单

HTML代码：

<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
   <button class="dropbtn">下拉菜单</button>
   <div class="dropdown-content">
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
   </div>
  </div>

CSS部分：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   }   
   .dropdown {
    position: relative;
    display: inline-block;
   }
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

看效果图片：

以上用实例展示了纯CSS怎么做下拉菜单，在实际项目中，可以根据需要，设置需要的样式！

Atas ialah kandungan terperinci 用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7526

15

Tutorial CakePHP

1378

52

Apakah format nama akaun stim

81

11

kunci pengaktifan win11 kekal

54

19

Sambungan NYT menunjukkan dan jawapan

21

74

Tunjukkan Lagi