sverdlova
-
Posts
1 -
Joined
-
Last visited
sverdlova's Achievements
Explorer (1/14)
0
Reputation
-
Добрый день! Нужна помощь коллективного разума, так как сама не справляюсь. Нужно сделать выпадающие окна с помощью css. У меня получилось вот такое (см. код), но я уперлась в проблему: выпадающее меню не становится линейным, как список верхнего режима. Я в курсе, что это свойство задается float: left, однако куда именно его вписывать - не понимаю (метод тыка результатов не принес). Если сможете объяснить, в чем ошибка - буду крайне признательна. Код прилагается. Спасибо! <style type="text/css"> #navigation { list-style: none; float:left; color: white; font-family: Franklin Gothic Medium; font-size:14px; width: 100%; } #navigation li { float:left; position:relative; display:block; } #navigation li a { text-decoration:none; color: white; font-family: Franklin Gothic Medium; font-size:14px; padding: 10px; background: #333333; } #navigation li a:hover { color:#000; background:#FFF; padding: 10px; } #navigation ul { position:absolute; top: -9999px; list-style: none; } #navigation ul a { white-space: nowrap; display:block; } #navigation li:hover ul { display: block; top: 28px; position:absolute; } #navigation li:hover a { background: #FFF; color: #000; border: none; } </style> <body> <div style="height: 300px; width: 100%; background-color: #DDD;"> <ul id="navigation" > <li><a href="#">ГЛАВНАЯ</a> <ul> <li><a href="#">О КОМПАНИИ</a></li> <li ><a href="#">О ПРОДУКЦИИ</a></li> <li ><a href="#">О ЖИЗНИ</a></li> </ul> </li> <li><a href="#">УСЛУГИ</a></li> <li><a href="#">ПРАЙС-ЛИСТ</a></li> <li><a href="#">ПОЧЕМУ МЫ</a></li> <li><a href="#">ПРЕСС-ЦЕНТР</a></li> <li><a href="#">PRO BONO</a></li> <li><a href="#">КОНТАКТЫ</a></li> </ul> </div>