I have the following page:
<html>
<head>
<title>Kahil</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu1.css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" dir="RTL">
<center>
<div class='horizontalcssmenu'>
<ul id='cssmenu1'>
<li><a href=''>Menu1</a></li>
<li><a href='/pages/F4F8E5F4E9EC.php'>Menu2</a></li>
<li><a href='http://kahil.bizclick.co.il/pages/F2E1E5E3E5FA.php'>Menu3</a></li>
<li><a href='/pages/E2ECF8E9E4.php'>Menu4</a>
<ul class='box'>
<li><a href='/pages/E2ECF8E9E4/EEE3E1F7E5FA.php'>Menu4.1</a></li>
<li><a href='/pages/E2ECF8E9E4/EEE5F6F8E9-F4F8F1E5ED.php'>Menu4.2</a></li>
<li><a href='http://kahil.bizclick.co.il/pages/E2ECF8E9E4/E4E3F4F1E4-F2EC-E7E5ECF6E5FA.php'>Menu4.3</a></li>
</ul>
</li>
<li><a href='/pages/F6E5F8-F7F9F8.php'>Menu5</a></li>
</ul></div>
</body>
</html>
And the following CSS styles that I want to be applied on them:
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: right;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 60px; /*Width of top level menu link items*/
padding: 2px 8px;
text-decoration: none;
/*background-color: #1C3702;*/
color: #7E4732;
font: bold 12px Arial, Helvetica, sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
The wired thing is that if its in the file like in the example, no styles are applied, but when I inline them with <style> ... </style> it suddenly works. I have checked the link tag like a 100 times, and I can’t find whats wrong.
Edit:
As requested I uploaded that to here The whole folder contains now 2 files, index.html and c1.css. The format should be plain text since I use Notepad++ to edit them, but the CSS file was originally downloaded. For debugging convenience I already put there the style tag and commented it out. You can add a > at the end of line 5 to see it working.
Your HTML file is in UTF-16 format, while the CSS file is not. This is extremely confusing to browsers.
When saving, make sure they have the same encoding, or, specify the encoding for the CSS file explicitly in its HTTP header.