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 | <style>
*{padding:0;margin:0;}
body{font:16px/1 sans-serif}
nav.vertical{position:relative;background:#667;}
nav.vertical ul{list-style: none;}
nav.vertical li{position:relative;}
nav.vertical a{display:block;color:#eee;text-decoration:none;padding:10px 15px;transition:0.2s;}
nav.vertical li:hover > a{background:#778;}
nav.vertical ul ul{background:rgba(0,0,0,0.1);padding-left:20px;transition: max-height 0.2s ease-out;max-height:0;overflow:hidden;}
nav.vertical li:hover > ul{max-height:500px;transition: max-height 0.25s ease-in;}
</style>
<nav class="vertical">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services +</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li><a href="#">Products +</a>
<ul>
<li><a href="#">Widgets</a></li>
<li>
<a href="#">Sites +</a>
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
</ul>
</li>
<li><a href="#">Gadgets +</a>
<ul>
<li><a href="#">Gadget 1</a></li>
<li><a href="#">Gadget 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>
|
