lostyazilim
tr.link

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

14 Mesajlar 1.556 Okunma
lstbozum
tr.link

bjlkl bjlkl WM Aracı Kullanıcı
  • Üyelik 22.01.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İstanbul Avrupa
  • Ad Soyad B** C**
  • Mesajlar 1843
  • Beğeniler 269 / 263
  • Ticaret 1, (%100)

Emre19 adlı üyeden alıntı

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%;}


:) font-family ile olaya renk katmışsın şuanki hazırladığım menü sadece öğrenmek ve insanlara da göstermek için. video dersler çekiyorum html ve css ile ilgili. bu yüzden insanlara bunu anlatacak bir örnek tasarladım ben de kendi kodlarımın son halini paylaşayım

.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 li:hover{
background-color:green;
}
.menu li{
position:relative;
list-style-type:none;
width:auto;
float:left;
}
.menu li ul{
position:absolute;
width:150px;
height:auto;
top:35px;
margin:0;
padding:0;
display:none;
background-color:orange;
}
.menu li ul a{
width:110px;
}
.menu li:hover ul{
display: block;
}
 

 

wmaraci
reklam

Emre19 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)

bjlkl adlı üyeden alıntı

:) font-family ile olaya renk katmışsın şuanki hazırladığım menü sadece öğrenmek ve insanlara da göstermek için. video dersler çekiyorum html ve css ile ilgili. bu yüzden insanlara bunu anlatacak bir örnek tasarladım ben de kendi kodlarımın son halini paylaşayım

.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 li:hover{
background-color:green;
}
.menu li{
position:relative;
list-style-type:none;
width:auto;
float:left;
}
.menu li ul{
position:absolute;
width:150px;
height:auto;
top:35px;
margin:0;
padding:0;
display:none;
background-color:orange;
}
.menu li ul a{
width:110px;
}
.menu li:hover ul{
display: block;
}



Karşılaştırırsak benimki göze hitap ediyor sub'ları kaydırmışsın :)
 

 

bjlkl bjlkl WM Aracı Kullanıcı
  • Üyelik 22.01.2014
  • Yaş/Cinsiyet 29 / E
  • Meslek Bilgisayar Mühendisi
  • Konum İstanbul Avrupa
  • Ad Soyad B** C**
  • Mesajlar 1843
  • Beğeniler 269 / 263
  • Ticaret 1, (%100)

Emre19 adlı üyeden alıntı

Karşılaştırırsak benimki göze hitap ediyor sub'ları kaydırmışsın :)


menümde 2. katman yoktu zaten ama saolsun cgrclk onu da gösterdi.
arial fontunu sevmiyorum ama videoyu izleyen nasıl yapıldığını öğrensin yeter :)
 

 

Emre19 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)

bjlkl adlı üyeden alıntı

menümde 2. katman yoktu zaten ama saolsun cgrclk onu da gösterdi.
arial fontunu sevmiyorum ama videoyu izleyen nasıl yapıldığını öğrensin yeter :)


Dostum Arial'e kafanı takma İstediği ile değiştir sadece ince ve altı çizili kalmasın diye öyle yaptım css'de mevcut yazı tipi şifrelemedim :D
 

 

wmaraci
wmaraci
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al