wiki:css:css_note:css_horizontal_navbar

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_horizontal_navbar [2021/03/31 08:20]
emblim98
+++ wiki:css:css_note:css_horizontal_navbar [2023/01/13 18:44] (현재)
@@ 줄 726: / 줄 726: @@
 ====예제=====
 <HTML>
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background-color: #333;
+    }
+    li {float: left;}
+    li a, .dropbtn {
+      display: inline-block;
+      color: white;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+    }
+    li a:hover, .dropdown:hover .dropbtn {background-color: red;}
+    li.dropdown {display: inline-block;}
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      background-color: #f9f9f9;
+      min-width: 160px;
+      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+    }
+    .dropdown-content a {
+      color: black;
+      padding: 12px 16px;
+      text-decoration: none;
+      display: block;
+      text-align: left;
+    }
+    .dropdown-content a:hover {background-color: #f1f1f1;}
+    .dropdown:hover .dropdown-content {display: block;}
+  </style>
+</head>
+<body>
+  <ul>
+    <li><a href="#home">Home</a></li>
+    <li><a href="#news">News</a></li>
+    <li class="dropdown">
+      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
+      <div class="dropdown-content">
+        <a href="#">Link 1</a>
+        <a href="#">Link 2</a>
+        <a href="#">Link 3</a>
+      </div>
+    </li>
+  </ul>
+  <h3>Dropdown Menu inside a navigation Bar</h3>
+  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
+</body>
+</html>
 </HTML>
 {{tag>오션 CSS Horizontal Navbar}}

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_horizontal_navbar.1617146451.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)