CSS滾動菜單

以下代碼創建隱藏子菜單的頁面。我期待在鼠標懸停主菜單的標題時顯示它並且不能這樣做。下面是代碼：CSS滾動菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; 
<html xmlns="http://www.w3.org/1999/xhtml">; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" /> 
<style type="text/css"> 
    #menu ul > #menu1 ul 
    { 
    display:none; 
} 

#menu ul li a:hover 
      { 
      #menu ul > #menu1 ul{display:block;} 
      } 
</style> 
</head> 
<body> 
<div id="menu"> 
    <ul> 
     <li><a href="#">abc</a> 
      <ul> 
<div id="menu1">  
        <ul> 
         <li><a href="#">1</a></li> 
         <li><a href="#">2</a></li> 
          <li><a data-href="#">3</a></li> 
        </ul> 
        </div> 
      </ul> 
     </li> 
    </ul> 
</div> 
</body>

誰能告訴我，請我在哪裏出了錯在該代碼？如何在「abc」懸停時顯示子菜單？非常感謝

來源

2012-03-31 deotpit

FWIW，http://jsfiddle.net/是一個偉大的網站，用於構建這樣的問題演示 – dldnh 2012-03-31 18:24:25

親愛的看到我的答案，並讓我知道如果有任何問題或者我落後於某個地方。 – w3uiguru 2012-03-31 18:37:00

看到小提琴和演示：

小提琴：http://jsfiddle.net/rYaM3/3/

演示：http://jsfiddle.net/rYaM3/3/embedded/result/

SS：

enter image description here

來源

2012-03-31 18:35:38 w3uiguru

謝謝Dinesh。對不起，我只有現在連接。 – deotpit 2012-04-01 11:57:18

其確定親愛的沒有問題，請不要說對不起。 – w3uiguru 2012-04-01 11:59:02

不幸的是，你不能嵌套CSS塊

你能做什麼，但是，是有div您li內，並使用CSS只有當在下面的代碼li

注意#menu ul li:hover div懸停申請樣式的div。該div經受風格只在一個li:hover這招應該幫助你得到你正在尋找上的jsfiddle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1255" /> 
    <style type="text/css"> 
    #menu ul li div 
    { 
     display:none 
    } 

    #menu ul li:hover div 
    { 
     display: block 
    } 
    </style> 
    </head> 
<body> 
    <div id="menu"> 
     <ul> 
      <li><a href="#">abc</a> 
      <div id="menu1">  
       <ul> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a data-href="#">3</a></li> 
       </ul> 
      </div> 
     </li> 
     </ul> 
    </div> 
</body>

演示菜單效果：http://jsfiddle.net/f2kp2/1/

來源

2012-03-31 18:38:13

嗨Elvis，非常感謝你的回答，它類似Dinesh的第一個答案，因此選擇它作爲「答案」，但是你的答案同樣具有啓發性。 – deotpit 2012-04-01 17:52:36

回答

相關問題