CSS Yatay Açılır Menüdeki Küçük Sorunum

23.05.2014 21:10

bjlkl WM Aracı Kullanıcı

Üyelik 22.01.2014
Yaş/Cinsiyet 28 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Avrupa

Ad Soyad B** C**
Mesajlar 1843
Beğeniler 269 / 263
Ticaret 1, (%100)

sorunum ss de gördüğünüz gibi yardımcı olursanız sevinirim.
CSS kodlarım aşağıda:

.menu{
list-style-type:none;
margin:0;
padding:0;
width:750px;
height:35px;
background-color:grey;
float:left;
}
.menu a{
width:auto;
height:35px;
font-size:15px;
color:white;
padding-left:20px;
padding-right:20px;
line-height:35px;
float:left;
}
.menu a:hover{
background-color:green;
}
.menu li{
position:relative;
list-style-type:none;
width:auto;
float:left;
}
.menu li ul{
position:absolute;
width:auto;
height:auto;
top:35px;
margin:0;
padding:0;
display:none;
background-color: orange;
}
.menu li:hover ul{
display: block;
}

HTML Kodları:

23.05.2014 21:27

#2

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

.menu a:hover{
background-color:green;
}

Yerine

.menu li:hover{
background-color:green;
}

Olarak dene.

1 kişi bu mesajı beğendi.

23.05.2014 23:07

#3

bjlkl WM Aracı Kullanıcı

Üyelik 22.01.2014
Yaş/Cinsiyet 28 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Avrupa

Ad Soyad B** C**
Mesajlar 1843
Beğeniler 269 / 263
Ticaret 1, (%100)

cgrclk adlı üyeden alıntı

.menu a:hover{
background-color:green;
}

Yerine

.menu li:hover{
background-color:green;
}

Olarak dene.

1. sorun çözüldü dediğinle :)

peki öbür sorunu nasıl halledebilirim?

23.05.2014 23:09

#4

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

Html kodlarını da koyarsan halledelim.

23.05.2014 23:11

#5

bjlkl WM Aracı Kullanıcı

Üyelik 22.01.2014
Yaş/Cinsiyet 28 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Avrupa

Ad Soyad B** C**
Mesajlar 1843
Beğeniler 269 / 263
Ticaret 1, (%100)

cgrclk adlı üyeden alıntı

Html kodlarını da koyarsan halledelim.

ilk mesajı editleyerek koydum usta. sadece

kodlarım var başka kod yok sayfada

23.05.2014 23:27

#6

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

Bunu ekle.
.menu li ul li {width:100%;}

Fiddle de denedim ama mobildeyim emin değilim, bir dene olmazsa bakalım tekrar.

1 kişi bu mesajı beğendi.

23.05.2014 23:31

#7

bjlkl WM Aracı Kullanıcı

Üyelik 22.01.2014
Yaş/Cinsiyet 28 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Avrupa

Ad Soyad B** C**
Mesajlar 1843
Beğeniler 269 / 263
Ticaret 1, (%100)

cgrclk adlı üyeden alıntı

Bunu ekle.
.menu li ul li {width:100%;}

Fiddle de denedim ama mobildeyim emin değilim, bir dene olmazsa bakalım tekrar.

aynen dediğinle oldu usta teşekkürler
ama o kısımlar display:block özelliğinden etkilenmiyor. menu li:hover ul içinde yer alan onu nasıl çözebilirim? çok şey sordum ksuura bakma usta ama video ders çekmeyi düşünüyorum bu konuyla ilgili

24.05.2014 11:31

#8

cgrclk Fortis Fortuna Adiuvat Kullanıcı

Üyelik 18.11.2011
Yaş/Cinsiyet 35 / E
Meslek Web Developer
Konum İstanbul Avrupa

Ad Soyad B** Ç**
Mesajlar 3270
Beğeniler 1014 / 1983
Ticaret 53, (%100)

Böyle birşey istiyorsun sanırım, şu an için iki alt açılır menüyü destekliyor.

http://jsfiddle.net/CPLQJ/

1 kişi bu mesajı beğendi.

24.05.2014 13:31

#9

bjlkl WM Aracı Kullanıcı

Üyelik 22.01.2014
Yaş/Cinsiyet 28 / E
Meslek Bilgisayar Mühendisi
Konum İstanbul Avrupa

Ad Soyad B** C**
Mesajlar 1843
Beğeniler 269 / 263
Ticaret 1, (%100)

cgrclk adlı üyeden alıntı

Böyle birşey istiyorsun sanırım, şu an için iki alt açılır menüyü destekliyor.

http://jsfiddle.net/CPLQJ/

aslında bu değil ama çok faydalı oldu bu kodlar 2. katman oluşturmak istersem nasıl yapabilirim görmüş oldum.

sorun şu: orange olarak açılan menü de .menu li ul li {width:100%;} ile üzerine gelindiğinde yeşil alan büyümüş oldu ama link o bölgeye devam edemedi. yani o bölgenin üzerine geldiğimde imleç ok şeklinde. yani link oraya devam etmedi.

yani border eklersek kötü bir görüntü ortaya çıkıyor. sadece ilk kodlamadaki yeşilin olduğu bölümü bordera alıyor geri kalanı almıyor

Ek Olarak: sorunu bir kaç kesin width değeri girerek çözdüm
.menu li ul li {width:100%;} yi kaldırdım
.menu li ul a{width:110px;} ekledim ver .menu li ul içinde width:auto iken width:150px; yaptım sorunu çözüldü

1 kişi bu mesajı beğendi.

24.05.2014 15:15

#10

Emre19 WM Aracı Kullanıcı

Üyelik 29.12.2013
Yaş/Cinsiyet 25 / E
Meslek Öğrenci
Konum Çorum

Ad Soyad N** Y**
Mesajlar 933
Beğeniler 16 / 125
Ticaret 2, (%100)

CSS'ye yeni başladım ama bunu Yaptım Bence Daha Güzel Duruyor

.menu{

list-style-type:none;

margin:0;

padding:0;

width:750px;

height:35px;

background-color:grey;

float:left;

}

.menu a{

width:auto;

height:35px;

font-size:15px;

color:white;

padding-left:20px;

padding-right:20px;

line-height:35px;

float:left;

text-decoration:none; 

font-family:Arial Black, Helvetica, sans-serif;

}

.menu li:hover{

background-color:green;

text-decoration:none; 

font-family:Arial Black, Helvetica, sans-serif;

}

.menu li{

position:relative;

list-style-type:none;

width:auto;

float:left;

text-decoration:none; 

font-family:Arial Black, Helvetica, sans-serif;

}

.menu li ul.sub-menu{

position:absolute;

width:150px;

height:auto;

top:35px;

margin:0;

padding:0;

display:none;

background-color: orange;

text-decoration:none; 

font-family:Arial Black, Helvetica, sans-serif;

}

.menu li:hover > ul.sub-menu{

display: block;

}



.menu li:hover > ul.sub-menu li:hover > ul{

left:150px;

margin-top: -35px;

}



.menu li ul li {width:100%;}

CSS Yatay Açılır Menüdeki Küçük Sorunum

Üye Girişi Yap