в Google Chrome страница неправильно отображается

265

03 июня 2018, 06:00

Файлы находятся не на локальном компе а на веб-хостинге. так,правильно(!) отображается страница в Firefox а в chrome вот так:

Страница отображается без стилей? Где искать причину?

* { 
    margin: 0; 
    padding: 0; 
   } 
#content { 
    position:absolute; 
    left:200px;	top:50px; bottom: 0; right:0; 
    height:800px; 
    background:white; 
    border: 2px solid black; 
} 
#sidebar { 
    position:absolute; 
    left:0; top:50px; bottom: 0; 
    width: 200px; 
	background:gray; 
    border: 2px solid black; 
} 
#footer { 
    position: absolute; 
    left:200px; top:850px; right:0; bottom:0; 
	background:gray; 
    border: 2px solid black; 
} 
#nav{ 
	 /* text-align:center; */ 
	/*  margin:0 auto; */ 
} 
ul{ width:100%; 
	height:50px; 
	margin:0 auto; 
	list-style:none; 
	height:50px; 
	background-color: #000;	 
}	 
li{ 
	display:block; 
	float:left; 
	font-family:Arial, sans-serif; 
	font-size:20px; 
	position:relative; 
} 
li a{ 
	color:#fff;   
	display:block; 
	height:50px; 
	padding:0 10px; 
	text-decoration:none; 
	line-height:50px; 
} 
li a:hover{ 
	background:#000080; 
} 
.submenu{ 
	position:absolute; 
	top:50px;  
	width:250px; 
} 
.submenu li{ 
	width:100%; 
	height:50px; 
	background:red; 
} 
.submenu li a{ 
	line-height:50px; 
	height:50px; 
}  
.submenu li a:hover{ 
	background-color:#000; 
} 
li:hover .submenu li{ 
	display:block; 
    z-index: 100;  
}

<!Doctype html> 
<html> 
 <head> 
  <title>Hello Word</title> 
 </head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" type="text/css" href="styles.css"> 
 
<body> 
  <div id="nav"> 
	  <ul> 
	    <li><a href="">Main</a> 
		  <ul class="submenu">  
		    <li><a href="#">link 1</a></li> 
		    <li><a href="#">link 2</a></li> 
		    <li><a href="#">link 3</a></li> 
		    <li><a href="#">link 4</a></li> 
		  </ul> 
		</li> 
	    <li> <a href="#">Item2</a> 
		  <ul class="submenu">  
		    <li><a href="#">link 5</a></li> 
		    <li><a href="#">link 6</a></li> 
		    <li><a href="#">link 7</a></li> 
		    <li><a href="#">link 8</a></li> 
			<li><a href="#">link 9</a></li> 
		    <li><a href="#">link 10</a></li> 
		  </ul> 
		</li>   
	    <li><a href="#">Item3</a> 
		  <ul class="submenu">  
		    <li><a href="#">link 5</a></li> 
		    <li><a href="#">link 6</a></li> 
		    <li><a href="#">link 7</a></li> 
		    <li><a href="#">link 8</a></li> 
			<li><a href="#">link 9</a></li> 
		    <li><a href="#">link 10</a></li> 
		  </ul> 
		</li>   
		<li><a href="#">Item4</a> 
		  <ul class="submenu">  
		    <li><a href="#">link 5</a></li> 
		    <li><a href="#">link 6</a></li> 
		    <li><a href="#">link 7</a></li> 
		    <li><a href="#">link 8</a></li> 
			<li><a href="#">link 9</a></li> 
		    <li><a href="#">link 10</a></li> 
		  </ul> 
		</li>   
	    <li><a href="#">Contacts</a> 
		  <ul class="submenu">  
		    <li><a href="#">link 5</a></li> 
		    <li><a href="#">link 6</a></li> 
		    <li><a href="#">link 7</a></li> 
		    <li><a href="#">link 8</a></li> 
			<li><a href="#">link 9</a></li> 
		    <li><a href="#">link 10</a></li> 
		  </ul> 
		</li>    
	  </ul> 
  </div> 
	 
  <div id="sidebar"></div> 
  <div id="content"> 
    <br /> 
    <form action="goods.php" method="post">  
     good's name<br /><br /> 
    <input type="text" name="goods"<br/>  
    <input type="submit" name="btn_select" value="select"> 
    <input type="submit" name="btn_insert" value="insert"> 
    </form>  
  </div> 
  <div id="footer"></div> 
 
 <?php 
 include "connect_db.php"; 
 ?> 
 
 </body> 
</html>