我是 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