cristiansans (owner)

Revisions

gist: 2700 Download_button fork
public
Description:
CSS Dropdown Menu
Public Clone URL: git://gist.github.com/2700.git
CSS Menu
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>