Изменение меню для дочерних элементов при наведении css - PullRequest
Новая
       21

Изменение меню для дочерних элементов при наведении css

0 голосов
/ 16 марта 2012

хорошо, что я сделал не так здесь? Я хочу, чтобы основная кнопка не изменяла размеры дочерних элементов при наведении мыши, и при наличии проблемы с раскрывающимся меню у меня есть кнопки в главном меню, уменьшающие ширину раскрывающегося меню при наведении курсора.если это глупый вопрос, и я заранее прошу прощения, если на этот вопрос уже был дан ответ где-то еще, попытался найти ответ, но проще найти способ его составить, чем выяснить, что испортило то, что здесь - css; 

     #menu 
     {
    position:relative;
    top:100px;
    height:50px;
    width:1000px;

}
#menu ul {
    height:30px;
margin-left: 0px;
 padding:0;
    }
#menu ul li {
    height:30px;
    list-style:none;
    float:right;
    padding-right:0px;
    margin:0;
    }
#menu ul li a { 
height:30px; 
padding:0 15px 0 15px; 
text-shadow: none;
 line-height:30px;
  color:#fff;
   text-decoration:none;
   font-size:17px;
   font-weight:normal;
    }
#menu ul li.active {
    height:30px;
    margin:0px 5px 0px 5px;
        }
 #menu ul li.active a{
margin:5px 5px 5px 5px;
     height:30px;
    color:#880000;
     text-shadow:#000;
     background:#000044;
     -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px;
}
#menu ul li.active a, #menu ul li a:hover {
    margin:0px 0px 0px 0px;
    height:30px;
    color:#880000;
    text-shadow:#000;
    -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px;

    }

      #menu ul li:hover {
margin:0px 0px 0px 0px;
    -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px;
}

Дочерние элементы 

#menu ul li ul {
    display: none;
    width:180px;
    left:-999em;
    border-top:0;
     margin:0px;
      padding:0; 
      -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;

      }
              #menu ul li:hover ul, #menu ul li.sfHover ul 
              {
           display: block;  
            position:relative;
            top:4px; 
             left:-0px;
              z-index:6;
               background-color:#444444;
        -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
                   }
            #menu ul li ul li {
       padding: 0; 
      height:auto;
     width:180px;
     margin:0px;
   border:none;
   -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
    }
    #menu ul li ul li a:hover ul {
color:880000;
background-color:#444444;
-moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
}
    #menu ul li:hover ul li a {
 background-color:#444444;
  text-shadow:none;
  -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
  }
     #menu ul li:hover ul li {
 background-color:#444444; 
     -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
          }
       #menu ul li:hover ul li a, #menu ul li ul li a, #menu ul li.active ul li a
            {
      margin:0px;
          padding:0px 5px 0px 5px;
          height:24px;
          line-height:24px; 
          background:#555;
           border-bottom:1px solid #3a3a3a;
           color:#ffffff;
            background-color:#444444;
            font-size:12px;
            font-weight:normal;
             text-shadow:none;
           -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px;
                }
           #menu ul li ul li a:hover, #menu ul li ul li.active a, #menu ul li.active     ul li a:hover,#menu ul li.active ul li.active a {
           line-height:24px;
            background:#343434;
           color:#880000; 
           font-size:12px;
          text-shadow:#000;
           }
           #menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li.sfHover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul 
            a{
       display:none; 
             }
            #menu ul li ul li ul li{
          height:24;
        width:180px;
         border:none; 
        text-align: left;
          left:180px;}

          #menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li.sfHover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul:hover 
              {
                  }
                    #menu ul li ul li ul li
                     {
                       height:24;
                      width:180px;
                      border:none; 
                   text-align: left;
                   left:180px;
               }

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

1 Ответ

0 голосов
/ 16 марта 2012

Дочерний элемент должен быть абсолютно позиционирован.В противном случае он просто вытянет окружающий элемент (в данном случае ваш родительский элемент меню).

...