2014/04/03
[CSS] Pure CSS Dropdown Menu
transitionを有効にするため『visibility』と『opacity』を使っています。transition効果が必要なければ『display:none』と『display:block』で表示の切替をすればいいです。
DEMO
a
b
HTML
CSS
/* -------------------- 共通 -------------------- */
.menu * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.menu {
overflow:hidden;
}
.menu a {
text-decoration:none;
color:#fff;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.menu ul, .menu li {
line-height:1;
margin:0;
padding:0;
list-style:none;
text-transform:uppercase;
}
.menu > li {
float:left;
text-align:center;
}
.menu > li > a, .menu-nest li a {
display:block;
width:9em;
padding:1em;
background:#506173;
}
.menu > li > ul {
position:absolute;
visibility:hidden;
opacity:0;
filter: alpha(opacity=0);
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index:100;
text-align:left;
}
.menu > li:hover ul {
visibility:visible;
opacity:1;
filter: alpha(opacity=100);
}
.menu > li + li {
border-left:#818D99 1px solid;
}
/* -------------------- A -------------------- */
.menu-nest li {
border-top:#818D99 1px solid;
}
.menu > li a:hover {
background:#818D99;
}
.menu > li:first-child > a {
border-top-left-radius:5px;
}
.menu > li:last-child > a {
border-top-right-radius:5px;
}
.menu-nest li:last-child > a {
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
/* -------------------- B -------------------- */
.menu-nest {
padding-top:12px;
}
.menu > li a:hover {
background:#818D99;
}
.menu > li:first-child > a {
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.menu > li:last-child > a {
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
.menu-nest li:first-child > a, .menu-nest li:first-child {
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.menu-nest li:last-child > a, .menu-nest li:last-child {
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
.menu-nest li:first-child {
position: relative;
}
.menu-nest li:first-child:after {
position: absolute;
bottom: 100%;
left: 50%;
content: " ";
height: 0;
width: 0;
border:8px solid transparent;
border-bottom:8px solid #506173;
margin-left:-8px;
}
0 件のコメント :
コメントを投稿