Совет по 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 Модератор Сообщений: 64920 Регистрация: Мар 2010	#9 17 Апреля 2013 09:14 Так как тема давно закрыта -> перенёс в раздел "Х". 1. Продвигай сайты ЛЮБОЙ тематики! Вечные ссылки и статьи. * 2. Альтернативная монетизация на Ютуб на ЛЮБОМ КОНТЕНТЕ.

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

21.08.2025 08:53	Время запускать онлайн-казино
12.03.2025 15:55	Где вы рекламируете свои услуги?
22.09.2024 22:17	Качественные Крауд ссылки для вашего сайта недорого
06.08.2024 14:22	Отличное дополнение к SEO, которое работает в 2017. Использование естественных ссылок.
18.05.2024 18:52	Флуд звонками

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

Новые темы	Объявления	Свободное общение
17:53 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 22:27 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 12:39 2Index - быстрая индексация страниц сайта и обратных ссылок 06:17 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 11:46 SharkBoss - партнёрская программа для монетизации ЛЮБЫХ видов трафика (включая спам). 23:10 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 21:20 Rotapost прикрыли! Чем пользоваться?	18:53 secrex.io обмен без лишних вопросов (NO AML) 15:41 Запустите свой обменник за 1 день без программиста и серверов — облачная платформа EX365 15:03 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру) 10:39 Адалт сайты и сетки PBN на DLE 04:05 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 01:11 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 23:28 Помогите с оценкой стоимости сайта	13:08 Бесплатный майнинг Tether (USDT) 10:29 С юмором по жизни! 16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 20:43 Добро пожаловать в цифровой мир... 15:59 Про мясо 23:09 ПП от PMS remote.team - 200$ за команду 13:28 Компьютерная мышь