Fora de peforma

[Worn 1]

Olá estou dentro problema no meu menu, ele é simples porém quando eu passo o mouse sobre a categoria simplesmente ele cresce fiz de tudo no css e nada entenda melhor

 

 

 

ele normal

 

 

 

 

 

 

agora quando eu passo o mouse sobre a categoria ele fica assim ele é AUMENTA muitas vezes mais fazendo-se assim que as outras categoria desça e fica desalinhada

 

 

 

 

 

 

 

 

meu código css é

 

 

 

 

 

 

#menu{

width: 100%;

height: 50px;

float: left;

background: #297BAA;

margin-top: 160px;

}

#menu nav{

width:955px;

height: 70px;

margin: 0 auto;

}

nav ul#menu-screen{

list-style: none;

margin: 0px;

padding: 0px;

}

nav ul#menu-screen li{

width: auto;

height: auto;

display: inline;

padding: 16px 11px 15px 11px;

float: left;

margin-right: 7px;

text-align: center;

font-family: Tahoma;

font-size: 16px;

color: #fff;

}

nav a{

color: #297baa;

text-decoration: none;

}

ul#menu-screen li ul li:hover a{

color: #fff;

text-decoration: none;

}

ul#menu-screen li a:hover{

color: #fff;

text-decoration: none;

}

nav ul#menu-screen li.submenu{

width: 85px;

height: 19px;

}

nav ul#menu-screen li:hover{

background: #fff;

color: #297BAA;

cursor: pointer;

}

nav ul#menu-screen li ul{

display: none;

}

nav ul#menu-screen li:hover ul {

display: block;

margin-top: 15px;

margin-left: -290px;

padding: 3px;

height: auto;

float: left;

width: 700px;

background-color: #fff;

box-shadow: 0px 2px 2px 2px #ccc;

border-radius: 0px 0px 4px 4px;

}

nav ul#menu-screen li:hover ul li{

width: auto;

height: auto;

color: #121212;

display: block;

padding: 10px 10px 10px 10px;

}

nav ul#menu-screen li:hover ul li:hover{

background-color: #297baa;

color: #FFF;

}

 

 

 

[Henrique Werlang 8]

Veja se funciona, adicione position absolute no nav ul#menu-screen li:hover ul { e position relative no nav ul#menu-screen li{