웹디자인
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)
깽아네
2018. 11. 13. 13:55
728x90
안녕하세요. 잘 지내셨나요? 오랫만에 제 전공과 관련된 포스팅을 하려 합니다. 홈페이지 상단 메뉴에서 주로 쓰이고 있는 드롭다운메뉴 를 css로 적용하는 방법을 알려드릴께요.
이와 같은 메뉴입니다.
html
- <body>
- <div class="dropmenu">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#" id="current">main01</a>
- <ul>
- <li><a href="#">menu1</a></li>
- <li><a href="#">menu2</a></li>
- <li><a href="#">menu3</a></li>
- </ul>
- </li>
- <li><a href="#">main02</a></li>
- </ul>
- </div>
- </body>
css
- .dropmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: "sans-serif";
font-size:18px;
}
.dropmenu ul{
background: #666;
height:100px;
list-style:none;
margin:0;
padding:0;
}
.dropmenu li{
float:left;
padding:0px;
}
.dropmenu li a{
background: #666;
color:#fff;
display:block;
line-height:100px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.dropmenu li a:hover, .dropmenu ul li:hover a{
background: rgb(31,31,31);
color:#FFFFFF;
text-decoration:none;
}
.dropmenu li ul{
background: red;
display:none;
height:auto;
border:0px;
position:absolute;
width:200px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.dropmenu li:hover ul{
display:block;
}
.dropmenu li li {
background: red;
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.dropmenu li:hover li a{
background:none;
}
.dropmenu li ul a{
display:block;
height:80px;
font-size:14px;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.dropmenu li ul a:hover, .dropmenu li ul li:hover a{
background: rgb(171,171,171);
border:0px;
color:#ffffff;
text-decoration:none;
}
.dropmenu p{
clear:left;
}
728x90