-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdropdown-menu.html
More file actions
171 lines (171 loc) · 51.1 KB
/
dropdown-menu.html
File metadata and controls
171 lines (171 loc) · 51.1 KB
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Dropdown Menu - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Draw ellipse, half ellipse, quarter ellipse with CSS"><meta name=keywords content="Common drop-down menus"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/dropdown-menu.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/dropdown-menu.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Dropdown Menu"><meta property="og:description" content="Draw ellipse, half ellipse, quarter ellipse with CSS"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2016-03-03T23:55:37+08:00"><meta property="article:modified_time" content="2016-03-03T23:55:37+08:00"><meta property="article:tag" content="Drop Down Menu"><meta itemprop=name content="Dropdown Menu"><meta itemprop=description content="Draw ellipse, half ellipse, quarter ellipse with CSS"><meta itemprop=datePublished content="2016-03-03T23:55:37+08:00"><meta itemprop=dateModified content="2016-03-03T23:55:37+08:00"><meta itemprop=wordCount content="764"><meta itemprop=keywords content="Common drop-down menus"><meta name=twitter:card content="summary"><meta name=twitter:title content="Dropdown Menu"><meta name=twitter:description content="Draw ellipse, half ellipse, quarter ellipse with CSS"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Dropdown Menu</h1><div class=post-meta><span class=post-time>2016-03-03</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>764 words </span><span class=more-meta>4 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#html-structure>HTML structure</a></li><li><a href=#basic-css-styles>Basic CSS styles</a></li><li><a href=#implementation-of-drop-down-menu-effect>Implementation of drop-down menu effect</a><ul><li><a href=#method-1-pure-css-style-see-demo1>Method 1, pure CSS style: see demo1</a></li><li><a href=#method-2-jquery-see-demo2>Method 2, jQuery: see demo2</a></li><li><a href=#method-three-native-javascript-see-demo3>Method three, native JavaScript: See demo3</a></li></ul></li></ul></nav></div></div><div class=post-content><h2 id=html-structure>HTML structure</h2><p>The navigation bar is a very common component in web pages. Usually, we use unordered lists to make navigation bars. for example</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>"nav"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"navMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Home</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Group tour</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-guided tour</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Cruise</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span></code></pre></div><p>Some navigation bars have drop-down secondary menus, so we add a list at the corresponding position to form a secondary menu, such as</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>"nav"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"navMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Home</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Group tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Peripheral tours</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Local tour</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-guided tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span> >
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Flight + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Train + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Cruise</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Exclusive charter boat</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Japan and South Korea routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>European routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Three Gorges Route</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>American routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving around the area</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span></code></pre></div><h2 id=basic-css-styles>Basic CSS styles</h2><p>The list is arranged vertically by default, while the common navigation bar main menu is arranged horizontally, and the secondary drop-down menu is arranged vertically, so we need to float the li element of the main menu so that it can be arranged horizontally. After setting the float, you should remember to clear it. You can use class as a common float and clear-float style, then add the corresponding class to the element that needs to be floated, and add the clear-float class to the parent element of the floated element.</p><p><strong>CSS code</strong></p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-css data-lang=css><span style=display:flex><span> <span style=color:#75715e>/*reset*/</span>
</span></span><span style=display:flex><span> <span style=color:#f92672>body</span><span style=color:#f92672>,</span> <span style=color:#f92672>div</span><span style=color:#f92672>,</span> <span style=color:#f92672>ul</span><span style=color:#f92672>,</span><span style=color:#f92672>li</span><span style=color:#f92672>,</span> <span style=color:#f92672>a</span>{<span style=color:#66d9ef>padding</span>: <span style=color:#ae81ff>0</span>; <span style=color:#66d9ef>margin</span>:<span style=color:#ae81ff>0</span>;}
</span></span><span style=display:flex><span> <span style=color:#f92672>ul</span>{<span style=color:#66d9ef>list-style</span>: <span style=color:#66d9ef>none</span>; }
</span></span><span style=display:flex><span><span style=color:#75715e>/*Floating and clearing floats*/</span>
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>fl</span>{<span style=color:#66d9ef>float</span>: <span style=color:#66d9ef>left</span>; }
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>clearfix</span>:<span style=color:#a6e22e>after</span>{<span style=color:#66d9ef>content</span>:<span style=color:#e6db74>""</span>;<span style=color:#66d9ef>display</span>:<span style=color:#66d9ef>block</span>;<span style=color:#66d9ef>clear</span>:<span style=color:#66d9ef>both</span>;}
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>clearfix</span>{zoom:<span style=color:#ae81ff>1</span>;}
</span></span><span style=display:flex><span><span style=color:#75715e>/*Navigation bar*/</span>
</span></span><span style=display:flex><span> #nav{<span style=color:#66d9ef>width</span>: <span style=color:#ae81ff>600</span><span style=color:#66d9ef>px</span>; <span style=color:#66d9ef>height</span>: <span style=color:#ae81ff>40</span><span style=color:#66d9ef>px</span>; <span style=color:#66d9ef>margin</span>:<span style=color:#ae81ff>0</span> <span style=color:#66d9ef>auto</span>; <span style=color:#66d9ef>background-color</span>: <span style=color:#ae81ff>#eee</span>; }
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>navMenu</span> <span style=color:#f92672>li</span>{ <span style=color:#66d9ef>text-align</span>: <span style=color:#66d9ef>center</span>; <span style=color:#66d9ef>line-height</span>: <span style=color:#ae81ff>40</span><span style=color:#66d9ef>px</span>; <span style=color:#66d9ef>position</span>: <span style=color:#66d9ef>relative</span>;}
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>navMenu</span> <span style=color:#f92672>li</span> <span style=color:#f92672>a</span>{<span style=color:#66d9ef>text-decoration</span>: <span style=color:#66d9ef>none</span>;<span style=color:#66d9ef>color</span>:<span style=color:#ae81ff>#000</span>; <span style=color:#66d9ef>padding</span>: <span style=color:#ae81ff>0</span> <span style=color:#ae81ff>20</span><span style=color:#66d9ef>px</span>; <span style=color:#66d9ef>display</span>: <span style=color:#66d9ef>block</span>; <span style=color:#66d9ef>width</span>:<span style=color:#ae81ff>80</span><span style=color:#66d9ef>px</span>; }
</span></span><span style=display:flex><span>.<span style=color:#a6e22e>subMenu</span>{<span style=color:#66d9ef>position</span>: <span style=color:#66d9ef>absolute</span>; <span style=color:#66d9ef>top</span>: <span style=color:#ae81ff>40</span><span style=color:#66d9ef>px</span>; <span style=color:#66d9ef>left</span>: <span style=color:#ae81ff>0</span>;<span style=color:#66d9ef>display</span>: <span style=color:#66d9ef>none</span>;}<span style=color:#75715e>/*Hide the secondary menu by default*/</span>
</span></span><span style=display:flex><span> .<span style=color:#a6e22e>subMenu</span> <span style=color:#f92672>li</span>{<span style=color:#66d9ef>float</span>:<span style=color:#66d9ef>none</span>; <span style=color:#66d9ef>background-color</span>:<span style=color:#ae81ff>#eee</span>; <span style=color:#66d9ef>margin-left</span>: <span style=color:#ae81ff>2</span><span style=color:#66d9ef>px</span>; }
</span></span></code></pre></div><p><strong>HTML code</strong> changes to the following:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>body</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>"nav"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"navMenu clearfix"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Home</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Group tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Peripheral tours</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Local tour</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-guided tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span> >
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Flight + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Train + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Cruise</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Exclusive charter boat</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Japan and South Korea routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>European routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Three Gorges Route</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>American routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving around the area</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>body</span>>
</span></span></code></pre></div><h2 id=implementation-of-drop-down-menu-effect>Implementation of drop-down menu effect</h2><p>How to implement that when the mouse moves to the corresponding li element position of the main menu, the secondary menu is displayed, and when the mouse is removed, the secondary menu is hidden. Basic implementation methods: <code>Pure CSS style</code>, <code>jQuery</code>, <code>Native JavaScript</code> and other three implementation methods.</p><h3 id=method-1-pure-css-style-see-demo1>Method 1, pure CSS style: <a href=http://frankwang0909.github.io/posts/demo1.html>see demo1</a></h3><p>The simplest way is to directly use css <code>:hover</code> to achieve this.</p><p>When the mouse moves over the corresponding li of the main menu, the secondary menu is set to the visible block-level element <code>display: block;</code></p><pre tabindex=0><code class=language-csss data-lang=csss> .navMenu li:hover .subMenu{
display: block;
}
/* Display the secondary menu when hovering */
</code></pre><h3 id=method-2-jquery-see-demo2>Method 2, jQuery: <a href=http://frankwang0909.github.io/posts/demo2.html>see demo2</a></h3><p>Use <code>jQuery</code> to get the li element, bind the <code>mouseover</code> and <code>mouseout</code> events, and call the <code>show()</code> and <code>hide()</code> methods of <code>jQuery</code>. The reference code is as follows:</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>script</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>"js/jquery-2.2.3.min.js"</span>></<span style=color:#f92672>script</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>script</span> <span style=color:#a6e22e>type</span><span style=color:#f92672>=</span><span style=color:#e6db74>"text/javascript"</span>>
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#66d9ef>function</span>() {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>'.navMenu>li'</span>).<span style=color:#a6e22e>mouseover</span>( <span style=color:#66d9ef>function</span>() {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#66d9ef>this</span>).<span style=color:#a6e22e>children</span>(<span style=color:#e6db74>'ul'</span>).<span style=color:#a6e22e>show</span>();
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#e6db74>'.navMenu>li'</span>).<span style=color:#a6e22e>mouseout</span>( <span style=color:#66d9ef>function</span>() {
</span></span><span style=display:flex><span> <span style=color:#a6e22e>$</span>(<span style=color:#66d9ef>this</span>).<span style=color:#a6e22e>children</span>(<span style=color:#e6db74>'ul'</span>).<span style=color:#a6e22e>hide</span>();
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> });
</span></span><span style=display:flex><span> </<span style=color:#f92672>script</span>>
</span></span></code></pre></div><h3 id=method-three-native-javascript-see-demo3>Method three, native JavaScript: <a href=http://frankwang0909.github.io/posts/demo3.html>See demo3</a></h3><p>First define functions to show and hide elements</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span> <span style=color:#75715e>// Define display function
</span></span></span><span style=display:flex><span> <span style=color:#66d9ef>function</span> <span style=color:#a6e22e>showsubmenu</span>(<span style=color:#a6e22e>li</span>) {
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>submenu</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>li</span>.<span style=color:#a6e22e>getElementsByClassName</span>(<span style=color:#e6db74>'subMenu'</span>)[<span style=color:#ae81ff>0</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>submenu</span>.<span style=color:#a6e22e>style</span>.<span style=color:#a6e22e>display</span><span style=color:#f92672>=</span><span style=color:#e6db74>"block"</span>;
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> <span style=color:#75715e>// Define hidden functions
</span></span></span><span style=display:flex><span> <span style=color:#66d9ef>function</span> <span style=color:#a6e22e>hidesubmenu</span>(<span style=color:#a6e22e>li</span>){
</span></span><span style=display:flex><span> <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>submenu</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>li</span>.<span style=color:#a6e22e>getElementsByClassName</span>(<span style=color:#e6db74>'subMenu'</span>)[<span style=color:#ae81ff>0</span>];
</span></span><span style=display:flex><span> <span style=color:#a6e22e>submenu</span>.<span style=color:#a6e22e>style</span>.<span style=color:#a6e22e>display</span><span style=color:#f92672>=</span><span style=color:#e6db74>"none"</span>;
</span></span><span style=display:flex><span> }
</span></span></code></pre></div><p>Then call the function, add the function call to the corresponding li element in the HTML code, and modify the code as follows.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-html data-lang=html><span style=display:flex><span> <<span style=color:#f92672>div</span> <span style=color:#a6e22e>id</span><span style=color:#f92672>=</span><span style=color:#e6db74>"nav"</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"navMenu clearfix"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span> <span style=color:#a6e22e>onmouseover</span><span style=color:#f92672>=</span><span style=color:#e6db74>"showsubmenu(this)"</span> <span style=color:#a6e22e>onmouseout</span><span style=color:#f92672>=</span><span style=color:#e6db74>"hidesubmenu(this)"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Home</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span> <span style=color:#a6e22e>onmouseover</span><span style=color:#f92672>=</span><span style=color:#e6db74>"showsubmenu(this)"</span> <span style=color:#a6e22e>onmouseout</span><span style=color:#f92672>=</span><span style=color:#e6db74>"hidesubmenu(this)"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Group tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic tour group</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Peripheral tours</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Local tour</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span> <span style=color:#a6e22e>onmouseover</span><span style=color:#f92672>=</span><span style=color:#e6db74>"showsubmenu(this)"</span> <span style=color:#a6e22e>onmouseout</span><span style=color:#f92672>=</span><span style=color:#e6db74>"hidesubmenu(this)"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-guided tour</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span> >
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-service</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Flight + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Train + Hotel</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span> <span style=color:#a6e22e>onmouseover</span><span style=color:#f92672>=</span><span style=color:#e6db74>"showsubmenu(this)"</span> <span style=color:#a6e22e>onmouseout</span><span style=color:#f92672>=</span><span style=color:#e6db74>"hidesubmenu(this)"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Cruise ship</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Exclusive charter boat</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Japan and South Korea routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>European routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Three Gorges Route</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>American routes</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"fl"</span> <span style=color:#a6e22e>onmouseover</span><span style=color:#f92672>=</span><span style=color:#e6db74>"showsubmenu(this)"</span> <span style=color:#a6e22e>onmouseout</span><span style=color:#f92672>=</span><span style=color:#e6db74>"hidesubmenu(this)"</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving</<span style=color:#f92672>a</span>>
</span></span><span style=display:flex><span> <<span style=color:#f92672>ul</span> <span style=color:#a6e22e>class</span><span style=color:#f92672>=</span><span style=color:#e6db74>"subMenu"</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Self-driving around the area</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Domestic self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span><<span style=color:#f92672>li</span>><<span style=color:#f92672>a</span> <span style=color:#a6e22e>href</span><span style=color:#f92672>=</span><span style=color:#e6db74>""</span>>Outbound self-driving</<span style=color:#f92672>a</span>></<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>li</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>ul</span>>
</span></span><span style=display:flex><span> </<span style=color:#f92672>div</span>>
</span></span></code></pre></div></div><footer class=post-footer><div class=post-tags><a href=/en/tags/drop-down-menu/>drop down menu</a></div><nav class=post-nav><a class=prev href=/git-intro.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Git Intro</span>
<span class="prev-text nav-mobile">Prev</span></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>©
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>