Exercice HTML: Menu Verticale en HTML et CSS

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

head
	link rel='stylesheet' type='text/css' href='menu_style.css'
/head
>div class="outer"
>div id="menu"
		>ul
			li>a href="#1" title="Home"Home/>a/>li
			li>a href="#2" title="About"About/>a/>li
			li>a href="#3" title="Services"Services/>a/>li
			li>a href="#4" title="Portfolio"Portfolio/>a/>li
			li>a href="#5" title="Store"Store/>a/>li
			li>a href="menu1.zip" title="Download"Download Menu/>a/>li	
		/>ul
	/>div
/>div

------------------------------------------------------------------------------------------------------

menu_style.css

/*        V2        */
.outer{
	list-style:none;
	margin:0px;
	padding:0px;
}


#menu {
	width: 200px;
	border-style: solid solid none solid;
	border-color: #94AA74;
	border-width: 1px;

	}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}

#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	font-weight:normal;
	}	

#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	background: url('/images/v6.gif');
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

#menu li a:hover {
	color: #666666;
	background: url('/images/v6.gif') 0 -32px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

#menu li a:active {
	color: #666666;
	background: url('/images/v6.gif') 0 -64px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}