Есть css меню состоящее из списков <ul><li> обернутых в <div>, который одновременно выступает в роли цветной подложки. Требуемый внешний вид меню такой: http://www.transaction.arvixe.ru/testmenu2.html В этом случае для элемента <ul> задан стиль {position: relative;}. Как следствие выпадающий список сдвигает текст следующий в потоке за меню. Но если заменить этот стиль на {position: absolute;} подложка "портится" и получается такой некрасивый эффект: http://www.transaction.arvixe.ru/testmenu.html Подскажите пожалуйста, можно ли как заставить выводиться фон в div-e без искажений (с перекрыванием нижеследующего контента)? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <title>TestMenu</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> * { margin:0; padding:0; } body{ background: #FFF; position: relative; z-index: 100; } div#nav { border:1px solid #bbb; margin:10px; height:70px; } div#nav div { float:left; margin:2px 20px; padding:10px; width:160px; } div#nav div:hover { background:#EEF2F3; position: relative; } div#nav div:hover a { background:#F0F4F4; } div#nav a { margin:0 10px; font-size: 18px; color: #777777; font-weight: normal; letter-spacing: -0.4pt; background-color: #F8F9FA; border-bottom: 1px solid #e3dfdf; text-decoration: none; } div#nav a:hover{ color: #1f1f1f; background-color: #F0F4F4; border-bottom: 1px solid #bf1e29; } div#nav ul{ padding-top: 10px; list-style:none; line-height:1; display: none; } div#nav div:hover ul { display: block; position: relative; } div#nav li a { margin:0px; padding: 0 8px; font-size: 12px; color: #1f1f1f; background-color: transparent; border-bottom: none; letter-spacing:0.4px; } div#nav li a:hover { color: #ffffff; background-color: transparent; border-bottom: none; background-color: #bf1e29; } /* Неотображаемый ограничивающий блок */ div > div#nofloat{ clear:both; float:none; width:0px; height:0px; padding:0px; } *html #nofloat{ display:none; } /* END */ </style> </head> <body> <div id="nav"> <div> <a href="#">Раздел 1</a> <ul> <li><a href="#">- Пункт меню 1</a></li> <li><a href="#">- Пункт меню 2</a></li> <li><a href="#">- Пункт меню 3</a></li> </ul> </div> <div> <a href="#">Раздел 2</a> <ul> <li><a href="#">- Пункт меню 1</a></li> <li><a href="#">- Пункт меню 2</a></li> <li><a href="#">- Пункт меню 3</a></li> </ul> </div> <div> <a href="#">Раздел 3</a> <ul> <li><a href="#">- Пункт меню 1</a></li> <li><a href="#">- Пункт меню 2</a></li> <li><a href="#">- Пункт меню 3</a></li> <li><a href="#">- Пункт меню 4</a></li> <li><a href="#">- Пункт меню 5</a></li> </ul> </div> <div id="nofloat"></div> </div> <div id="nofloat">- Текст который должен корректно перекрываться выпадающим меню</div> </body> </html>
