Добрая ночь, Уважаемые коллеги!
Вот уже второй час ночи, а я уставший и расстроенный кидаю клич о помощи =)
Дело вот в чем. Пишу свой шаблон под J!1.5 после достаточно долгого перерыва.
- Вопрос1: CSS никак не хочет позволить моему пункту submenu быть шире, чем ширина родительского пункта. Если приписать строчку вида height:180px, то текст смещается и рассчитывает на широкое поле (уходит за рамки)
Найденное решение: position:absolute;-Вопрос2: Никак не могу подружить возможность подсветки активного пункта меню (в моем случае - png бэкграунд)
Меню сделано по принципу ul (список). Так-же прошу подсказать, как должен выглядеть класс (или нужен идентификатор) в CSS для привязки его в суффиксе модуля (в модуле главного меню).
ul,li{
padding:0;
margin:0;
}
ul.menu{
width:auto;
background-color:#0F0 ;
}
ul.menu li a{
height:37px;
display: block;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
text-decoration: none;
color:#333;
padding-top: 15px;
}
ul.menu li a:hover{
background-color: #FFF;
background:url(../images/button.png);
}
ul.menu li{
float:left;
list-style: none;
text-align: center;
width: 120px;
}
/* первый уровень вложенности */
ul.menu li ul {
background-color:#cbe1ec;
opacity:0.85;
font-size:10px;
width: auto;
}
ul.menu li:hover ul {
display:block;
color:#F90;
}
/* Внешний вид выпавшего меню */
ul.menu li:hover ul li a{
width:auto;
text-align:left;
height: auto;
padding: 0 10px;
background-color:#cbe1ec;
font-family:Grotic;
font-style:bold;
font-size: 12px;
text-transform: uppercase;
text-decoration:none;
padding-top:5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #006;
}
ul.menu li.active a, ul.menu li a:hover {
color:#E8A03D;
}
a#active_menu {
color: #000000;
text-decoration: none;
}
/* второй уровень вложенности */
li.parent ul li ul{
background-image:none;
position: absolute;
float:left;
display:list-item;
font-size:10px;
width:180px;
font-size:10px;
background:#93C;}
li.parent:hover ul li ul{
background-image:none;
position: absolute;
float:left;
display:list-item;
font-size:10px;
width:180px;
font-size:10px;
background:#93C;}
/* костыль для ie7 */
*margin-left:0;
*margin-top:0;
li.parent:hover ul li ul{
display: none;
background-color:#0C6;
}
li.parent:hover ul li:hover ul{
display: block;
}
ul.menu li ul li{
display:block;
float:none;
clear:both;
background-image:none;
}
ul.menu li ul li a{
display: block;
background-image:none;
}.table {
height: 5px;
}
Как осуществить подсветку родительского пункта меню, при выбранном подменю ? Вроде правильно вопрос поставил.
ps: в приведенном выше коде есть достаточно много ненужных пунктов - следствие проб для получения результата.
Друзья, помогите пожалуйста
03.02.2020, 18:49:47