Genişlik Sorunu

Aynen böyle olmasını istiyorum :after veya :before bilmiyorum öğrenirim bi kaynak var mı bu dediklerinizi yapabilceğim?

Bu kaynağa göz atabilirsiniz. Beklerim derseniz resimdeki haliyle css kodlarını verebilirim.

Yazıların tek satır çıkması için white-space:nowrap; kullanmalısınız.

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.

İlginiz için teşekkür ederim okuldan sonra detaylıca yaptıklarınızı inceleyeceğim.

Ek Olarak:

Sağolasın senin kodlardan yola çıkarak çözdüm sorunu :)

/* 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{
text-decoration:none;
color:#000;
transition: color 0.3s ease;
}
.menu li a:hover{
border-bottom: 3px solid #0093cf;
}
.menu a:hover{
color:#0093cf;
}
.menu a:hover .menu ul li{
border-top: 1px solid #ccc;
}
.active{
color:#0093cf;
border-bottom: 2px solid #0093cf;
}
.alt_menu{
z-index: 5;
position:absolute;
width: auto;
min-width:70px;
height: auto;
list-style:none;
visibility:hidden;
padding-bottom:1px;
opacity:0;
background-image:url(../images/yukari_ok.png);
background-position:top;
background-repeat:no-repeat;
background-position:10px -5px;
margin-left: -10px;
transition: opacity 0.7s ease, visibility 0.7s ease, margin-left 0.1s ease;
}
.alt_menu li{
height: 43px;
float:none;
padding:15px 0 0 0;
}
.win.ie .alt_menu li{
margin: 0 0 -20px -45px;
}
.mac .alt_menu li{
margin: 0 0 -20px -45px;
}
.win .alt_menu li{
margin: 0 0 -19px -45px;
}
.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;
margin-left:0;
}
/* MENÜ BİTİŞ -----------> */

Tüm sorunlar çözüldü :)

Sürekli Windows ve Chrome kullanırım. Başka tarayıcıların ve başka işletim sistemleirnin nasıl çalıştığı benim hiç umurumda olmadı bu zamana kadar. Bu bahsettiğiniz sorunuda baştan arattırmak zorunda kaldım çözüm bulabilmek için. Bir kaç tane sebebi olabiliyormuş. Mesela Windows os içinde bulunan fontlarla Mac os içinde bulunan fontlardan kaynaklanıyor olabilirmiş. Bir arkadaş bu sorunu çözmek için Google web fontlarını kullanmış. Başka birisi line-height ile sorununu düzeltmiş. Eğer fontlardan kaynaklanan bir durum ise her iki işletim sistemi için de eşit olan font-family: Arial dır.

Eğer fontlardan kaynaklı bir durum değil ise bozuk çıkan bölüme line-height özelliği ekleyin. Şu şekilde kullanabilirsiniz line-height:70% gibi.
Mac kullanmadığım için bunu deneyemeyeceğim ama bence büyük ihtimal line-height özelliğinden kaynaklı bir durum olmalı.

Mac ile windows arasında sorunlar oluyor bazı fontlar cursive,fantasy gibi birbirlerinde tam tersini gösteriyor.line-height aklıma gelmedi böyle çözüm birinde tam oldu derken mace bakıyom altında boşluk oluyo mace ayarlıyom windowsa geçiyom border alta kalıyor gözükmüyor explorer desen ayrı bela :)