Question

我是CSS新手我试图学习如何使用CSS创建菜单。我创建它但发现了一个问题。它在其他浏览器中工作正常但在chrome中没有。我没有得到什么问题。

以下是此菜单中使用的样式表。

#main
{width: 150px;}

#main ul,
#main li,
#main a,
{

  padding: 0px;
 border: 0px;
margin: 0px;

}

#main ul,#main li
{
 list-style-type: none;
}

ul#main li > a
{
display: block;
    position: relative;
    width: 100px;
    padding-left:10px;
    text-align: left;
align: center;
    height: 32px;

    color: #FFFFFF;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
}

ul#main > li
{
  padding:0px 0px 5px 5px;
  background-color: #E44d2e;
 align:center;
border-bottom: solid 1px;

}



 ul#submenu
{
position: relative;
z-index: 10;
float: right;
border-bottom: solid 1px;
 border: 0px;
height: 0px;
overflow: hidden;
display:none;

}

ul#main li:hover
{
height: 40px;
padding: 0px 0px 0px 0px;
width: 150px;
display:block;
  background-color:#ec633f;

border-bottom: solid 1px;
text-align:center;



}

ul#main li:hover > ul#submenu
{
position: relative;
z-index: 10;
float: none;
top: -32px;
left: 150px;
margin: 0px;
height: auto;
 padding: 0px 0px 0px 0px;
display:block;
  background-color: #f9e5cc;
color: black;



}

ul#submenu li:hover
{

z-index: 10;
  float: none;
 margin: 0px;
 height: auto;
 padding: 0px 0px 0px 0px;
display:block;
 background-color: #f3d8bd;

}


ul#submenu li > a
{ 
color: black;
}
</style>

以下是使用的代码也创建了html菜单

<ul id="main">
<li > <a href="#">Google</a><ul id="submenu"><li><a href="#">Test 1</a></li><li><a href="#">Test 1</a></li></ul></li>
<li id="submenu"><a href="#"> Microsoft</a><ul id="submenu"><li ><a href="#" >Test 1</a></li><li><a href="#">Test 1</a></li></ul></li>
<li > <a href="#">Apple</a><ul id="submenu"><li><a href="#">Test 1</a></li><li><a href="#">Test 1</a></li></ul></li>
<li > <a href="#">IBM</a><ul id="submenu"><li><a href="#">Test 1</a></li><li><a href="#">Test 1</a></li></li></ul></li>
</ul>

以上代码的工作示例出现在：[工作代码] http://techisquest.blogspot.in/2013/04/simple-css-menu.html

Answer 1

在大部分R和D之后我发现了这个问题。 CSS中使用的以下选择器是错误的：

ul#submenu li:hover


ul#submenu li > a

这些应该像

ul#main  li ul#submenu li:hover

and 

ul#main  li ul#submenu li a:hover

上述更改解决了我的问题。

悬停不在chrome中工作，但使用IE，safari，firefox

1 个答案: