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

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Закрытая тема
Ваша тема закрыта, почему это могло произойти? Возможно,
Нет наработок или кода, если нужно готовое решение - создайте тему в разделе Фриланс и оплатите работу.
Название темы включает слова - "Помогите", "Нужна помощь", "Срочно", "Пожалуйста".
Название темы слишком короткое или не отражает сути вашего вопроса.
Тема исчерпала себя, помните, один вопрос - одна тема
Прочитайте правила и заново правильно создайте тему.
 
Опции темы Поиск в этой теме
Старый 27.08.2015, 15:57   #1
drzorin
Новичок
Джуниор
 
Регистрация: 27.08.2015
Сообщений: 1
По умолчанию

Добрый день, задача такова, через @media подгружается css стиль для мобильных (при разрешении <980px) , в нем отредактированное Вертикальное меню, в котором, при наведении на родительский пункт меню, дочерние пункты начинают хаотично накладываться друг на друга, так и не получилось найти более менее адекватное решение, вполне возможно ошибка простая, прошу прощения. Сам пациент - http://thermis.ru

Код меню
PHP код:

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  
margin:0;
  
padding:0;
  
width940px;
}
#cssmenu {
 
font-size28px;
 
text-aligncenter;
  
border-radius:0px 0px 0px 0px;
  -
moz-border-radius:0px 0px 0px 0px;
  -
webkit-border-radius:0px 0px 0px 0px;
  
background#443133;
  
width980px;
  
margin:auto
margin-bottom2%;
}
#cssmenu:after,
#cssmenu ul:after {
  
content'';
  
displayblock;
  
clearboth;
}
#cssmenu a {
  
background#443133;
  
color#fff;
  
displayinline-block;
  
font-family:'Jura'sans-serif;
  
font-size45px;
  
line-height55px;
  
padding0 20px;
  
text-decorationnone;
}
#cssmenu ul {
  
list-stylenone;
}
#cssmenu > ul {
  
}
#cssmenu > ul > li {
  
}
#cssmenu > ul > li > a {
  
color#fff;
  
font-size28px;
 
letter-spacing0px;

}
#cssmenu > ul > li:hover:after {
  
content'';
  
displayblock;
  
positionrelative;
  
bottom10px;
 
border-left3px solid ;
  
border-right3px solid ;
  
border-bottom3px solid #e55822;
     
outlinenone;
  
margin-left: -10px;

}
#cssmenu > ul > li:first-child > a {
  
border-radius0px 0 0 0;
  -
moz-border-radius0px 0 0 0;
  -
webkit-border-radius0px 0 0 0;
}
#cssmenu > ul > li.active:after {
 
content'';
  
displayblock;
  
positionrelative;
  
bottom10px;
 
border-left3px solid ;
  
border-right3px solid ;
  
border-bottom3px solid #31F135;
  
margin-left: -10px;
}
#cssmenu > ul > li.active > a {
  
-moz-box-shadowinset 0 0 2px rgba(0000.1);
  -
webkit-box-shadowinset 0 0 2px rgba(0000.1);
  
box-shadowinset 0 0 2px rgba(0000.1);
  
background#443133;
  
color#FFF;
  
background: -moz-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  
background: -webkit-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -o-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -ms-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
backgroundlinear-gradient(top#ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
  
transition0.7s;
  
background#ececec;
  
background: -moz-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
  
background: -webkit-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -o-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
background: -ms-linear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
backgroundlinear-gradient(top#ececec 0%, #ffeeff ef 100%);
  
-moz-box-shadowinset 0 0 2px rgba(0000.1);
  -
webkit-box-shadowinset 0 0 2px rgba(0000.1);
  
box-shadowinset 0 0 2px rgba(0000.1);
     
background#443133;
     
color#FFF;
    
}
#cssmenu .deeper {
  
z-index10000;
}
#cssmenu .deeper:hover > ul {
  
displayblock;
}
#cssmenu .deeper ul {
  
displaynone;
  
positionabsolute;
  
width200px;
  
top100%;
  
}
#cssmenu .deeper ul li {
  
*margin-bottom: -1px;
}
#cssmenu .deeper ul li a {
  
  
background#F0F0F0;

  
transition-duration0.3s;
  
transition-delay0s0.5s;
  
transition-timing-function:  linear;
  
filternone;
  
font-size25px;
  
opacity1;

  
line-height120%;
  
padding15px;
  
color#000000;

}
#cssmenu .deeper ul li:hover a {
    
background#443133;
  
color#FFF;
    
opacity1;
 
 
  
}
#cssmenu .deeper .deeper:hover > ul {
  
displayblock;
}
#cssmenu .deeper .deeper ul {
  
displaynone;
  
positionabsolute;
  
  
top0;
}
#cssmenu .deeper .deeper ul li a {
  
background#e55822;
   
  
border-bottom1px dotted #ff0f1b;
}
#cssmenu .deeper .deeper ul li a:hover {
  
background#8f0007;
  

Решение:
Проблема решена путем добавления position: relative; в cssmenu .deeper ul
Изображения
Тип файла: jpg Снимок экрана от 2015-08-27 15:54:56.jpg (27.8 Кб, 141 просмотров)

Последний раз редактировалось Вадим Мошев; 15.05.2018 в 19:59.
drzorin вне форума
Закрытая тема


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вертикальное меню SHAHIN_ HTML и CSS 0 11.09.2013 17:41
вертикальное меню сайта Ivan_m JavaScript, Ajax 5 24.07.2013 14:01
Вертикальное меню!! amico Компоненты Delphi 1 06.01.2012 15:18
Вертикальное меню Alex Cones HTML и CSS 3 12.05.2010 21:10