diff options
| -rw-r--r-- | index.html | 111 | ||||
| -rw-r--r-- | menu.css | 59 | ||||
| -rw-r--r-- | style.css | 10 |
3 files changed, 101 insertions, 79 deletions
@@ -11,70 +11,73 @@ <link rel="stylesheet" type="text/css" href="font.css"> <link rel="stylesheet" type="text/css" href="menu.css"> <link rel="stylesheet" type="text/css" href="style.css"> - <a href="Images/beauteoldy.jpg"><img src="Images/beauteoldy_mini.jpg" alt="icône" /></a> </head> <body> + <a href="Images/beauteoldy.jpg"><img src="Images/beauteoldy_mini.jpg" alt="icône" /></a> + <div class="header"> <a href="#"> Maquillage </a> - <br /> + <br /> </div> - <ul class="menu"> - <li> - <a href="#/teint">Teint</a> - <ul class="hidden"> - <li><a href="#/teint/Primer et base">Primer et base</a></li> - <li><a href="#/teint/BB Cream vs CC Cream">BB Cream vs CC Cream</a></li> - <li><a href="#/teint/Fond de teint">Fond de teint</a></li> - <li><a href="#/teint/Anti cernes">Anti-cernes</a></li> - <li><a href="#/teint/Poudre libre">Poudre libre</a></li> - <li><a href="#/teint/Poudre compacte">Poudre compacte</a></li> - <li><a href="#/teint/Poudre bronzante">Poudre bronzante</a></li> - <li><a href="#/teint/Blush">Blush</a></li> - <li><a href="#/teint/Contouring">Contouring</a></li> - </ul> - </li> - <li> - <a href="#/yeux">Yeux</a> - <ul class="hidden"> - <li><a href="#/yeux/Base">Base</a></li> - <li><a href="#/yeux/Crayon">Crayon</a></li> - <li><a href="#/yeux/Fard a paupieres">Fard à paupières</a></li> - <li><a href="#/yeux/Eyeliner">Eye-liner</a></li> - <li><a href="#/yeux/Mascara">Mascara</a></li> - <li><a href="#/yeux/Faux cils">Faux cils</a></li> - <li><a href="#/yeux/special yeux sensibles">Spécial "yeux sensibles"</a></li> - </ul> - </li> - <li> - <a href="#/levres">Lèvres</a> - <ul class="hidden"> - <li><a href="#/levres/gloss">Gloss</a></li> - <li><a href="#/levres/rouge a levres">Rouge à lèvres</a></li> - </ul> - </li> - <li> - <a href="#/accessoires">Accessoires</a> - <ul class="hidden"> - <li><a href="#/accessoires/eponges">Eponges</a></li> - <li><a href="#/accessoires/pinceaux">Pinceaux</a></li> - </ul> - </li> - <li> - <a href="#">Démaquillant</a> - <ul class="hidden"> - <li><a href="#/demaquillant/visage">Visage</a></li> - <li><a href="#/demaquillant/yeux">Yeux</a></li> - </ul> - </li> - <li> - <a href="#">Promos</a> - </li> - </ul> + <nav> + <ul> + <li> + <a href="#/teint">Teint</a> + <ul> + <li><a href="#/teint/Primer et base">Primer et base</a></li> + <li><a href="#/teint/BB Cream vs CC Cream">BB Cream vs CC Cream</a></li> + <li><a href="#/teint/Fond de teint">Fond de teint</a></li> + <li><a href="#/teint/Anti cernes">Anti-cernes</a></li> + <li><a href="#/teint/Poudre libre">Poudre libre</a></li> + <li><a href="#/teint/Poudre compacte">Poudre compacte</a></li> + <li><a href="#/teint/Poudre bronzante">Poudre bronzante</a></li> + <li><a href="#/teint/Blush">Blush</a></li> + <li><a href="#/teint/Contouring">Contouring</a></li> + </ul> + </li> + <li> + <a href="#/yeux">Yeux</a> + <ul> + <li><a href="#/yeux/Base">Base</a></li> + <li><a href="#/yeux/Crayon">Crayon</a></li> + <li><a href="#/yeux/Fard a paupieres">Fard à paupières</a></li> + <li><a href="#/yeux/Eyeliner">Eye-liner</a></li> + <li><a href="#/yeux/Mascara">Mascara</a></li> + <li><a href="#/yeux/Faux cils">Faux cils</a></li> + <li><a href="#/yeux/special yeux sensibles">Spécial "yeux sensibles"</a></li> + </ul> + </li> + <li> + <a href="#/levres">Lèvres</a> + <ul> + <li><a href="#/levres/gloss">Gloss</a></li> + <li><a href="#/levres/rouge a levres">Rouge à lèvres</a></li> + </ul> + </li> + <li> + <a href="#/accessoires">Accessoires</a> + <ul> + <li><a href="#/accessoires/eponges">Eponges</a></li> + <li><a href="#/accessoires/pinceaux">Pinceaux</a></li> + </ul> + </li> + <li> + <a href="#">Démaquillant</a> + <ul> + <li><a href="#/demaquillant/visage">Visage</a></li> + <li><a href="#/demaquillant/yeux">Yeux</a></li> + </ul> + </li> + <li> + <a href="#">Promos</a> + </li> + </ul> + </nav> <div id="content"></div> @@ -1,26 +1,47 @@ -ul.menu { - position: absolute; +nav > ul { width: 900px; display: table; table-layout: fixed; +} + +nav ul ul { + display: none; +} + +nav > ul > li > a { + margin-left: 1px; + margin-right: 1px; +} + +nav li:hover > ul { + display: block; +} + +nav ul { + position: absolute; font-family: NothingYouCouldSay; font-size: 21px; } -ul.menu > li { - display: table-cell; +nav li:hover > a { + background-color: #777777; } -ul.menu li { +nav li:hover ul a { + background-color: #EEEEEE; +} + +nav li { + display: table-cell; margin-bottom: 0px; margin-left: 0px; } -ul.menu li:before { +nav li:before { content: ""; } -ul.menu a { +nav a { height: 50px; line-height: 50px; text-align: center; @@ -28,35 +49,25 @@ ul.menu a { text-decoration: none; display: block; background-color: #333333; - margin-right: 1px; - margin-left: 1px; } -ul.menu a:hover + .hidden, ul.hidden:hover { - display: block; -} - -ul.hidden { - display: none; -} - -ul.hidden li { +nav ul ul li { display: block; float: none; + min-width: 150px; + margin-left: 1px; + margin-right: 1px; } -ul.hidden a { - width: auto; - min-width: 100px; +nav ul ul a { padding: 0 20px; - background-color: #EEEEEE; color: black; } -ul.hidden a:hover { +nav a:hover { color: white; } -ul.hidden > li:hover > a { +nav ul ul a:hover { background-color: #777777; } @@ -20,7 +20,7 @@ body { .header > a:hover { color: #222222; -} +} #content { margin-top: 120px; @@ -82,6 +82,14 @@ a:hover { color: #4C4C80; } +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + .contact { background-color: #EEEEEE; border-radius: 5px; |