Проблема такая. Пишу сайт для себя и столкнулся с небольшой проблемкой - не могу сделать вертикальное выпадающие меню... Это мой первый сайт Помогите кто чем сможет. Пишу в 2 файлах .html и .css.Всё работает кроме этого Вот код: HTML <html> <head> <title>Сайт</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <div class="cap"></div> <div class="mm"> <div id="mm1"><a href="page.html" class="bs1">a</a></div> <ul class="menu1"> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> <div id="mm2"><a href="page.html" class="bs">а</a></div> <ul> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> <div id="mm3"><a href="page.html" class="bs">а</a></div> <ul> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> <div id="mm4"><a href="page.html" class="bs">а</a></div> <ul> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> <div id="mm5"><a href="page.html" class="bs">а</a></div> <ul> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> <div id="mm6"><a href="page.html" class="bs1">а</a></div> <ul> <li><a href="page1.html">1</a></li> <li><a href="page2.html">1</a></li> <li><a href="page3.html">1</a></li> <li><a href="page4.html">1</a></li> </ul> </div> </body> </html> CSS body { margin-left: 0; margin-top: 0; } .mm { position: absolute; height: 250px; background: #666; margin-left: 0; margin-top: 0; left: 12%; right: 13%; background-image: url("../images/bf.png"); text-decoration: none; margin: 0; } a { display: block; width: 164px; height: 40px; text-decoration: none; color: #666; } #mm1 { background-image: url("../images/menu1.png"); width: 180px; height: 40px; background-repeat: no-repeat; text-align: center; top: 250px; position: relative; } #mm1:hover { background-image: url("../images/menu11.png"); } #mm2 { background-image: url("../images/menu2.png"); width: 164px; height: 40px; background-repeat: no-repeat; text-align: center; left: 180px; } #mm2:hover { background-image: url("../images/menu22.png"); } #mm3 { background-image: url("../images/menu2.png"); width: 164px; height: 40px; background-repeat: no-repeat; text-align: center; left: 344px; } #mm3:hover { background-image: url("../images/menu22.png"); } #mm4 { background-image: url("../images/menu2.png"); width: 164px; height: 40px; background-repeat: no-repeat; text-align: center; left: 508px; } #mm4:hover { background-image: url("../images/menu22.png"); } #mm5 { background-image: url("../images/menu2.png"); width: 164px; height: 40px; background-repeat: no-repeat; text-align: center; left: 672px; } #mm5:hover { background-image: url("../images/menu22.png"); } #mm6 { background-image: url("../images/menu3.png"); width: 180px; height: 40px; background-repeat: no-repeat; text-align: center; left: 836px; } #mm6:hover { background-image: url("../images/menu33.png"); } #mm2, #mm3, #mm4, #mm5, #mm6 { position: inherit; top: 250; } ul li { top: 270px; background-color: #DCDCDC; width: 160px; height: 160px; margin-bottom: 0; padding: 0; text-decoration: none; list-style: none; left: 49px; display: block; position: absolute; } #mm1:hover ul li { left: 40px; }
