Exercice HTML: Menu Dynamique
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é:
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 | /* 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;} |
| 123456789101112131415161718 | 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">Homebr />span>takes you tobr /> home page/span>/li> li>a href="#">About Usbr />span>takes you tobr />about us page/span>/a>/li> li>a href="#">Productsbr />span>takes you tobr />products page/span>/a>/li> li>a href="#">Partnersbr />span>takes you tobr />partners page/span>/a>/li> li>a href="#">Contact Usbr />span>takes you tobr />contact page/span>/a>/li> /ul>/div>/body>/html> |