Anatoli
-
Posts
1 -
Joined
-
Last visited
Anatoli's Achievements
Explorer (1/14)
0
Reputation
-
Здраствуйте, я новичок на сайте да и в html/css. Решыл сделать сайт с горизонтальным и выподающим (2 уровня) меню,всё впринцепи получилось,кроме того что при наведении курсора на ссылки 1 уровня (тое есть скажем на главные кнопки меню)—--подменюшки <ul><li><а></а></li></ul> 2 уровня не выподают. Я должен применить position:relative; сначало а потом position:absolute; только вот не знаю куда,всё испробывал,помогите. HTML <!DOCTYPE html> <html xmlns="[url="http://www.w3.org/1999/xhtml%22>"]http://www.w3.org/1999/xhtml">[/url] <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css5/style5.css"/> <link rel="shortcut icon" type="image/icon" href="icon/fish.png"/> <title>www.abrisousroche.com</title> </head> <body> <div id="chief"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#"><!--<img class="fish" src="..//icon/fish.png">-->Accueil</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Mises à jour</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Promos</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Matériel</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Animaux</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Aquariums</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Articles</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li><!-- --><li><a href="#">Abri sous roche</a> <ul> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> <li><a href="#">Link item</a></li> </ul> </li> </ul> </div> <div id="central"> </div> <div id="footer"> </div> </div> </body> </html> CSS body { font-family:Arial, Tahome, PT "Gill sans MT"; font-size:13px; background:#ccc; border:1px solid #000; margin:30px auto; width:1000px; } #chief { } #header { } #menu { border:1px solid #000; margin:0; padding:0; } #menu> ul { text-align:center; padding:0; }/*(UL 1ogo urovnja)*/ #menu ul li ul { padding:0; }/*(UL 2ogo urovnja)*/ #menu ul { margin:0; }/*(UL 1ogo i 2ogo urovnja)*/ #menu> ul> li { display:inline-block; }/*(LI 1ogo urovnja)*/ #menu ul li ul li { }/*(LI 2ogo urovnja)*/ #menu ul li { list-style:none; }/*(LI 1ogo i 2ogo urovnja)*/ #menu> ul> li> a { background:-webkit-linear-gradient(top,#fff,#00ffff); border:1px solid #000; border-radius:9px 3px; display:block; width:106px; padding:8px; color:#000; }/*(A 1ogo urovnja)*/ #menu ul li ul li a { background:-webkit-linear-gradient(top,#00ff00,#ff00ff); border:1px solid #000; border-radius:3px 9px; color:#000; display:block; width:106px; padding:8px; margin-top:1px; position:; visibility:; }/*(A 2ogo urovnja)*/ #menu ul li a { text-align:center; text-decoration:none; }/*(A 1ogo i 2ogo urovnja)*/ #menu> ul> li> a:hover { color:red; background:#fd0; } #menu ul li ul li a:hover { visibility:visible; } #central { } #footer { }