Ich habe ein Menü mit Submenü funktioniert gut, aber ich versuche, css Übergang im Untermenü hinzuzufügen, wenn ich mouseover auf zweiten nav Element, sollte das Untermenü, die von oben zu erscheinen Übergang unten, aber es funktioniert nicht, kann jemand bitte vorschlagen?CSS-Übergang funktioniert nicht auf Untermenü bei Hover
Hier ist die Arbeits JSfiddle
.header_right {
float: right;
width: 100%;
min-height: 80px;
line-height: 80px;
}
.header_right > ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: right;
}
.header_right > ul > li {
list-style: none;
display: inline-block;
background: #3275a6;
padding: 8px 16px;
color: #fff;
-webkit-border-radius: 4px;
border-radius: 4px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: normal;
vertical-align: middle;
transition: all 0.3s ease 0s;
cursor: pointer;
position: relative;
}
.header_right > ul > li > a {
color: #fff;
text-decoration: none;
}
.header_right > ul > li:nth-child(1) {
margin-right: 15px;
cursor: default;
}
.header_right > ul > li:nth-child(1) > a {
cursor: default;
}
.header_right > ul > li:hover {
background: #14507d;
}
.header_right > ul > li.actbtn {
background: #14507d;
}
.navigation-third {
background: #14507d;
border-radius: 0 0 4px 4px;
display: none;
list-style: outside none none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 33px;
width: 100%;
-moz-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s;
-webkit-transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s;
transition: top 0.7s, right 0.7s, bottom 0.7s, left 0.7s;
}
.navigation-third > li {
list-style: outside none none;
}
.navigation-third > li > a {
color: #fff;
font-size: 14px;
padding: 10px 12px;
display: block;
text-align: left;
text-decoration: none;
}
.navigation-third > li > a:hover {
background-color: #0076AA;
}
.navigation-third > li:nth-child(2) > a:hover {
border-radius: 0 0 4px 4px;
}
.header_right > ul > li:nth-child(2):hover .navigation-third {
display: block;
}
<div class="header_right">
<ul>
<li href="javascript:;"><i class="ico ico_location"></i> <a href="javascript:;">Delhi/NCR</a> </li>
<li> <a class="sub-3"><i class="fa fa-sign-in"></i> Welcome, User</a>
<ul class="navigation-third">
<li><a href="javascript:;" class=""><i class="fa fa-cog" aria-hidden="true"></i> User Account</a></li>
<li><a href="javascript:;" class=""><i class="fa fa-sign-out"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
Um den gewünschten Effekt zu erhalten, sollten Sie eine andere Eigenschaft verwenden, height: https://jsfiddle.net/xwx5dwgd/4/ aber da Sie die genaue Höhe nicht kennen und nicht einstellen können (ich habe 74 px in Demo, und es funktioniert gut, weil feste Höhe eingestellt ist), vielleicht ist Jquery bessere Option ... – sinisake