Проблема с выпадающим меню, оказывает влияние на активные кнопки.

LokiBrayn · October 24, 2018

Добрый день!
Подскажите как поправить код, дело в том когда я добавляю код на страницу его стиль цепляет другие активные кнопки на сайте

Код:

Скрытый текст


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<style>
body {
}

.cm-e-menu1{background-color: #222;
	position: relative;
	z-index: 1000;
	color: #fff;
	font-weight: 200;
	box-shadow: 0 0 5px black;
 
 }
ul {
  font: 1em/1.2em Helvetica, Arial, sans-serif; margin: 0; padding: 0; 

}
ul li {


}

li {
  position: relative;
  display: inline-table;
  list-style: none;
}
li a {
  display: block;
  padding: 1em 1.2em;
  color: #ccc;
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s;
  margin-right: 5em; 
}
li a:not(:only-child):after {
  content: '\2198';
  display: inline-table;
  padding-left: .25em;
  color: #ee4136;
  
  
  
}
li a:hover {
  color: white;
  background: #ee4136;
  
}

.top-level{
  text-align: center;
 
  
}

.second-level,
.third-level {
  min-width: 12em;
  border: 1px; 
  
  
}


/*dropdown menu styles*/
/*first level*/
.top-level li:hover .second-level {position: absolute;
  left: 0;
  text-align: left;
  
  
  
}
.second-level:before {
  content: '';
  position: absolute;
  z-index:100;
  top: -8px;
  left: 2em;
  border-bottom: 8px solid #71200f;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  
  
  
}
.second-level {
  position: absolute;
  top: 100%;
  left: -9999em;
  background-color: #222
  
}
.second-level li {
  position: relative;
  display: block;
}
.second-level li a {
  margin: 0;
}

/*second level*/
.second-level li:hover .third-level1 {
  left: 100%;
}
.third-level:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -8px;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid #71200f;
}
.third-level {
  position: absolute;
  left: -9999em;
  top: 0;
  background-color: #222
}

 
</style>
<div class="cm-e-menu1">
<ul class="top-level">
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">О нас</a>
    <ul class="second-level">
      <li>
        <a href="#">Кто мы?</a>
      </li>
      <li>
        <ul class="third-level">
          <li>
            <a href="#">Откуда она?</a>
          </li>
          <li>
            <a href="#">Чем она лучше?</a>
          </li>
          <li>
            <a href="#">Откуда такая цена!?</a>
          </li>
        </ul>
        <a href="#">Наша продукция</a>
      </li>
      <li>
        <a href="#">Контакты</a>
        <ul class="third-level">
          <li>
            <a href="#">Точка самовывоза</a>
          </li>
          <li>
            <a href="#">Колл-центр</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
 
 <li>
    <a href="#">Магазин</a>
    <ul class="second-level">
<li>
      </li>
       <li>
        <ul class="third-level">
          <li>
            <a href="#">Кварцевые</a>
          </li>
          <li>
            <a href="#">Умные и цифровые</a>
          </li>
        </ul>
        <a href="#">Часы</a>
         </li>
         <li>
        <a href="#">Для дома и дачи</a>
      </li>
      <li>
        <a href="#">Аксессуары для телефона</a>
      </li>
       <li>
        <a href="#">Для девушек</a>
      </li>
       <li>
        <a href="#">Для детишек</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Отзывы</a>
  </li>
</ul>
</div>
</head>

Так же прикладываю скрины того к чему приводит этот код и как должно быть в оригинале.

Может я как то не правильно закрываю блок?

Дело в том что это конструктор сайта и я в виде блока вставляю туда html код.

Edited October 24, 2018 by klierik

LokiBrayn · October 24, 2018

3 часа назад, LokiBrayn сказал:

Добрый день!
Подскажите как поправить код, дело в том когда я добавляю код на страницу его стиль цепляет другие активные кнопки на сайте

Код:

Скрытый текст



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<style>
body {
}

.cm-e-menu1{background-color: #222;
	position: relative;
	z-index: 1000;
	color: #fff;
	font-weight: 200;
	box-shadow: 0 0 5px black;
 
 }
ul {
  font: 1em/1.2em Helvetica, Arial, sans-serif; margin: 0; padding: 0; 

}
ul li {


}

li {
  position: relative;
  display: inline-table;
  list-style: none;
}
li a {
  display: block;
  padding: 1em 1.2em;
  color: #ccc;
  text-decoration: none;
  border-radius: 3px;
  transition: background .2s;
  margin-right: 5em; 
}
li a:not(:only-child):after {
  content: '\2198';
  display: inline-table;
  padding-left: .25em;
  color: #ee4136;
  
  
  
}
li a:hover {
  color: white;
  background: #ee4136;
  
}

.top-level{
  text-align: center;
 
  
}

.second-level,
.third-level {
  min-width: 12em;
  border: 1px; 
  
  
}


/*dropdown menu styles*/
/*first level*/
.top-level li:hover .second-level {position: absolute;
  left: 0;
  text-align: left;
  
  
  
}
.second-level:before {
  content: '';
  position: absolute;
  z-index:100;
  top: -8px;
  left: 2em;
  border-bottom: 8px solid #71200f;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  
  
  
}
.second-level {
  position: absolute;
  top: 100%;
  left: -9999em;
  background-color: #222
  
}
.second-level li {
  position: relative;
  display: block;
}
.second-level li a {
  margin: 0;
}

/*second level*/
.second-level li:hover .third-level1 {
  left: 100%;
}
.third-level:before {
  content: '';
  position: absolute;
  top: 10px;
  left: -8px;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid #71200f;
}
.third-level {
  position: absolute;
  left: -9999em;
  top: 0;
  background-color: #222
}

 
</style>
<div class="cm-e-menu1">
<ul class="top-level">
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">О нас</a>
    <ul class="second-level">
      <li>
        <a href="#">Кто мы?</a>
      </li>
      <li>
        <ul class="third-level">
          <li>
            <a href="#">Откуда она?</a>
          </li>
          <li>
            <a href="#">Чем она лучше?</a>
          </li>
          <li>
            <a href="#">Откуда такая цена!?</a>
          </li>
        </ul>
        <a href="#">Наша продукция</a>
      </li>
      <li>
        <a href="#">Контакты</a>
        <ul class="third-level">
          <li>
            <a href="#">Точка самовывоза</a>
          </li>
          <li>
            <a href="#">Колл-центр</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
 
 <li>
    <a href="#">Магазин</a>
    <ul class="second-level">
<li>
      </li>
       <li>
        <ul class="third-level">
          <li>
            <a href="#">Кварцевые</a>
          </li>
          <li>
            <a href="#">Умные и цифровые</a>
          </li>
        </ul>
        <a href="#">Часы</a>
         </li>
         <li>
        <a href="#">Для дома и дачи</a>
      </li>
      <li>
        <a href="#">Аксессуары для телефона</a>
      </li>
       <li>
        <a href="#">Для девушек</a>
      </li>
       <li>
        <a href="#">Для детишек</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Отзывы</a>
  </li>
</ul>
</div>
</head>

Так же прикладываю скрины того к чему приводит этот код и как должно быть в оригинале.

Может я как то не правильно закрываю блок?

Дело в том что это конструктор сайта и я в виде блока вставляю туда html код.

Я победил!!!
Для этого нужно было в css перед тегами <ul><li> и пр. привязать блок <.cm-e-menu> вот так → .cm-e-menu ul {"ваш код"}

Edited October 24, 2018 by klierik

Sign In

Проблема с выпадающим меню, оказывает влияние на активные кнопки.

Question

LokiBrayn

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

LokiBrayn

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information