<form id="bhp1t"></form>

<em id="bhp1t"></em>

    <form id="bhp1t"></form>

      操作方法:在鼠標經過后使用純CSS實現下拉菜單,并附有示例說明(代碼)

      電腦雜談  發布時間:2020-10-17 05:03:55  來源:網絡整理

      網頁制作鼠標移過去就有菜單出現_網頁制作鼠標移過去就有菜單出現

      元素來包裝這些元素,并使用CSS設置下拉內容的樣式。

      CSS部分:

      1、.dropdown使用position:relative,這會將下拉菜單的內容設置為放置在下拉按鈕的右下角(使用position:absolute)。

      網頁制作鼠標移過去就有菜單出現_網頁制作鼠標移過去就有菜單出現

      2、.dropdown-content是實際的下拉菜單。默認情況下它是隱藏的,并在鼠標移至指定元素后顯示。注意:如果要將下拉內容設置為與下拉按鈕的寬度相同,則可以將寬度設置為100%。

      3、:當鼠標移到下拉按鈕上時,懸停選擇器用于顯示下拉菜單。

      示例:使用純CSS制作導航下拉菜單,并在鼠標經過時顯示該下拉菜單。

      網頁制作鼠標移過去就有菜單出現_網頁制作鼠標移過去就有菜單出現

      HTML代碼:

      純CSS實現鼠標移動到按鈕上打開下拉菜單。

      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;
         }

      查看效果圖:

      導航菜單.jpg

      網頁制作鼠標移過去就有菜單出現_網頁制作鼠標移過去就有菜單出現

      以上示例顯示了如何在純CSS中創建下拉菜單。在實際項目中,您可以根據需要設置所需的樣式!

      上面是使用純CSS在鼠標經過后實現下拉菜單。示例說明的詳細內容(帶有代碼),請注意php中文網站上的其他相關文章!

      本文最初發布在php中文網站上。請注明轉載來源。謝謝您的尊重!

      主題建議:CSS下拉菜單

      上一篇文章:有關溢出屬性的CSS技巧,有關溢出屬性的介紹下一篇文章:什么是CSS選擇器? CSS3中5個常見的基本選擇器(代碼示例)


      本文來自電腦雜談,轉載請注明本文網址:
      http://www.humishu.com/a/bofangqi/article-326583-1.html

        相關閱讀
        發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

        熱點圖片
        拼命載入中...
        黄色电影免费片日本大片 - 视频 - 在线观看 - 影视资讯 -心晴网