Gojic analizirao sam tvoj padjući meni detaljno i našao problem. Tebi verovatno već to ne treba više, al ajde da napišem. Možda nekome koristi.
1. Ne možeš da praviš dropdown sa "opacity" atributom (barem ja ne znam da može). Umesto "opacity: 0" stavljaš "display:none" , a umesto "opacity:1" ide "display:block"
2. Efekat odvojenih dugmića ne možeš da postigneš sa uvlačenjem margine jer padajući meni popegne kad ideš kursorom na dole. Ja sam postigao tako što sam stvoio beli border oko dogmića. Verovatno ima i drugih načina.
Evo CSS dole ako nekog zanima.
Code:
@charset "UTF-8";
body {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 100%;
}
* {
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.container {
width: 1000px;
height: 100%;
margin: 0px auto;
}
nav ul a {
color: white;
}
nav ul {
width: 100px;
height: 30px;
margin: 270px 460px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
text-align: center;
color: white;
border-radius: 20px;
}
nav ul li {
width: 100px;
height: 30px;
padding-top: 15px;
padding-bottom: 5px;
background-color: #52b3d9;
position: relative;
top: 17px;
display: none;
transition: opacity 1s;
-webkit-transition: opacity 1s;
text-align: center;
color: white;
border-radius: 20px;
border:2px solid white;
}
nav ul:hover li {
display: block;
}
nav ul li:hover a {
border-bottom: 2px solid white;
}
li:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
ul:hover {
background-color: #19B5FE;
border-bottom: 2px solid #434141;
}
Dodao bih još da ovo nije baš najbolji način da se naprvi dropdown. Ima dosta nepotrebnih linija. Sem ako autoru iz nekog razloga nije bio potreban CSS baš ovakav kakav jeste u šta sumljam pošto bih rekao da se radi o klasičnoj vežbi.
[Ovu poruku je menjao dusanboss dana 24.03.2016. u 13:35 GMT+1]