使用css轉換懸停時滑動菜單的問題

我想創建一個帶滑動子菜單項的菜單欄。爲此，我編寫了下面的代碼，但轉換（下滑）效果在懸停時無效。我只想用css來做。有人請幫助我。使用css轉換懸停時滑動菜單的問題

<html> 
    <head> 
     <style type="text/css"> 
      .menu { 
       width: 100%; 
       background-color: rgba(250,250,250,0.9); 
       box-shadow: 0 2px 2px -2px rgba(0,0,0,0.6); 
      } 
      .menu ul{ 
       list-style: none; 
       color: #31373d; 
       padding: 0; 
       margin: 0px 20px; 
       position: relative; 
      } 
      .menu ul li{ 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
      .menu > ul { 
       z-index: 0; 
      } 

      .menu > ul > li { 
       display: inline-block; 
       padding: 5px 10px; 
       margin: 0; 
       margin-right: 5px; 
       position: relative; 
       cursor: pointer; 
       text-shadow: 1px 2px 2px white; 
      } 
      .menu ul ul { 
       display: none; 
       height: 0px; /* Height initially set to 0 */ 
       overflow: hidden; 
       background: #f0f0f0; 
       -moz-transition: height 0.5s linear; 
       text-shadow: 1px 2px 2px #f0f0f0; 
       box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1); 
       z-index: 2; 
       border: 1px solid #a0a0a0; 

       -webkit-transition: height 0.3s linear; 
       -moz-transition: height 0.3s linear; 
       -o-transition: height 0.3s linear; 
       -ms-transition: height 0.3s linear; 
       transition: height 0.3s linear; 
       left: -23px; 
       top: 45px; 
      } 



      .menu > ul > li:hover ul { 
       display: block; 
       height: auto; /* Height set to auto for the transition to take effect */ 
       position: absolute; 
      } 
      .menu ul ul li{ 
       width: 200px; 
       height: 40px; 
       line-height: 40px; 
       border-bottom: 1px solid #a0a0a0; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="menu"> 
      <ul> 
       <li class="newbox">Home 
        <ul> 
         <li>City Home</li> 
         <li>Country Home</li> 
        </ul> 
       </li> 
       <li class="newbox">About 
        <ul> 
         <li>About Me</li> 
         <li>About others</li> 
         <li>About my family</li> 
        </ul> 
       </li> 
       <li class="newbox">Contact 
        <ul> 
         <li>Contact Me</li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

感謝

來源

2014-02-14 Bharat

不能使用height:auto過渡元素的高度。您必須使用最大高度或特定像素高度才能使轉換生效。

.menu > ul > li:hover ul { 
    display: block; 
    height: 550px;  /* Change from auto to a large number */ 
    max-height: 100px; /* Add a max-height to prevent it from getting too large */ 
    position: absolute; 
}

假設你使用正確的>運營商，這應該能正常運行。

來源

2014-02-14 14:03:42 Adosi

它仍然無法正常工作。請幫忙！ – Bharat

實際高度：自動;在mozilla firefox和konqueror中打開頁面時，可以正常工作。你已經忘記了一件事情，我想這就是你的問題。我強烈建議使用好的編輯器，如記事本+ +，如果你使用Windows，或者凱特或藍魚，如果你使用Linux。他們可以設置爲向你展示顏色，開始和結束的提示 - 每個（）[] {}等，這樣你可以更好地工作，而不會絆倒可能容易漏掉的錯誤，特別是當你累了或分心。

檢查出來：

.menu ul li{ 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
      .menu > ul { 
       z-index: 0; 
      }

爲了工作，它應該是：

.menu ul li { 
       height: 35px; 
       line-height: 35px; 
       font-weight: 600; 
       width: 100px; 
       text-align: center; 
} 
      .menu > ul { 
       z-index: 0; 
      }

一個錯誤的charaker仍然花費了我們的時間，金錢和神經細胞。高級編輯器的使用可節省大量時間，精力和頭痛。

來源

2015-07-31 15:38:46 user5178505

使用css轉換懸停時滑動菜單的問題

回答

相關問題