使用CSS的2級下拉列表

-1

我有一個下拉列表。但是，它運行不正常。在第一級，我將鼠標懸停在論壇上，並且工作正常。但是，'數碼論壇'和'政治論壇'不應該出現，直到'新加坡論壇'徘徊。使用CSS的2級下拉列表

我似乎無法編輯我的代碼，使這種情況發生。真的很感激，如果有人可以幫助我。如果的jsfiddle被用於呈現回答得很好巨大的感謝提前

HTML：！

<!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> 
<link href="design.css" rel="stylesheet" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Standard Chartered Bank</title> 

</head> 
<body> 
<div id="menu"> 
    <ul> 
     <li><a href="#">Google</a></li> 
     <li><a href="#">FB</a></li> 
     <li><a href="#" >Twitter</a></li> 
     <li><a href="#" >Forum</a> 
      <ul> 
       <li><a href="#">HardWare Zone</a></li> 
       <li><a href="#">Singapore Forum</a> 
        <ul> 
         <li><a href="#">Digital Forum</a></li> 
         <li><a href="#">Politics Forum</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<div id="form"> 
    <br> 
    <form action="welcome.php" method="post"> 
    <br> 
    <formspace>Name:</formspace><input type="text" name="fname" class="bord"><br> 
    <formspace>Age:</formspace> <input type="text" name="age" class="bord"><br> 
    <input type="submit"> 
    </form> 
</div> 
</body> 
</html>

CSS

@charset "utf-8"; 
    /* CSS Document */ 
    #menu{ 
     width: 1200px; 
     height: 35px; 
     font-family: Arial 
     font-size: 13px; 
     padding:0;  
     background-color:#F23; 
     text-align: center; 
     z-index:1; 
    } 
    #menu ul{ 
     margin:auto; 
     width:240px; 
     height:35px; 
     text-align:center; 
     padding:0; 
    } 
    #menu li{ 
    float:left; 
    padding: 0; 
    height:35px; 
    width:60px; 
    list-style-type: none; 

    position:relative; 
    } 

    #menu li a{ 
     color:#000; 
    } 
    #menu ul li ul{ 
     display:none; 
     width:150px; 
    } 
    #menu ul li:hover{ 
     background-color:blue; 
    } 
    #menu ul li:hover ul{ 
     display:block; 
     position:relative; 
     top:14px; 
     float:none; 

    } 
    #menu ul li ul li{ 
     width:140px; 
     height:35px; 
     list-style-type: none; 
     padding:5px; 
     float:none; 
    } 

    #menu ul li ul li:hover ul{ 
     display:block; 
     position:relative; 
     left:145px; 
     top:-25px; 
     float:none; 
    } 

    #menu ul li ul li ul li{ 
     list-style-type: none; 
     width:120px; 
    } 
    formspace{ 
     width:70px; 
     float:left; 
    } 
    input.bord{ 
    border-radius: 5px; 
    border-width:2px; 
    border-style: solid; 
    }

來源

2013-05-07 mrghost1988

是否缺少你的JavaScript，或者你想這一切只用CSS？ – 2013-05-07 19:16:38

我只是用css做的。 – mrghost1988 2013-05-07 19:20:35

固定這兩個CSS，你需要SPECI只有直接的孩子ul纔會出現在懸停中。你錯過了>選擇器。所以當你將鼠標懸停在父窗口上時，它基本上會讓所有的ul顯示出來（包括子菜單）。

Read Child Selectors

Demo

#menu ul li:hover > ul{ 
    display:block; 
    position:relative; 
    top:14px; 
    float:none; 

} 


#menu ul li ul li:hover > ul{ 
    display:block; 
    position:relative; 
    left:145px; 
    top:-25px; 
    float:none; 
}

來源

2013-05-07 19:20:30 PSL

哇。非常感謝PSL！我可以知道'>'做什麼嗎？它是如何解決我的問題的？ – mrghost1988 2013-05-07 19:22:09

它的作用是，你的風格將只適用於直立的孩子ul of。缺少那個選擇器將選擇所有的懸臂下的李。 hecne所有的菜單都出現了。 – PSL 2013-05-07 19:24:30

@ mrghost1988如果您對解決方案和信息感到滿意，請標記爲已接受的答案。 – PSL 2013-05-07 19:25:08

嘗試增加「>」這個規則：

#menu ul li:hover > ul { 
display:block; 
position:relative; 
top:14px; 
float:none; 
}

來源

2013-05-07 19:26:55 hmhcreative

使用CSS的2級下拉列表

回答

相關問題