Какая строка определяет этот эффект наведения?

-2

Я использовал этот учебник: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu Какая строка определяет этот эффект наведения?

Когда я парить WebDesign новое меню выходит, и когда я зависать «HTML», «Вебдизайн» меняет цвет на другой grey.So, как я перехожу в меню, путь, который я выбираю, имеет другой серый цвет. Какая строка в файле CSS определяет это? Я хочу изменить этот серый цвет.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { 
    margin: 0; padding: 0; border: 0; 
} 

body { 
    background: #909eab url(bg.png); 
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px; 
} 

nav { 
    margin: 100px auto; 
    text-align: center; 
} 

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 
    } 


nav ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

    nav ul li { 
     float: left; 
    } 
     nav ul li:hover { 
      background: #4b545f; 
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
     } 
      nav ul li:hover a { 
       color: #fff; 
      } 

     nav ul li a { 
      display: block; padding: 25px 40px; 
      color: #757575; text-decoration: none; 
     } 


    nav ul ul { 
     background: #5f6975; border-radius: 0px; padding: 0; 
     position: absolute; top: 100%; 
    } 
     nav ul ul li { 
      float: none; 
      border-top: 1px solid #6b727c; 
      border-bottom: 1px solid #575f6a; position: relative; 
     } 
      nav ul ul li a { 
       padding: 15px 40px; 
       color: #fff; 
      } 
       nav ul ul li a:hover { 
        background: #4b545f; 
       } 

    nav ul ul ul { 
     position: absolute; left: 100%; top:0; 
    }

EDIT:

HTML-код:

<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSS Dropdown Menu</title> 

<link href="style.css" rel="stylesheet" /> 

</head> 
<body> 

<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a> 
        <ul> 
         <li><a href="#">HTML</a></li> 
         <li><a href="#">CSS</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Articles</a> 
      <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">User Experience</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Inspiration</a></li> 
    </ul> 
</nav> 

</body> 
</html>

источник

2015-12-01 Ola Hansen

Пожалуйста, разместите код, который вы пробовали. Мы не можем проверить весь сайт учебника. –

Было бы очень полезно, если вы поместите часть «HTML». –

Не могли бы вы также добавить 'html'? –

его приход от этой линии.

nav ul li:hover { 
      background: #4b545f; 
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
     }

источник

2015-12-01 07:17:18

Спасибо, но когда я пытаюсь его отредактировать, он изменит как изменения в Tutorials, так и Webdesign на белый: http://fiddle.jshell.net/uyw23c1L/ Есть ли способ сделать это, только изменится только последний? –

Используйте 'nav ul ul li: hover' вместо' nav ul li: hover' для вас пользовательский CSS. Сохраните оригинальный CSS, как есть, и добавьте 'nav ul ul li: hover' и перезапишите там CSS. –

Okey, теперь я добавил и скорректировал его, но поскольку я использую это в адаптированном коде, я еще раз не могу его заставить работать: http://fiddle.jshell.net/uyw23c1L/ –

Эти строки кода работают на парении:

nav ul li:hover { 
      background: #4b545f; 
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
     }

Так что ваши изменения цвета здесь, так что они получают отражение.

источник

2015-12-01 07:17:00

Используется для этого CSS

nav ul li:hover { 
      background: #4b545f; 
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
     }

Вы можете попробовать эту CSS или HTML

nav { 
 
\t margin: 100px auto; 
 
\t text-align: center; 
 
} 
 

 
nav ul ul { 
 
\t display: none; 
 
} 
 

 
\t nav ul li:hover > ul { 
 
\t \t display: block; 
 
\t } 
 

 

 
nav ul { 
 
\t background: #efefef; 
 
\t background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
\t background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
\t background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
 
\t box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
 
\t padding: 0 20px; 
 
\t border-radius: 10px; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t display: inline-table; 
 
} 
 
\t nav ul:after { 
 
\t \t content: ""; clear: both; display: block; 
 
\t } 
 

 
\t nav ul li { 
 
\t \t float: left; 
 
\t } 
 
\t \t nav ul li:hover { 
 
\t \t \t background: #4b545f; 
 
\t \t \t background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t \t \t background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t \t \t background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
 
\t \t } 
 
\t \t \t nav ul li:hover a { 
 
\t \t \t \t color: #fff; 
 
\t \t \t } 
 
\t \t 
 
\t \t nav ul li a { 
 
\t \t \t display: block; padding: 25px 40px; 
 
\t \t \t color: #757575; text-decoration: none; 
 
\t \t } 
 
\t \t \t 
 
\t \t 
 
\t nav ul ul { 
 
\t \t background: #5f6975; border-radius: 0px; padding: 0; 
 
\t \t position: absolute; top: 100%; 
 
\t } 
 
\t \t nav ul ul li { 
 
\t \t \t float: none; 
 
\t \t \t border-top: 1px solid #6b727c; 
 
\t \t \t border-bottom: 1px solid #575f6a; position: relative; 
 
\t \t } 
 
\t \t \t nav ul ul li a { 
 
\t \t \t \t padding: 15px 40px; 
 
\t \t \t \t color: #fff; 
 
\t \t \t } \t 
 
\t \t \t \t nav ul ul li a:hover { 
 
\t \t \t \t \t background: #4b545f; 
 
\t \t \t \t } 
 
\t \t 
 
\t nav ul ul ul { 
 
\t \t position: absolute; left: 100%; top:0; 
 
\t } 
 
\t \t

<nav> 
 
\t <ul> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">Tutorials</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Photoshop</a></li> 
 
\t \t \t \t <li><a href="#">Illustrator</a></li> 
 
\t \t \t \t <li><a href="#">Web Design</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#">HTML</a></li> 
 
\t \t \t \t \t \t <li><a href="#">CSS</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Articles</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Web Design</a></li> 
 
\t \t \t \t <li><a href="#">User Experience</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Inspiration</a></li> 
 
\t </ul> 
 
</nav>

источник

2015-12-01 07:17:09

Спасибо, но когда я попытаюсь отредактировать его, он изменит как изменения в Tutorials, так и Webdesign на белый: http://fiddle.jshell.net/uyw23c1L/ Есть ли способ сделать это, только изменится только последний? –

Неверный адрес. Это один из них: http://fiddle.jshell.net/uyw23c1L/3/ –

Какая строка определяет этот эффект наведения?

ответ

Смежные вопросы