0

Есть Меню при наведении на которое оно выделяется серым цветом,в нем есть субменю, когда уводишь мышку на субменю цвет серый пропадает и становится белым. Вопрос - как сделать так, чтобы когда отводишь мышку цвет меню оставался серым???

ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}
ul:after {
	display: block;
	content: ' ';
	clear: both;
	z-index:2;
}
ul.menu > li {
	font-size: 14px;
	border: 0;
	font-family: 'OnePlusOne 2015';
	font-weight: 300;
	font-style: normal;
	float: left;
	position: relative;
	width:25%;
	text-align: center;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	border: 0px solid #f3f3f3;
	text-transform: uppercase;
	z-index:2;
}
ul.menu > li > a {
	display: inline-block;
	line-height: 40px;
	width:100%;
	color: #727272;
	background-color: white;
	text-decoration: none;
}
ul.menu > li > a:hover {
	background-color:  #f3f3f3;
}
ul.submenu {
	display: none;
	position: absolute;
	width: 100%;
	top: 40px;
	left: 0px;
	background-color: white;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	border: none;
}
ul.submenu > li {
	display: block;
}
ul.submenu > li > a {
	display: block;
	padding: 10px;
	color: black;
	background-color: white;
	text-decoration: none;
}
ul.submenu > li > a:hover {
	background-color: #ff002d;
	color: white;
	transition: 1s;
}
ul.menu > li:hover > ul.submenu {
	display: block;
}
<ul class="menu">
   <li class="menu-program"><a class="menu-link" href="#">Програми <img src="img/Rectangle 43 copy 10.png" alt=""> </a>
    <ul class="submenu">
      <li><a class="submenu-link"href="#"">чотири весілля</a></li>
      <li><a class="submenu-link" href=https://1plus1.ua/odruzhennya-naoslip>одруження наосліп</a></li>
      <li><a class="submenu-link" href="#">на ножах</a></li>
    </ul>
  </li>
  <li class="menu-program"><a class="menu-link" href="#">серіали <img src="img/Rectangle 43 copy 9.png" alt=""> </a>
    <ul class="submenu">
      <li><a class="submenu-link" href="#">хороший хлопець</a></li>
      <li><a class="submenu-link" href="#">життя після життя</a></li>
      <li><a class="submenu-link" href="#">останній москаль</a></li>
    </ul>
  </li>
  <li class="menu-program"><a class="menu-link" href=#>фільми <img src="img/Shape 32 copy 7.png" alt=""> </a>
    <ul class="submenu">
      <li><a class="submenu-link" href="#">діти пермоги</a></li>
      <li><a class="submenu-link" href="#">розщеплені на атоми</a></li>
      <li><a class="submenu-link" href="#">я з тобою</a></li>
    </ul>
  </li>
  <li class="menu-program"><a class="menu-link" href=#>ведучі <img src="img/Shape 32 copy 9.png" alt=""> </a>
    <ul class="submenu">
      <li><a class="submenu-link" href="#">Ведучі</a></li>
      <li><a class="submenu-link" href="#">Ведучі</a></li>
      <li><a class="submenu-link" href="#">Ведучі</a></li>
    </ul>
  </li>
</ul>

3
  • Если Вы хотите картинку добавить - править
    – 0xdb
    9 июн 2017 в 10:42
  • перекиньте :hover с a на родительский li как в моём ответе 9 июн 2017 в 10:55
  • @Artem Gorlachev помогло спасибо))
    – Shvaka
    9 июн 2017 в 12:01

1 ответ 1

0

Cабменю должно быть внутри раздела меню:

<nav>
  <li>
    <a href="#">меню</a>
    <ul>
      <li><a href="#">подраздел 1</a></li>
      <li><a href="#">подраздел 2</a></li>
      <li><a href="#">подраздел 3</a></li>
    <ul>
  <li>
</nav>

Тогда стилями хватать ховер на li

nav > li > ul { display: none }
nav > li:hover > ul { display: block }
nav > li:hover > a { color: red }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.