【发布时间】：2013-04-01 12:15:11
【问题描述】：
我正在尝试在背景图像上叠加背景颜色（蓝色）。我有一个要显示在背景颜色上方的菜单。我试过使用 z-index 属性，但它不适合我。我确定它与菜单的属性有关，但我被卡住了。我尝试将菜单放在另一个 div 中，但无法正确设置 div 尺寸。
这是我的索引页。
<link rel="stylesheet" type="text/css" href="Practice.css">
</head>
<body background="http://localhost/jim/BatikVilla/Background.jpg">
<div id='blue'>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index2.php'>Home</a></li>
<li class='has-sub '><a href='Product.php'>Products</a>
<ul>
<li class='has-sub '><a href='Men.php'>Men</a>
<ul>
<li><a href='Sarong.php'>Sarong</a></li>
<li><a href='Shirt.php'>Shirt</a></li>
<li><a href='MenSlipper.php'>Slipper</a></li>
</ul>
</li>
<li class='has-sub '><a href='Women.php'>Women</a>
<ul>
<li><a href='DarGyi.php'>DarGyi</a></li>
<li><a href='LongDress.php'>Long Dress</a></li>
<li><a href='WomenSlipper.php'>Slipper</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='About.php'>About</a></li>
<li><a href='Contact.php'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
和我的 CSS
<style>
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#blue{
height:400px;
background-color:blue;
}
#cssmenu{
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
background:#fff;
position:relative;
}
div ul {
float:right;
list-style: none;
margin:0;
padding: 0;
position: relative;
right:50%;
}
div ul:after {
content: ""; clear: both; display: block;
}
div ul li {
float: left;
margin:0 0 0 1px;
padding:0;
position:relative;
left:50%;
top:1px;
}
div ul li:hover {
background: #4b545f;
}
div ul li:hover a {
color: #fff;
}
div ul li a {
display: block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#ddd;
color: #444;
text-decoration: none;
}
div ul ul {
display:none;
position: absolute;
top: 2em;
left:0;
right:auto;
width:10em;
}
div ul li:hover > ul {
display: block;
}
div ul ul li {
left:auto;
margin:0;
clear:left;
width:100%;
}
div ul ul li a {
padding: 15px 40px;
color: #fff;
}
div ul ul li a:hover {
background: #4b545f;
}
div ul ul ul {
position: absolute;
left: 100%;
top:0;
}
如果可以，请帮助我。
【问题讨论】：
-
您能否更清楚地了解您想要实现的目标？从它听起来（和看起来）的样子来看，您希望页面上有一个背景图像，然后是页面结构中具有蓝色背景的 DIV 元素。对吗？
-
是的，没错。基本上，想象一个盒子里的盒子。外框是页面，整个框的背景图像是“x”。内框有背景颜色（蓝色）。内框还显示一个下拉菜单，将来可能会更多。我不确定使用 DIV 元素是否是实现它的唯一方法，但可以肯定的是，使用 div 元素。我希望这有助于澄清。
-
好的，听起来很简单。我会发布一个答案，我们可以从那里继续。
-
只要确保下拉菜单保持原样并居中即可。我已经取得了一些进展，但只是以牺牲我的菜单为代价。提前致谢。
-
我正在重写您从头开始提供的整个 sn-p，以帮助清理它并向您解释一些事情。当我这样做时，您是否能够提供您正在尝试执行的操作的屏幕截图（包括菜单位置等）？只需简单的框即可 - 您可以使用 www.tinypic.com 之类的服务轻松上传。 // 编辑：不用担心解释子菜单，只需要一个框来说明导航无序列表相对于父元素的位置就可以了