CSS Menu Curious Probelm

See more:

ASP.NET

Hi, from the below menu code once I used the style part in same file of head area is working fine...But once I copy & paste this codes to styles.css in style sheet.... but not working like the previous same file style...

Any suggestion for me? Thanks for the guidances...

CSS Code given in head part:

<style type="text/css" >
        .red #slatenav{position:relative;display:block;height:42px;font-size:15px;font-weight:bold; background:transparent url(MyImages/MenuLine.jpg) repeat-x top left;font-family: Calibri; }
    .red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
    .red #slatenav ul li{display:block;float:left;margin:0 1px 0 0; }
    .red #slatenav ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:12px 28px 0 28px;height:28px;border: 1px #606060 solid;}
</style>

My Menu Codes

<div class="red">
     <div id="slatenav">
          <ul>
              <li id="Home"><a href="#" title="css menus"></a></li>
              <li><a href="#" title="css menus">About Us</a></li>
              <li><a href="#" title="css menus">Solutions</a></li>
           <li><a href="#" title="css menus">Services</a></li>
           <li><a href="#" title="css menus">Technical Support</a></li>
        </ul>
     </div>
</div>

Thanks