看看http://www.habitatlandscape.co.uk/
在 Firefox 甚至 Internet Explorer (!!!) 中,弹出式菜单完美地显示出来,在白色条带中垂直居中,并且总是从最左侧开始。
在 Chrome 中,菜单在 parent 下水平开始li
,而不是垂直居中。我可以通过将 webkit 定位到不同的位置来修复垂直对齐,但我无法修复水平对齐。
为什么 Webkit 忽略position:absolute;left:0;
?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML(CMS 生成):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><a href="http://www.habitatlandscape.co.uk/about-us/"><span>Company History</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/about-us/meet-the-team/"><span>Meet The Team</span></a></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><a href="http://www.habitatlandscape.co.uk/portfolio/"><span>View before, during and after photos from recent projects</span></a></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><a href="http://www.habitatlandscape.co.uk/services/design/"><span>Design</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/patios/"><span>Patios</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/decking/"><span>Decking</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/turf/"><span>Turf</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/ponds/"><span>Ponds</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/driveways/"><span>Driveways</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/fencing/"><span>Fencing</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/electrics/"><span>Electrics</span></a></li>
<li><a href="http://www.habitatlandscape.co.uk/services/garden-structures/"><span>Structures</span></a></li>
</ul>
</li>
</ul>
// etc
</div>