Barra de rolagem atrapalhando tudo

[nimbus123 0]

Pessoal estou tentando fazer um menu horizontal em meu site. Eu consegui colocar o layout do jeito que eu queria e tudo mais.... só tem um problema...

 

meu menu fica no topo superior direito do meu site e toda vez que passo o mouse para que seja exibido um submenu (o submenu tbm é horizontal), aparece uma barra de rolagem horizontal gigante no firefox. No IE tbm aparece mas quando tiro o mouse ele some.

 

Já tentei de tudo pra resolver isso e não consigo. alguem pode me ajudar?

 

meu codigo CSS abaixo:

 

 

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #16466e;
	background-color: #d6dde2;
	background-image: url(images/test.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

.main {
	width: 1008px;
	min-height: 450px;
	height: 450px;
	background-image: url(images/bg_img.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/* hack para corrigir o min-height no IE */
html>body .main {
height: auto;
}

/* Styles do Topmenu */

.topmenu {
	margin-left: 38px;
	margin-right: 35px;
	height: 20px;
}

.languagebox {
	float: left;
	margin: 0px;
	height: 20px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	color: #FFF;
	width: 170px;
	line-height: 20px;
	}

.languagetable {
padding-left: 4px;
padding-right: 5px;
}

.toploginbox {
	height: 20px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	color: #FFF;
	width: 130px;
	line-height: 20px;
	float: right;
	text-align: right;
	font-weight: bold;
}

.toploginbox a{
	margin: 0px;
	height: 20px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	color: #FFF;
	width: 130px;
	line-height: 20px;
	float: right;
	text-align: right;
	font-weight: bold;
}


/* Styles do Header */

.header {
	margin: 41px 0px 0px 14px;
	height: 125px;
}

.logo {
	margin-left: 8px;
	_margin-left: 4px;
	background-image: url(images/logo.png) !important;
	background-repeat: no-repeat;
	background-image: none;
	width: 280px;
	height: 110px;
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/logo.png);
	float: left;
}

.menu {
	width: 653px;
	height: 53px;
	float: right;
	margin: 50px -15px 0px 0px;
}

#stylemenu ul {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding:0px;
	margin:0px;
	width: 100%;
	float: left;
	list-style:none;
}

#stylemenu ul li{
	display: inline;
}

#stylemenu ul li a{
	text-decoration: none;
	margin: 4px 14px;
	padding-bottom: 12px;
	float: left;
	color: #16466e;
}

#stylemenu ul li a:hover{
	color: #2b73b0;
}

.stylemenuassociar a{
	color: #990000 !important;
}

.stylemenuassociar a:hover{
	color: #cc0000 !important;
}

#stylemenu li ul {
	font-weight: normal;
	color: #2b73b0;
	position: absolute;
	left: 385px;
	top: 135px;
	display: none;
}

#stylemenu li ul a{
	color: #2b73b0;
}

#stylemenu li ul a:hover {
	color: #429df8;
}

#stylemenu li:hover ul, #stylemenu li.over ul { 
	display: block;
	padding-left: 95px;
	background: url(images/bg_submenu.jpg) no-repeat !important;
}

/* Styles do Content Right */

.content-right {
margin: 0px 10px 10px 14px;
width: 640px;
height: auto;
}

 

CODIGO HTML

 

<div class="main">
	<!--
	divs do menu azul
	-->
	  <div class="topmenu">
		  <div class="languagebox"><!-- #BeginLibraryItem "/Library/table_idiomas.lbi" --><table border="0" cellpadding="0" cellspacing="0">
				<tr>
				  <td><img src="images/flag_bra.gif" alt="Idioma: Português" width="22" height="14" /></td>
				  <td class="languagetable">Idioma: Português</td>
				  <td><img src="images/toparrow.png" alt="Escolher Idioma" width="10" height="9" /></td>
				</tr>
		  </table><!-- #EndLibraryItem --></div>
		<div class="toploginbox"><!-- #BeginLibraryItem "/Library/table_toplogin.lbi" --><table width="!"130"" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td><a href="#">Já	é cadastrado? Login </a></td>
  </tr>
</table><!-- #EndLibraryItem --></div>
	  </div>
		  <!--
	divs do Header
	-->
		<div class="header">
			<div class="logo">
			</div>
			<div class="menu">
				<div id="stylemenu">
				<ul id="nav">
				<li><a href="#">Faça um Tour</a></li>
				<li><a href="#">Como funciona</a>
					<ul>
					<li><a href="#">Passo a Passo</a></li>
					<li><a href="#">Galeria</a></li>
					<li><a href="#">FAQ</a></li>
					</ul>
				</li>
				<li><a href="#">Busca de jogadores</a></li>
				<li><a href="#">Produtos</a>
					<ul>
					<li><a href="#">Busca de Jogadores</a></li>
					<li><a href="#">Estatísticas</a></li>
					<li><a href="#">Video-Clipes</a></li>
					<li><a href="#">Ranking</a></li>
					</ul>
				</li>
				<li><a href="#">Contato</a></li>
				<li class="stylemenuassociar"><a href="#">Associar</a></li>
				</ul>
				</div>
			</div>
		</div>
		<div class="content-right"> Teste texto 123456
		</div>
</div>

 

Obrigado!

[William Bruno 1501]

Dentre outras estranhezas no teu código, retire isso:

#stylemenu ul {
	width: 100%; /*ou coloca em pixel a medida que você precisa */
}

que já vai parar de aparecer o scroll horizontal

Não faz sentido..

Para evitar esse "zeramento" adoidado, por todo o código, coloque apenas no seletor global:

* {
   margin: 0;
   padding: 0;
}

Depois dá uma verificada geral no código... tem algumas coisas estranhas..