0

背景画像の上に背景色 (青) を重ねようとしています。背景色の上に表示したいメニューがあります。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;
}

できれば助けてください。

4

1 に答える 1