使用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级下拉列表

回答

相关问题