CSS 드랍다운

1 개요[ | ]

CSS 드랍다운

마우스오버시 메뉴 보임

html

Copy

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 100%;
  margin: 0;
  padding: 5px 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);  
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu>li>a {
  color: black;
  display: block;
  padding: 3px 20px;
  line-height: 1.5;
  text-decoration: none;
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover { background: #f5f5f5; }
</style>

<div class="dropdown">
  <button class="dropdown-toggle">마우스오버 드롭다운</button>
  <ul class="dropdown-menu">
    <li><a href="#">메뉴 1</a></li>
    <li><a href="#">메뉴 2</a></li>
    <li><a href="#">메뉴 3</a></li>
  </ul>
</div>

2 같이 보기[ | ]