Совет по css

[ Закрыто ] Совет по css

Сообщений: 46 Регистрация: Авг 2010

3 Марта 2011 05:20

Доброе утро! smile:)

Меня интересует один вопрос, который требует срочного решения. Создал меню, которое выдвигается при наведении курсора на соответствующий пункт. При попытке точно спозиционировать меню некорректно работает "выдвижной механизм". Если поставить position:none; в 1 строчке — все снова работает, но смещает все прочие объекты в сторону при выдвижении, что выглядит просто ужасно. Помогите, люди добрые(((

Вот код:

Цитата

.menu, .menu ul {margin:0; padding:0; position:absolute; left:175px; top: 313px;}
.menu .main {position:relative; float:left; clear:left; overflow:hidden; background:#9097aa; border-right:5px solid #000; margin-bottom:1px;}
.menu .sub li {margin-top:-35px;}
.menu a {position:relative; display:block; width:89px; text-decoration:none; font:normal bold 12px/35px arial, sans-serif; color:#fff; background:#9097aa; padding-left:10px; border-right:1px solid #ebf0f4;}
.menu a.top {
-webkit-transition: margin 0.7s ease-in-out;
-mz-transition: margin 0.7s ease-in-out;
-o-transition: margin 0.7s ease-in-out;
transition: margin 0.7s ease-in-out;
}
.menu a.p1 {left:100px}
.menu a.p2 {left:200px}
.menu a.p3 {left:300px}
.menu a.p4 {left:400px}
.menu a.p5 {left:500px}
.menu a:hover {background:#dfe2e9; color:#000;}
.menu a.top:hover,
.menu .sub a:hover {margin-right:280px;}

Изменено: House^^ - 3 Марта 2011 05:21

BugFix

Сообщений: 468 Регистрация: Фев 2011

3 Марта 2011 07:04

неплохо бы html код увидеть.. smile:)

=====================================
Проблемы с Wordpress? Решение здесь.

House^^

Сообщений: 46 Регистрация: Авг 2010

3 Марта 2011 07:23

Код

<div class="imageHolder">
<ul class="menu">
   <li class="main"><a href="">Главная</a></li>
   <li class="main"><a href="" class="top">О компании</a></li>
<ul class="sub">
<li><a class="p1" href="">Телефоны</a></li>
<li><a class="p2" href="">Электропочта</a></li>
<li><a class="p3" href="">Где мы?</a></li>
</ul>
   <li class="main"><a href="">Договора</a></li>
   <li class="main"><a href="">Гарантии</a></li>
   <li class="main"><a href="">Вакансии</a></li>
</ul>
</div>

Изменено: House^^ - 3 Марта 2011 07:36

BugFix

Сообщений: 468 Регистрация: Фев 2011

3 Марта 2011 15:22

HTML

Код

<div class="imageHolder"> 
<ul class="menu"> 
   <li class="main"><a href="">Главная</a></li> 
   <li class="main"><a href="" class="top">О компании</a> 
     <ul class="sub">
       <li><a class="p1" href="">Телефоны</a></li>
       <li><a class="p2" href="">Электропочта</a></li>
       <li><a class="p3" href="">Где мы?</a></li>
     </ul>
  </li>
   <li class="main"><a href="">Договора</a></li> 
   <li class="main"><a href="">Гарантии</a></li> 
   <li class="main"><a href="">Вакансии</a></li> 
</ul> 
</div>

CSS

Код

.menu, .menu ul {margin:0; padding:0; position:none; left:175px; top: 313px;} 
.menu .main {position:relative; float:left; clear:left; overflow:hidden; background:#9097aa; border-right:5px solid #000; margin-bottom:1px;} 
.menu .sub li {margin-top:-35px;} 
.menu a {position:relative; display:block; width:89px; text-decoration:none; font:normal bold 12px/35px arial, sans-serif; color:#fff; background:#9097aa; padding-left:10px; border-right:1px solid #ebf0f4;} 
.menu a.top { 
-webkit-transition: margin 0.7s ease-in-out; 
-mz-transition: margin 0.7s ease-in-out; 
-o-transition: margin 0.7s ease-in-out; 
transition: margin 0.7s ease-in-out; 
} 
.menu a.p1 {left:100px} 
.menu a.p2 {left:200px} 
.menu a.p3 {left:300px} 
.menu a.p4 {left:400px} 
.menu a.p5 {left:500px} 
.menu a:hover {background:#dfe2e9; color:#000;} 
.menu a.top:hover, 
.menu .sub a:hover {margin-right:280px;}
 ul{list-style:none;}

House^^

Сообщений: 46 Регистрация: Авг 2010

3 Марта 2011 17:01

Спасибо, все работает, но как мне сделать, чтобы меню не позиционировалось поверх остальных элементов? smile:)

BugFix

Сообщений: 468 Регистрация: Фев 2011

3 Марта 2011 17:10

остальные элементы - это какие? скриншот был бы кстати.

House^^

Сообщений: 46 Регистрация: Авг 2010

3 Марта 2011 17:28

Скрин 1
Скрин 2
Скрин 3

Картинки почему-то не вставляются, пришлось ссылки выслать...)

Изменено: House^^ - 3 Марта 2011 17:33

BugFix

Сообщений: 468 Регистрация: Фев 2011

3 Марта 2011 22:03

HTML

Код

<div class="imageHolder"> 
<ul class="menu"> 
   <li class="main"><a href="">Главная</a></li> 
   <li class="main"><a href="" class="top">О компании</a> 
     <ul class="sub"> 
       <li><a class="p1" href="">Телефоны</a></li> 
       <li><a class="p2" href="">Электропочта</a></li> 
       <li><a class="p3" href="">Где мы?</a></li> 
     </ul> 
  </li> 
   <li class="main"><a href="">Договора</a></li> 
   <li class="main"><a href="">Гарантии</a></li> 
   <li class="main"><a href="">Вакансии</a></li> 
</ul> 
</div>
<div id="content">
   <p>lorem ipsum dolor si ametlorem ipsum dolor si amet</p>
   <p> lorem ipsum dolor si ametlorem ipsum dolor si amet</p>
   <p>lorem ipsum dolor si ametlorem ipsum dolor si amet</p>
   </div>

CSS

Код

.menu, .menu ul {margin:0; padding:0; position:none; left:175px; top: 313px;} 
.menu .main {position:relative; float:left; clear:left; overflow:hidden; background:#9097aa; border-right:5px solid #000; margin-bottom:1px;} 
.menu .sub li {margin-top:-35px;} 
.menu a {position:relative; display:block; width:89px; text-decoration:none; font:normal bold 12px/35px arial, sans-serif; color:#fff; background:#9097aa; padding-left:10px; border-right:1px solid #ebf0f4;} 
.menu a.top { 
-webkit-transition: margin 0.7s ease-in-out; 
-moz-transition: margin 0.7s ease-in-out; 
-o-transition: margin 0.7s ease-in-out; 
transition: margin 0.7s ease-in-out; 
} 
.menu a.p1 {left:100px} 
.menu a.p2 {left:200px} 
.menu a.p3 {left:300px} 
.menu a.p4 {left:400px} 
.menu a.p5 {left:500px} 
.menu a:hover {background:#dfe2e9; color:#000;} 
.menu a.top:hover, 
.menu .sub a:hover {margin-right:280px;} 
ul{list-style:none;}
#content {position:absolute;left:200px;z-index:-1;}

Prapovednik Модератор Сообщений: 65714 Регистрация: Мар 2010	#9 17 Апреля 2013 09:14 Так как тема давно закрыта -> перенёс в раздел "Х". Продвигай сайты ЛЮБОЙ тематики! Вечные ссылки и статьи. * Тренды SEO 2026: Как продвигать сайт и сделать его магнитом для посетителей (и поисковиков в придачу)

Похожие темы:

25.02.2026 01:16	Продвижение сайта: [SEO-трафик][Вывод в ТОП][Крауд-маркетинг + SEO]
25.02.2026 01:05	Крипто платежный шлюз Apirone - Бизнес решения для приема крипто платежей
19.01.2026 16:13	Время запускать онлайн-казино
12.01.2026 15:48	Ру трафик с джоб сайтов
02.12.2025 19:43	Внешние ссылки на сайт – частный линкбилдер [links.ru]

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
14:09 2Index - быстрая индексация страниц сайта и обратных ссылок 12:28 adsense в 2026: кто реально выводит копейку через киргизию? 12:26 Очередной взлом через плагин. Хакеры получают админку без пароля 12:19 Биржи ссылок в 2026 - реально ли новичку с одним сайтом поднять копейку? 12:12 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 23:24 Яндекс Нейро и выдача в 2026 - остались ли лазейки для маленьких сайтов? 23:05 Раскрутка форума	17:18 SOCKS5 приватные прокси на 30 дней для PayPal 17:16 Google Voice аккаунты для бесплатных SMS и звонков 17:16 PayPal аккаунты для любых целей 15:11 HH.ru Работадателя вериф 14:49 4G/LTE Mobile Proxy 30+ geo 14:43 [UPDATE] CryptoMonitor — обмен BTC, USDT, XMR \| актуальная тема сервиса 13:32 Мониторинг обменников Сrypto-scout.io	12:30 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 12:29 Огородники 16:47 Какой фильм вы любите посмотреть перед сном? 15:46 молодильные яблоки и живая вода 10:11 О природе путешествий. 01:47 Точные прогнозы на футбол 15:04 Сайты Рунета