我试图让我的透明菜单居中显示,但是无论我从互联网上找到什么方法,似乎都没有任何效果。
如果有人可以查看此代码并帮助我,我真的很高兴。:)
HTML部分:
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li><a href="print">PRINT</a></li>
<li><a href="tv">TV</a></li>
<li><a href="other">OTHER</a></li>
<li><a href="resume">RESUME</a></li>
</ul>
</div>
CSS部分:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}