CSS下拉菜单简单制作方法介绍-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS下拉菜单简单制作方法介绍

Mar 20, 2017 am 11:49 AM

css menu lungsur turun

本文实例为大家分享了CSS下拉菜单的具体实现代码，供大家参考，具体内容如下

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;下拉菜单实例&lt;/title&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;style&gt;
  .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;   
  }   
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;鼠标移动后出现下拉菜单&lt;/h2&gt;
&lt;p&gt;将鼠标移动到指定元素上就能看到下拉菜单。&lt;/p&gt;
&lt;p class=&quot;dropdown&quot;&gt;
  &lt;span&gt;鼠标移动到我这！&lt;/span&gt;
  &lt;p class=&quot;dropdown-content&quot;&gt;
    &lt;p&gt;php中文网&lt;/p&gt;
    &lt;p&gt;www.php.cn&lt;/p&gt;
  &lt;/p&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

QQ截图20170320115023.png

CSS 下拉菜单

CSS 下拉菜单详解

简单带下划线跟随效果的CSS3下拉菜单特效

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