Merhaba arkadaşlar,
HTML/CSS yeni öğrenmeye başladım ve şuanda bir menü yaptım. Yalnız şöyle bir sıkıntı var "dropdown" u istediğim gibi yapamadım. Mause "dropdawn" da linke denk gelmiyor. Bir bölümde boşluğa denk geliyor. Ufak bir gif koyuyorum sıkıntıyı siz de anlayacaksınız zaten. Sorunu çözebilirseniz sevinirim.
SIKINTI:http://i.hizliresim.com/jjvapG.gif
Dropdown'un CSS dosyaları da şu şekilde:
.navbar li.dropdown a:after {
content: "\f067";
font-family: FontAwesome;
font-size: 10px;
color: #fff;
opacity: 0.7;
padding-left: 5px;
}
.navbar li.dropdown a.current:after {
color: #fff;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar li.dropdown:hover a:after {
color: #fff;
opacity: 1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar li.dropdown ul {
display: block;
position: absolute;
z-index: 99;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
padding: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-o-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.navbar li.dropdown:hover ul {
display: block;
background: #fff;
min-width: 150px;
visibility: visible;
opacity: 1;
}
.navbar .dropdown li {
list-style-type: none;
float: none;
border-bottom: 1px solid #eaeaea;
}
.navbar .dropdown li:last-child {
border: none;
}
.navbar li.dropdown ul li a {
display: block;
color: #656d78;
text-align: left;
padding: 10px 25px;
}
.navbar li.dropdown ul li a:after {
display: none;
}
.navbar li.dropdown ul li a:hover,
.navbar li.dropdown ul li a:active,
.navbar li.dropdown ul li a:focus {
text-decoration: none;
outline: none;
background: #fff;
}