마우스에 반응 하는 메뉴바 - li a:hover

See the Pen 마우스 반응 메뉴 목록 by nilgi (@nilgi) on CodePen.

 

 

<style>
     ul {
          list-style-type: none;
          background-color: #ccc;
          width: 180px;
          padding: 0;
          margin:  0;
          border-bottom: 1px solid #fff;
     }

     li a {
          text-decoration: none;
          display: block;
          color: #000;
          padding: 8px 15px 8px 15px;
          font-weight: bold;
     }

     li a:hover { // li a에 마우스를 올렸을 때
          background-color: tomato; // 배경을 토마토색으로 바꾸고
          color: #fff; // 글자는 흰색으로 바꾼다.
     }
</style>

<ul>
     <li><a href="#">MENU#1</a></li>
     <li><a href="#">MENU#2</a></li>
     <li><a href="#">MENU#3</a></li>
     <li><a href="#">MENU#4</a></li>
</ul>