비전공자 개발일기

HTML CSS - Dropdown menu Hover 본문

HTML _CSS

HTML CSS - Dropdown menu Hover

HiroDaegu 2021. 10. 16. 00:30
728x90
SMALL

<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>
.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
LIST

'HTML _CSS' 카테고리의 다른 글

Loading Animation  (0) 2022.04.12
New HTML5 Tags with no CSS & JS  (0) 2022.01.17
HTML & CSS -Publishing2  (0) 2021.10.08
HTML & CSS -Publishing  (0) 2021.10.06
CSS BULMA, TAILWIND  (0) 2021.09.17