@import
не ускорит загрузку.$(block).appendTo(something);
<div class="container">
<div class="button">
Button
</div>
<div class="menu_gap">
<div class="menu">
Menu
</div>
</div>
</div>
.container {
position: relative;
width: 200px;
height: 50px;
background: #f00;
}
.button {
display: block;
color: #fff;
}
.menu_gap {
position: absolute;
top: 100%;
left: -20px;
padding: 0 20px 20px 20px;
display: none;
}
.container:hover .menu_gap {
display: block;
}
.menu {
background: #000;
color: #fff;
width: 400px;
padding: 10px 0;
}
display: table
действуют старые правила, высота таблицы воспринимается как min-height всегда, вот пример: https://jsfiddle.net/8j5wmoys/1/ div {
position: relative;
width: 200px;
height: 200px;
background: #000;
overflow: hidden;
border-radius: 50%;
animation: ROTATION 5s linear infinite;
}
div:before {
position: absolute;
display: block;
content: "";
top: 0; left: 0;
width: 50%; height: 100%;
background: #999;
}
div:after {
position: absolute;
display: block;
content: "";
top: 0; right: 0;
width: 50%; height: 100%;
background: #f00;
}
@keyframes ROTATION {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}