I am trying to overlay a background color (blue) on top of a background image. I have a menu that I want to appear above the background color. I've tried using the z-index property, but it is not working for me. I'm sure it has something to do with the properties of the menu, but I'm stuck. I've tried putting the menu inside of another div, but I can't get the div dimensions correct.This is my index page. \[code\]<link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15736932/Practice.css"></head><body background="http://localhost/jim/BatikVilla/Background.jpg"><div id='blue'><div id='cssmenu'><ul> <li class='active'><a href='http://stackoverflow.com/questions/15736932/index2.php'>Home</a></li> <li class='has-sub '><a href='http://stackoverflow.com/questions/15736932/Product.php'>Products</a> <ul> <li class='has-sub '><a href='http://stackoverflow.com/questions/15736932/Men.php'>Men</a> <ul> <li><a href='http://stackoverflow.com/questions/15736932/Sarong.php'>Sarong</a></li> <li><a href='http://stackoverflow.com/questions/15736932/Shirt.php'>Shirt</a></li> <li><a href='http://stackoverflow.com/questions/15736932/MenSlipper.php'>Slipper</a></li> </ul> </li> <li class='has-sub '><a href='http://stackoverflow.com/questions/15736932/Women.php'>Women</a> <ul> <li><a href='http://stackoverflow.com/questions/15736932/DarGyi.php'>DarGyi</a></li> <li><a href='http://stackoverflow.com/questions/15736932/LongDress.php'>Long Dress</a></li> <li><a href='http://stackoverflow.com/questions/15736932/WomenSlipper.php'>Slipper</a></li> </ul> </li> </ul> </li> <li><a href='http://stackoverflow.com/questions/15736932/About.php'>About</a></li> <li><a href='http://stackoverflow.com/questions/15736932/Contact.php'>Contact</a></li></ul></div></div></body></html>\[/code\]and my CSS\[code\]<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;}\[/code\]Please help me if you can.
Overlay background color and image
- Thread starter never
- Start date