Asp.net e CSS

Embora eu goste muito de desenvolvimento, estou começando agora a trabalhar com web e ai ja viu né? Meu problema esta no css, estou fazendo um menu com sub menu popup.. ja peguei diversos exemplos e quando os faço funciona mais quando aplico no site que ja desenvolvi ai bagunça tudo.. e eu querbro a cabeça e nada de ver o pq.   olha como esta o menu normal e quando passo o mouse sobre o a coluna produto, em vez de ele abrir ao lado ele esta abrindo em cima e bem perdendo algumas formatações         abaixo segue o código para criar o menu:   CSS responsavel pelo popUp <style type="text/css"> #MenuPopUp{padding:0; top:0; z-index:10000;} #MenuPopUp ul{list-style-type:none;} #MenuPopUp a{text-decoration:none;} #MenuPopUp a:hover{text-decoration:underline;} #MenuPopUp{width:250px; border:1px solid #ccc; left:450px;} #MenuPopUp li{position:relative; float:left;} #MenuPopUp li a{display:block; height:25px; line-height:25px; color:White; background:#01458e; text-decoration:none;} #MenuPopUp li a:hover{color:#ccc; text-decoration:none;} #MenuPopUp li ul, #MenuPopUp li:hover ul{display:none; position:absolute; width:250px; top:0; left:450px; text-decoration:none; } #MenuPopUp li:hover ul, #MenuPopUp ul li:hover ul{display:block; text-decoration:none;} </style>   parte da pagina aonde é criado o menu <div id="menu"> <ul id="menu_dropdown" class="menubar"> <li><a class="linkMenu" href= "default.aspx">HOME </a><img src="App_Themes/Theme/Image/seta.jpg" alt="Home" /></li> <hr class="menu" /> <li><a class="linkMenu" href= "#">PRODUTOS </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Produtos" /> <ul style="display:none;" id="MenuPopUp" > <li class="submenu"><a href="#">Decapador de cabos</a></li> <hr class="menuPopUp" /> <li class="submenu"><a href="#">Ferramenta de insero</a></li> <hr class="menuPopUp" /> <li class="submenu"><a href="#">Cabo U/UTP, 4 pares, categoria 5e</a></li> </ul> </li> <hr class="menu" /> <li><a class="linkMenu" href="InformacoesTecnicas.aspx">INFORMAES TCNICAS </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Informaes Tcnicas" /></li> <hr class="menu" /> <li><a class="linkMenu" href="FaleConosco.aspx">FALE CONOSCO </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="Fale Conosco" /></li> <hr class="menu" /> <li><a class="linkMenu" href="FAQ.aspx">FAQ </a> <img src="App_Themes/Theme/Image/seta.jpg" alt="FAQ" /></li> </ul> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#menu li").hover(function(){ $(this).find('ul:first').css('display', 'block'); }, function(){ $(this).find('ul:first').css('display', 'none'); }); }); </script> </div> </div>   Se alguem puder me ajudar... Obrigado!