I have this website in which a I have a menu. The CSS for this menu works perfectly fine on Mozilla Firefox and IE but does not work in chrome. In chrome the sub menu is underneath the photo by it but in FF and IE its above(as it should be). At the same time the submenu is a bit above it's position in FF and IE. Here is the code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
background-image: url(Pictures/Plundergem-Title.png);
background-repeat: no-repeat;
background-position: 50% 0%;
height: 1500px;
}
.menu-list {
list-style-type: none;
color: #E92A27;
font-family: "Mayan Font";
font-size: 36px;
}
.menu-list li {
cursor: pointer;
}
.menu-list li a:hover {
background-color: #E92A27;
color: #000;
}
.menu-list li ul li a:hover {
background-color: #E92A27;
color: #000;
}
.menu-list li ul li a {
color: #E92A27;
text-decoration: none;
}
.menu-list li a {
text-decoration: none;
color: #E92A27;
}
@font-face{
src:url(CFCivilisationMaya-Regular.woff);
font-family:"Mayan Font";
}
.menu-block {
width: 200px;
position: fixed;
top: 200px;
left: -23px;
border-right: 3px solid #E92A27;
}
#menu-seperation {
width: 150px;
position: fixed;
left: 20px;
top: 270px;
}
#flash-container {
position: relative;
height: 500px;
width: 700px;
left: 300px;
top: 700px;
color: #FFF;
font-family: "Text Font";
font-size: 18px;
z-index: 1000;
}
#flash-container p {
color: #FFF;
font-family: "Text Font";
}
@font-face{
font-family:"Text Font";
src:url(CataneoBT-Regular.woff);
}
.scenemenu {
list-style-type:none;
color:#E92A27;
font-family:"Mayan Font";
position:fixed;
top:297px;
left:189px;
z-index:2000;
width:150px;
display:none;
}
.scenemenu li {
position:relative;
left:-50px;
z-index:2000;
}
#scenebutton:hover ul.scenemenu {
display:inline;
}
.scenemenu:hover {
display:inline;
}
#pic1 {
z-index:1000;
}
a:visited {
color:#E92A27;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-scrollto.js"></script>
<script src="animation.js"></script>
<link rel="shortcut icon" href="Pictures/Gem Icon.png" />
<title>Plundergem Adventure Game</title>
</head>
<body>
<div class="menu-block">
<ul class="menu-list">
<li><a href="index.php">HOME</a>
</li>
<hr id="menu-seperation" />
<br style="line-height: .3em" />
<li id="scenebutton">SCENES
<ul class="scenemenu">
<li><a href="Enter the Temple 2nd Scene/index.php">SCENE 2</a>
</li>
<li><a href="Go Downstairs 3rd Scene/index.php">SCENE 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="flash-container">
<img src="Pictures/Scene_1_converted.jpg" width="700" height="504" id="pic1" />
<p>The sky is dark, the grass is dark, and even the dark is quite dark. This will do a perfect job of setting the mood. Unfortunately, it is raining, meaning that you will be unable to pull off your uncanny Batman impressions. Will you climb the temple
stairs, or will you head home?</p>
<br />
<a href="Enter the Temple 2nd Scene/index.php"><u>1. Climb the temple stairs in an over manly fashion.</u></a>
<br />
<br />
<a><u>2. Run away and never come back.</u></a>
</div>
</body>
</html>screen shot - left is firefox right is chrome 
