Цвет подменю CSS

Non-Stop

Профессор
Регистрация
9 Июл 2007
Сообщения
437
Реакции
42
подскажите пожалуйста как сделать другой цвет у подменю...
Код:
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px Verdana;
width: 320px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
font: bold 10px Verdana;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;

}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: right; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

пробую так
/*Sub level menu items */
.sidebarmenu ul li ul{
background-color: #024D99;
position: absolute;
font: bold 10px Verdana;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;

цвет подменю не меняется...
 
на jsfiddle
 
попробуйте добавить параметр высоты, и посмотрите будут ли изменения фона подменю:
Код:
.sidebarmenu ul li ul{
background-color: #024D99;
position: absolute;
font: bold 10px Verdana;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
height: 300px;
}
 
Non-Stop, установите Firebug и наведите на подменю, таким образом узнаете в каком контейнере он находится.
 
попробуйте добавить параметр высоты, и посмотрите будут ли изменения фона подменю:
Код:
.sidebarmenu ul li ul{
background-color: #024D99;
position: absolute;
font: bold 10px Verdana;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
height: 300px;
}
походу изменяется высота BG выпадающего блока подменю, сверху выпадают подменю и закрывают этот фон


скрипт подключения меню
Код:
  <script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var x=0; x<menuids.length; x++){
  var ultags=document.getElementById(menuids[x]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[x]) //if this is a first level submenu
   ultags[t].style.right=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.right=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
 

Вложения

  • 12.JPG
    12.JPG
    15,2 KB · Просмотры: 7
ТС, если вы попробуете экономить время форумчан, они охотнее Вам помогут.
1) Создайте Для просмотра ссылки Войди или Зарегистрируйся или Для просмотра ссылки Войди или Зарегистрируйся
2) Скиньте ссылку на ваш фидл/пен
3) Посмотрим, найдем багу, поможем
багу найти скорее всего минута дела, а вот воткнуть вашу верстку, стили, скрипты, чтобы искать багу - много дольше, а время свое люди стараются ценить.
 
|После внесения изменений не меняется цвет при наведении курсора на подменю
Я же взял Ваш исходник и дополнил его строками, как образец, которые изменят стиль вложенного списка (подменю). Если подменю третьего уровня - расширьте CSS, добавьте еще один уровень вложенности (по принципу ul li > ul li > ul li).

UPD: При наведении курсора? Добавьте правило для li:hover

Если нужно решить конкретную проблему на Вашем сайте на результат -> Личка, за символическую плату
 
Назад
Сверху