Tam olarak nerede hata yaptığınızı hatırlamıyorum ama menu li deki float left alt menüdeki li ile kesişiyordu oraya float none yaptım ve bunun dışında hatırlamadığım bir kaç tane değişiklik daha yaptım ama hatırlamıyorum :D Menüdeki hatayı arayacağıma aynısını baştan yapmış olsaydım belki 10 tane yeni menü tasarlardım. Hatayı bulmak daha zor oluyor. Bu menü ile uzaktan yakından alakası olmayan bir durum. Son olarak aklımda kalan genişliği auto yaptım ve en az genişlik değeri min-width değerini de 200px olarak belirledim. Ne kadar uzun yaparsanız yapın herhangi bir bozulma olmuyor.


/* MENÜ BAŞLANGIÇ -----------> */
.menu{
list-style:none;
}
.menu li{
height:15px;
font-size:12px;
font-weight:bold;
float:left;
display: list-item;
margin:3% 25px 0 0;
text-transform: uppercase;
}
.menu li a:hover{
transition: all 0.2s ease;
border-bottom: 3px solid #0093cf;
}
.menu li a{
text-decoration:none;
color:#000;
transition: color 0.3s ease;
}
.menu a:hover{
color:#0093cf;
}
.menu a:hover .menu ul li{
border-top: 1px solid #ccc;
}
.active{
color:#0093cf;
border-bottom: 2px solid #0093cf;
}
.menu li ul li{
margin: 0 0 -19px -40px;
padding:15px 0 0 0;
}
.alt_menu{
z-index: 5;
position:absolute;
width: auto;
min-width:200px;
height: auto;
list-style:none;
visibility:hidden;
background-color:#303436;
padding-bottom:1px;
opacity:0;
transition: opacity 0.6s ease, visibility 0.6s ease, margin-left 0.1s ease;
}
.alt_menu li{
height: 45px;
float:none;
}
.alt_menu li a{
text-decoration:none;
font-weight:100;
font-size:12px;
padding: 12px 12px 11px 12px;
margin:0 0 0 0;
display: block;
background-color: #303436;
text-transform: none;
color:#666666;
border-bottom: 1px solid #272a2b;
}
.alt_menu li a:hover{
color: #FFF;
background-color:#272a2b;
}
.menu li:hover .alt_menu{
visibility:visible;
opacity:1;
}
/* MENÜ BİTİŞ -----------> */


Bendeki görüntü bu şekilde çıkıyor.