Exercice HTML: Menu Dynamique

Participez au vote ☆☆☆☆☆★★★★★
Travail à Faire:
Ecrire le code HTML et CSS qui permet de réaliser le Menu suivant:
Télécharger les images suivantes Afin de pouvoir réaliser le Menu demandé:



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 |
/* CSS Document */ *{ margin:0; padding:0; } #menu{ width:90%; margin:25px auto; } #menu ul{ list-style:none; } #menu li{ display:block; float:left; } #menu li a{ background:#749b10 url(images/menu_bg.gif) repeat-x; border:2px solid #80a225; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; height: 50px; } #menu li a span{ color:#52651f; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal; } #menu li a:hover{ background:#e46825 url(images/menu_hover.gif) repeat-x; border:2px solid #c04118; text-decoration:none; } #menu li a:hover span{ color:#ffd9c7; } .current{ background:#e46825 url(images/menu_hover.gif) repeat-x; border:2px solid #c04118; margin:0 1px; padding:15px 15px 15px 15px; display:block; float:left; color:#fff; text-transform:uppercase; text-decoration:none; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer; font-weight:bold; height: 50px; } .current span{ color:#ffd9c7; font-size:10px; text-transform:lowercase; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Green Menu</title> <link href="menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="menu"> <ul> <li class="current">Home<br /><span>takes you to<br /> home page</span></li> <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li> <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li> <li><a href="#">Partners<br /><span>takes you to<br />partners page</span></a></li> <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li> </ul> </div> </body> </html> |