CSS code works in firefox and IE but not in chrome

Question

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 在此处输入图片说明

Answer 1

I have prepared a jsfiddle: http://jsfiddle.net/nd2jy6qg/

.menu-block {
  width: 200px;
  position: fixed;
  top: 200px;
  left: -23px;
  border-right: 3px solid #E92A27;
   z-index:10001;
}

The problem is the z-index in menu-block; it must be at least 1001 since flash-container has 1000;

CSS code works in firefox and IE but not in chrome

Question

1 answers

solution1
2 ACCPTED 2015-06-04 11:18:30

CSS code works in firefox and IE but not in chrome

Question

1 answers

solution1 2 ACCPTED 2015-06-04 11:18:30

solution1
2 ACCPTED 2015-06-04 11:18:30