-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (64 loc) · 3.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website with Nested Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Link to external CSS -->
<link rel="stylesheet" type="text/css" href="nested_dropdown.css"> <!-- Link to external CSS -->
<link rel="stylesheet" type="text/css" href="navbar.css"> <!-- Link to external CSS -->
<script src="script.js"></script> <!-- Link to external JavaScript (optional) -->
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="navbar-content"> <!-- Group links and dropdown -->
<div class="dropdown"> <!-- Main dropdown menu -->
<button class="button-like">Menu</button> <!-- Styled button -->
<div class="dropdown-content"> <!-- Main dropdown content -->
<a href="#home">Home</a> <!-- No submenu -->
<a href="#services">Services</a> <!-- No submenu -->
<!-- First layer of nested submenu -->
<div class="dropdown-submenu">
<a href="#more" class="submenu-trigger">More</a> <!-- Submenu trigger -->
<div class="dropdown-submenu-content"> <!-- First nested submenu -->
<a href="#option1">Option 1</a> <!-- No submenu -->
<a href="#option2">Option 2</a>
<!-- Second layer of nested submenu -->
<div class="dropdown-submenu">
<a href="#advanced" class="submenu-trigger">Advanced</a> <!-- Submenu trigger -->
<div class="dropdown-submenu-content"> <!-- Second nested submenu -->
<a href="#optionA">Option A</a>
<a href="#optionB">Option B</a>
<!-- Third layer of nested submenu -->
<div class="dropdown-submenu">
<a href="#deep" class="submenu-trigger">Deep Menu</a> <!-- Third submenu trigger -->
<div class="dropdown-submenu-content"> <!-- Third nested submenu -->
<a href="#deep1">Deep Option 1</a> <!-- No submenu -->
<a href="#deep2">Deep Option 2</a> <!-- No submenu -->
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#contact">Contact</a> <!-- No submenu -->
</div>
</div>
<a href="#about" class="button-like">About</a> <!-- Styled like a button -->
</div>
<div class="navbar-logo">My Website</div> <!-- Logo on the right -->
</nav>
<!-- Main Content -->
<header>
<h1>Welcome to My Website</h1>
<p>This is a basic website with a nested dropdown menu.</p>
</header>
<main>
<h2>Main Content</h2>
<p>This section can contain various elements like text, images, or other components for the website's main content.</p>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p> <!-- Basic footer content -->
</footer>
</body>
</html>