Проблема с выпадающим меню...

[Mr.Smith]

Здравствуйте, делаю выпадающее меню по примеру http://anton.shevchuk.name/wp-demo/jquery-.../drop-down.html. Меню работает, но есть проблемы с его интеграцией на сайте /* удалено */.

1. Не могу нормально отцентрировать меню;

2. Меню налазит на блок с конентом.

CSS:

.top_nav { font: 11px verdana; margin: 0 auto; padding: 4px 0; width: 950px; }
.top_nav ul { clear: both; margin: 0; padding: 6px 0; }
.top_nav ul li { display: inline; float: left; margin: 0 0 0 3px; position: relative; }
.top_nav ul li a, .topmenu ul li a:active, .topmenu ul li a:visited { color: #555555; padding: 6px 7px; text-decoration: none; white-space: nowrap; }
.top_nav ul li a:hover { color: #111111; background: #ffffff; border-bottom: 2px solid #53abd7; }
.top_nav ul li ul { display: none; margin: 2px 0 0 -3px; position: absolute; }
.top_nav ul li ul li { background-color: #ffffff; border: 1px solid #e9e9e9; border-top-width: 0; display: block; line-height: 17px; text-align: left; width: 170px; }
.top_nav ul li ul li a, .topmenu ul li ul li a:visited, .topmenu ul li ul li a:hover, .topmenu ul li ul li a:active { background: url(../images/dropmenu_arrow.gif) no-repeat left center; background-position: 8px 10px; border-top: 1px solid #e9e9e9; border-left: 2px solid #53abd7; color: #444444; display: block; padding: 3px 5px 3px 20px; text-decoration: none; text-indent: 3px; }
.top_nav ul li ul li a:hover { background: #eef7ff url(../images/dropmenu_arrow.gif) no-repeat left center; background-position: 8px 10px;; border-bottom: 0; }

Прошу помощи, убил 2 с половиной часа, но так и не смог решить задачу. Заранее благодарен.

Edited December 18, 2009 by Mr.Smith

[psywalker]

.top_nav нижний марджин нужной высоты..

[Mr.Smith]

Завтыкал, благодарю.

[psywalker]

Завтыкал, благодарю.

Давай, бодрячком пацанчик

[Mr.Smith]

Возвращаюсь снова к этому меню. Меню смотрим на сайте /* удалено */.

CSS:

.top_nav { font: 11px verdana; margin: 0 auto 14px; padding: 4px 0; width: 980px; }
.top_nav ul { clear: both; margin: 0; padding: 6px 0; }
.top_nav ul li { display: inline; float: left; margin: 0 0 0 3px; position: relative; }
.top_nav ul li a, .topmenu ul li a:active, .topmenu ul li a:visited { color: #555555; padding: 6px 7px; text-decoration: none; white-space: nowrap; }
.top_nav ul li a:hover { color: #111111; background: #ffffff; border-bottom: 2px solid #53abd7; }
.top_nav ul li ul { display: none; margin: 2px 0 0 -3px; position: absolute; }
.top_nav ul li ul li { background-color: #ffffff; border: 1px solid #e9e9e9; border-top-width: 0; display: block; line-height: 17px; text-align: left; width: 170px; }
.top_nav ul li ul li a, .topmenu ul li ul li a:visited, .topmenu ul li ul li a:hover, .topmenu ul li ul li a:active { background: url(../images/dropmenu_arrow.gif) no-repeat left center; background-position: 8px 10px; border-top: 1px solid #e9e9e9; border-left: 2px solid #53abd7; color: #444444; display: block; padding: 3px 5px 3px 20px; text-decoration: none; text-indent: 3px; }
.top_nav ul li ul li a:hover { background: #eef7ff url(../images/dropmenu_arrow.gif) no-repeat left center; background-position: 8px 10px;; border-bottom: 0; }
.active {  }

Попробовал разные варианты, не могу его отцентрировать + вроде бы как все сделать "по книжке", но есть косяки в ИЕ. Использую 8 версию.

Какие будут идеи по решению проблемы?

Edited December 29, 2009 by Mr.Smith

[psywalker]

Например отцентрировать можно путём присваивание этому классу меньшую ширину.

.top_nav {

width:880px;

[Mr.Smith]

Я так и решал, но если нужно убрать какой-то пункт меню, приходится снова подбирать значение width. А как быть с ИЕ? Там совсем все криво.

[Игорь Ермаков]

Лично я вообще никогда не был сторонником вёрстки горизонтальных менюшек инлайнами, грубое какое-то решение, попробуйте найти другое.

Вот как пример: Первое что было под рукой. поищите, что-нибудь подобное, так лучше будет, с этим решением ещё навозитесь.

интеграцией на сайте

И переставайте использовать умные слова совершенно не по назначению.

[Mr.Smith]

Благодарю.

[psywalker]

Я так и решал, но если нужно убрать какой-то пункт меню, приходится снова подбирать значение width. А как быть с ИЕ? Там совсем все криво.

Всё делается легко и просто, UL - у него выравниваешь текст по середине. Далее LI делаешь инлайн элементами, ссылки соответстенно тоже инлайн и всё.

[gordi]

Центрировать горизонтальное меню можно и так