gist: 2700 - CSS Dropdown Menu- GitHub


  
    
      CSS Menu #
    
    
      
      
        embed
        
      
      
      
      raw
    
  
  
  
    
      
        
          
            
            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

          
          
            
              <!-- 
CSS Dropdown Menu 
Cristian Sans
Gimmicklab
27/07/2008
-->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Barbera CSS Menu</title>
<style type="text/css">
	* { /* Hard reset just to be fast, Google Eric Meyer's reset stylesheet for a wheter way to reset your stylesheets */
		margin: 0;
		padding: 0;
	}
	body {
		font-family: Arial, Verdana, sans-serif;
		background: #000;
		font-size: 62.5%;
		color: #fff;
	}
	h1 {
		font-size: 3em;
		margin-bottom: 25px;
	}
	a {
		color: #fff;
	}
	div#container {
		padding: 5%;
	}
	div#container ul {
		font-size: 1.4em;
		letter-spacing: .3px;
		width: 25%;
		margin-left: 5%;
		position: absolute;
	}
	div#container li {
		list-style-type: none;
		display: block;
		float: left;
		cursor: default;
	}
	div#container li a {
		text-decoration: none;
		padding-bottom: 5px;
		margin-right: 25px;
	}
	div#container li a:hover {
		border-bottom: 3px solid #fff;
	}
	div#container li:hover ul {
		display: block;
	}
	div#container ul ul {
		font-size: .9em;
		margin: 0;
		padding-top: 15px;
		display: none;
		overflow: hidden;
	}
	div#container li li {
		line-height: 1.6em;
		display: block;
		float: none;
	}
	div#container li li a:hover {
		border-bottom: none;
	}
	div#container li li a {
		color: #808080;
		border: none !important;
	}
	#container#ul:after { 
	    content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}	
 
</style>
</head>
 
<body>
	<div id="container">
		<h1>CSS Menu</h1>
		<ul>
			<li><a href="index.php">Opción</a>
				<ul>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
				</ul>
			</li>
			<li>
				<a href="index.php">Opción</a>
				<ul>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
				</ul>
			</li>
			<li>
				<a href="index.php">Opción</a>
				<ul>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
				</ul>
			</li>
			<li>
				<a href="/">Opción</a>
				<ul>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
					<li><a href="/">Sub Opción</a></li>
				</ul>
			</li>
		</ul>
 
	</div>
</body>
</html>
Description:	CSS Dropdown Menu
Public Clone URL:	git://gist.github.com/2700.git Give this clone URL to anyone. `git clone git://gist.github.com/2700.git gist-2700`
Embed All Files:	show embed