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

Тема в разделе "Верстка", создана пользователем Non-Stop, 4 сен 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Non-Stop

    Non-Stop

    Регистр.:
    9 июл 2007
    Сообщения:
    323
    Симпатии:
    25
    подскажите пожалуйста как сделать другой цвет у подменю...
    Код:
    .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;

    цвет подменю не меняется...
     
  2. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    195
    Симпатии:
    269
    на jsfiddle
     
  3. Platton

    Platton Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    77
    Симпатии:
    18
    попробуйте добавить параметр высоты, и посмотрите будут ли изменения фона подменю:
    Код:
    .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;
    }
    
     
  4. mff4

    mff4 Постоялец

    Регистр.:
    2 апр 2008
    Сообщения:
    113
    Симпатии:
    15
    Non-Stop, установите Firebug и наведите на подменю, таким образом узнаете в каком контейнере он находится.
     
  5. Non-Stop

    Non-Stop

    Регистр.:
    9 июл 2007
    Сообщения:
    323
    Симпатии:
    25
    походу изменяется высота 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 КБ
      Просмотров:
      7
  6. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    176
    Симпатии:
    109
    ТС, если вы попробуете экономить время форумчан, они охотнее Вам помогут.
    1) Создайте jsfiddle или codepen
    2) Скиньте ссылку на ваш фидл/пен
    3) Посмотрим, найдем багу, поможем
    багу найти скорее всего минута дела, а вот воткнуть вашу верстку, стили, скрипты, чтобы искать багу - много дольше, а время свое люди стараются ценить.
     
    D'Jack и ultra нравится это.
  7. Non-Stop

    Non-Stop

    Регистр.:
    9 июл 2007
    Сообщения:
    323
    Симпатии:
    25
  8. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    176
    Симпатии:
    109
    Non-Stop нравится это.
  9. Non-Stop

    Non-Stop

    Регистр.:
    9 июл 2007
    Сообщения:
    323
    Симпатии:
    25
    |После внесения изменений не меняется цвет при наведении курсора на подменю
     
  10. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    176
    Симпатии:
    109
    Я же взял Ваш исходник и дополнил его строками, как образец, которые изменят стиль вложенного списка (подменю). Если подменю третьего уровня - расширьте CSS, добавьте еще один уровень вложенности (по принципу ul li > ul li > ul li).

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

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