관리 메뉴

moozi

navi03.html 본문

TIS_2017/응용sw_2기

navi03.html

moozi 2017. 8. 21. 17:28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS - navigation</title>
    <style>
        .dropdown{
            width: 160px;
        }
        .dropdown-content{
            width: 160px;
            display: none;
            background-color: #f9f9f9;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown:hover .dropdown-content{
            display: block;
           
        }
        #menu {
            list-style-type: none; /* 기호 없애기 */
            margin: 0;
            padding: 0;
            margin-top: 20px;
            border: 1px solid #555555;
            width: 160px;
        }
        #menu li {
            border-bottom: 1px solid #555555;
        }
        #menu li:last-child{
            border-bottom: none;
        }
        #menu li a{
            display: block;
            width: 150px;
            background-color: #dddddd;
            text-decoration: none; /* 밑줄 없애기 */
            color: #000000;
            padding: 5px;
        }
        #menu li a:hover:not(.active){
            background-color:#555555;
            color: white;
        }

    </style>
</head>
<body>
    <div class="dropdown">
      <span>교육과정</span>
      <!-- 서브메뉴 ---------------------------------------->
      <div class="dropdown-content">
        <ul id="menu">
            <li><a href="#">응용S/W</a></li>
            <li><a href="#">네트워크</a></li>
            <li><a href="#">안드로이드</a></li>
            <li><a href="#">기타</a></li>
        </ul>
      </div>
      <!-- 서브메뉴.끝 -------------------------------------->
    </div>
   
   
   
   
   
   
   
   
   
   
   
   
</body>
</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

jsp연습문제03  (0) 2017.08.23
jsp연습문제02  (0) 2017.08.22
jsp연습문제01  (0) 2017.08.21
ajax연습문제02  (0) 2017.08.18
ajax04.html  (0) 2017.08.18
Comments