Css - Форум программистов

Форум программистов > Интернет и сети > Web-программирование > HTML, CSS, XML, JavaScript

Css, менюшка

Опции

nws Просмотр профиля Вставить ник	8:04:2008, 12:44
Новенький Группа: Программист Сообщений: 71 Регистрация: 25:07:2007 Пользователь №: 12 020 Специализация: PHP Репутация: 1	Привет всем. Нужна помощь. Взял меню с http://www.cssplay.co.uk/menus/vertical_slide.html Код <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content=""> <title>Untitled 4</title> </head> <style type="text/css"> ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:14em; text-align:left; color:#fff; border:1px solid #606;} ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;} ul.menu1 ul {margin-left:1em;} ul.menu1 li {text-indent:0.5em;} ul.menu1 li.drop {margin-bottom:-2px;} ul.menu1 li a, ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#606;} ul.menu1 li a.last, ul.menu1 li a.last:visited {display:block; width:14em; height:14em; line-height:2em;} ul.menu1 li ul {display:none;} ul.menu1 li:hover a, ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold;} ul.menu1 li:hover ul, ul.menu1 li a:hover ul {display:block; height:12em; width:12em; margin-top:-1px; background:#def; border:1px solid #000;} ul.menu1 li:hover ul li a, ul.menu1 li a:hover ul li a {height:2em; background:#def; color:#00c; font-weight:normal;} ul.menu1 li:hover ul li:hover a, ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;} </style> <body> <ul class="menu1"> <li class="drop"><a href="item1.html">PRODUCTS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item1a.html">Mobiles</a></li> <li><a href="item1b.html">Photoframes</a></li> <li><a href="item1c.html">Tripods</a></li> <li><a href="item1d.html">Cameras</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item2.html">SERVICES<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item2a.html">Photography</a></li> <li><a href="item2b.html">Video editing</a></li> <li><a href="item2c.html">Web design</a></li> <li><a href="item2d.html">Guides</a></li> <li><a href="item2e.html">Tutorials</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item3.html">PORTFOLIO<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item3a.html">Web Sites</a></li> <li><a href="item3b.html">Photo Galleries</a></li> <li><a href="item3c.html">Videos</a></li> <li><a href="item3d.html">Animation</a></li> <li><a href="item3e.html">Banner design</a></li> <li><a href="item3f.html">Logo design</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item4.html">LINKS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item4a.html">Web sites</a></li> <li><a href="item4b.html">Free stuff</a></li> <li><a href="item4c.html">Fonts</a></li> <li><a href="item4d.html">References</a></li> <li><a href="item4e.html">Guides</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a class="last" href="item5.html" title="Home">HOME</a></li> </ul> </body> </html> Так как я не сильно шарю в CSS, может кто-то привести это меню к нормальному виду: Т.е. просто убрать слишком большие отступы после линков История Нормативно-технические акты Интеграция в ЕС Пожары Код <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content=""> <title>Untitled 4</title> </head> <style type="text/css"> ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:14em; text-align:left; color:#fff; border:1px solid #606;} ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;} ul.menu1 ul {margin-left:1em;} ul.menu1 li {text-indent:0.5em;} ul.menu1 li.drop {margin-bottom:-2px;} ul.menu1 li a, ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#606;} ul.menu1 li a.last, ul.menu1 li a.last:visited {display:block; width:14em; height:14em; line-height:2em;} ul.menu1 li ul {display:none;} ul.menu1 li:hover a, ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold;} ul.menu1 li:hover ul, ul.menu1 li a:hover ul {display:block; height:12em; width:12em; margin-top:-1px; background:#def; border:1px solid #000;} ul.menu1 li:hover ul li a, ul.menu1 li a:hover ul li a {height:2em; background:#def; color:#00c; font-weight:normal;} ul.menu1 li:hover ul li:hover a, ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;} </style> <body> <ul class="menu1"> <li class="drop"><a href="item1.html">О службе ГЗ и ЧС<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item1a.html">Руководство</a></li> <li><a href="item1b.html">История</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item2.html">Законадательство<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item2a.html">Нормативные акты</a></li> <li><a href="item2b.html">Акты службы</a></li> <li><a href="item2c.html">Нормативно-технические акты</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item3.html">Наша деятельность<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item3a.html">Деятельность подразделений</a></li> <li><a href="item3b.html">Платные услуги</a></li> <li><a href="item3c.html">Международная деятельность</a></li> <li><a href="item3d.html">События</a></li> <li><a href="item3e.html">Интеграция в ЕС</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li class="drop"><a href="item4.html">Чрезвучайные ситуации<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="item4a.html">Классификатор</a></li> <li><a href="item4b.html">Статические данные</a></li> <li><a href="item4c.html">Пожары</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> </ul> </body> </html>
	Сообщение #1