Помогите разобраться... Подсветка пунктов меню

Странное поведение вложенного меню при "selected"

#1 11 ноября 2012 в 21:30

Уважаемые знатоки CSS, очень прошу помощи! Не могу понять следующий момент…
Имеется меню. Не штатное, где то тут на форуме взял (просто заменил в шаблоне кусок CSS файла на новый) вариант с горизонтальными подпунктами (вложенными...) Так вот, когда отрабатывает "selected" родительского пункта, подсвечиваются и все вложенные! Непосредственно посмотреть — donsound.alred.ru/informacija/studija-zvukozapisi.html
Если нужно код — приложу отдельным файлом…

ПРошу, пождскажите где ошибка! Не могу сам найти...

Спойлер

 
 
 
#topmenu{
    font-family: 'PT Sans Narrow', sans-serif;
    position:relative; 
    width:940px;
    height:40px;
    margin:15px auto;
    margin-bottom: 25px;
 /*   background:#25548b url(../images/menubar.jpg) 0 0 repeat-x;
    border-radius:8px;
    -moz-border-radius:8px;
    box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    behavior:url(/templates/_default_/css/PIE.htc)  */
    }
 
 
#topmenu ul{height:40px;}
 
#topmenu li{
    list-style:none; 
    margin:0;
    padding:0;
    height:40px;
    line-height:40px;
    display:inline-block;
	//display: inline;
	zoom: 1;
    font-size:14pt;
    //position: relative;
    }
 
#topmenu li a{
    text-decoration:none;
    padding:0 10px;
    display:block;
    color: #fff;
    }
 
/* Если включены картинки к пунктам меню. Перенос их вверх и выравнивание по центру
#topmenu li a img{display:block;width:32px;height:32px;margin:0 auto} */
#topmenu li a.hover{
  /*  background:#fff url(../images/menubg-hover.jpg) 0 0 repeat-x; */
    color: red;
    }
 
#topmenu li.selected a.hover,#topmenu li.selected{
  /*  color: red; */
   /* background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x; */
}
#topmenu li.selected a,#topmenu li.selected a.selected{
    color:red; 
    }
 
#topmenu li ul{ 
    font-size:14pt;
    height:30px;
    display:none;
    position:absolute;
    top:25px;
    margin-left: -10px;
    padding:0 10px;
}
#topmenu li a.hover~ul{
    color:#red;
    z-index:2;
   /* background:#ccc; */
    }
 
#topmenu li.selected>ul{
    color:#red;
  /*  background:#25548b; */
    display:block !important;
    }
 
#topmenu li ul a{
 /*   background:#25548b;  */
    font-size:14pt;
    line-height:30px;
    color:#fff;
    letter-spacing:normal;
  /*  text-shadow:1px 1px 0 #000;  */
    }
 
#topmenu li ul a.hover{
   /* background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x;
    text-shadow:-1px -1px 0 #000; */
    }
 
#topmenu li ul li{position:relative}
 
#topmenu li ul li ul{
  /*  background:#dedede !important;  */
    font-size:14px;
    padding:2px 0; 
    height:auto;
    display:none;
    position:absolute;
    top:30px;
    left:0;
    width:150px;
  /*  border-radius:0 0 5px 5px;
    -moz-border-radius:0 0 5px 5px;
    box-shadow:3px 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.5);
    behavior:url(/templates/_default_/css/PIE.htc) */}
 
#topmenu li ul li ul li{
    float:none;
    display:block;
   /* background:url(../images/menubar.jpg) 0 100% repeat-x; */
    margin:3px;
    }
 
#topmenu li ul li.selected ul{display:none !important}
 
#topmenu li ul li.selected a.hover~ul{display:block !important}
 
#topmenu li ul li ul li a{background:none;font:italic 700 12px/30px verdana;color:#1f3451 !important;letter-spacing:normal;text-shadow:0 1px 0 #fff !important}
 
#topmenu li ul li ul li a.hover{background:#375E93 url(../images/menubg.jpg) 0 0 repeat-x;border:none;color:#fff !important;text-shadow:0 1px 0 #000 !important}
 
#topmenu li ul li ul li a.selected{color:#fff !important;text-shadow:0 1px 0 #000 !important}
 
 
 
 
 
 
.pathway a{ color:#FFF; }
.pathway a:hover{ color:#BFEAFF; text-decoration:none; }

#2 11 ноября 2012 в 21:46

добавь в файл

 
#topmenu li ul li a{
    color:#fff;
}
 
#topmenu li ul li.selected a{
    color:#fff; /* или любой другой цвет */
}

#3 11 ноября 2012 в 22:06

Rossoman, нет… Не решает проблему к сожалению...

P.S. А, да! И кстати… Когда выбран родительский пункт или любой из вложенных, подменю НЕ ИСЧЕЗАЕТ! а так и остается висеть со всеми активными пунктами… Это тоже видно по ссылке, указанной мною выше.

Сегодня в 12:25

#4 11 ноября 2012 в 22:28

не обратил внимание что у вас в спан обернута ссылка

добавьте после каждого a span через пробел

#topmenu li ul li a span

#5 11 ноября 2012 в 22:33

Rossoman, да! Вот теперь — да!) Спасибо огромное!)
Может еще подскажете почему не исчезает подменю при выбранном родительском или вложенном?

#6 11 ноября 2012 в 22:35

#topmenu li.selected > ul {
color: #red; /* background:#25548B; */;
display: block !important;

уберите отсюда

display: block !important;

#7 11 ноября 2012 в 22:42

Rossoman, Вам плюсы — каждый день) Как я завидую программистам)))

СПАСИБО! Все проблемы решены при Вашей помощи! )

#8 11 ноября 2012 в 22:44

незачто)

#9 12 ноября 2012 в 09:01

вопрос по теме, но модуля юзерменю.

как у него сделать подсвечивающиеся пункты при нахождении на активной странице?

 <div class="modulebody"><div class="mod_user_menu">
 
    <span class="my_profile">
        <a href="/users/admin">Администратор</a>
    </span>
 
        <span class="my_messages">
                    <a href="/users/1/messages.html">ЛС</a>
            </span>
 
        <span class="my_blog">
        <a href="/blogs/my_blog.html">Блог</a>
    </span>

#10 12 ноября 2012 в 10:48

как у него сделать подсвечивающиеся пункты при нахождении на активной странице?

Код HTML:
<div class="modulebody"><div class="mod_user_menu">

<span class="my_profile">
<a href="/users/admin">Администратор</a>
</span>

<span class="my_messages">
<a href="/users/1/messages.html">ЛС</a>
</span>

<span class="my_blog">
<a href="/blogs/my_blog.html">Блог</a>
</span>
yury

смотрим пост номер 2. дописываем только после

#topmenu li ul li.selected a, .mod_user_menu span a.selected
{
color:#fff; /* или любой другой цвет */
}

ну или вынеси отедельно .mod_user_menu span a.selected{}, если оформление отличается

должно помочь.

#11 12 ноября 2012 в 10:49

balooo, так не будет работать.

yury, активной ссылке у вас присваивается класс selected?

#12 12 ноября 2012 в 23:57

так вот я и не знаю как его присвоить на уровне програмной части.

подскажите?)

модуль стандартный, не видоизменный в дистрибутиве

#13 13 ноября 2012 в 06:01

в модуле надо "разбирать" адресную строку, чтоб определить, что в данный момент отображается, и в зависимости от результата подсвечивать соответствующий пункт меню.

#14 13 ноября 2012 в 07:25

смотрите как сделано в /templates/ваш_шаблон/modules/mod_menu.tpl отсюда отталкивайтесь в сторону
/templates/ваш_шаблон/modules/mod_usermenu.tpl

Рабочий проект NEURO-AI.ru

Теги - минимальное количество

Смена фона для разных разделов

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Помогите разобраться... Подсветка пунктов меню

Похожие темы

Выравнивание пунктов главного меню в шаблоне Modern.

Подсветка синтаксиса html кода в TinyMCE5

Изменить подсветку новых комментариев

[ЕСТЬ РЕШЕНИЕ] Другой title для пунктов в главном меню

Управление видимостью пунктов главного меню для разных страниц

[ЕСТЬ РЕШЕНИЕ] Ограничение по количеству символов, при создании пунктов меню 3 уровня

InstantCMS Team

О проекте

Поддержка

Дополнения