我想知道是否有人能帮我解决一个CSS / HTML问题。
我有一张复杂的背景图片。菜单div定位在正确的位置，以覆盖它所需要覆盖的背景。整个LI都有一个鼠标悬停时显示为块级元素的图像。结果是当鼠标悬停在列表href上时，整个块的悬停效果都会起作用。
然而，问题出现在我尝试添加填充来创建列表项文本和其边框之间的缓冲区时。一些奇怪的事情开始发生了……我会添加一个屏幕截图。需要填充才能将其从边框移动。
第二个存在的问题是，如果不应用行高，我无法将文本垂直对齐到中间。这种解决方法很好用，直到项目换行……我需要能够换行菜单项文本……
下面的示例显示了当前CSS / HTML状态。菜单栏和悬停效果均按预期放置。但由于新用户发布限制，我无法将图片放在此处。您可以在213.40.100.100 / example1.jpg找到该示例。
下面的示例显示了添加填充或外边距后的状态。LI似乎完全移动了，而内部文本没有移动……
213.40.100.100 / example2.jpg
<div id="wrapper">
<div
id="header">Header</div> <div
id="menu">
<ul>
<li><a>Contact Us</a></li>
<li><a>Recommends</a></li>
<li><a>Deals</a></li>
<li><a>Home</a></li>
</ul> </div> <div id="content">Content</div>
<div id="footer">Footer</div>
</div>
@charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
body {
padding-top: 10px;
background: url(background.jpg) no-repeat center top; height:100%;
}
div#wrapper {
margin: auto;
height: 100%;
width: 978px;
min-width: 978px;
}
div#header {
height: 196px;
}
div#menu {
height: 69px;
position:
relative;
}
div#menu ul {
height: 69px;
list-style-type: none;
}
div#menu ul li {
display: block;
height: 69px;
width: 140px;
float: right;
padding: 5px;
}
div#menu ul li a:hover {
display:block;
background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#menu ul li a {
text-decoration: none;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
div#content { margin-top: 80px; }