Выпадающее меню накладывается на себя

143
17 мая 2019, 01:30

Пытался сделать выпадающее меню , однако при наведении - сабменю не хочет корректно отображаться справа от основного .

http://jsfiddle.net/pnca41qz/

    * { 
  margin: 0; 
  padding: 0; 
} 
 
html { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
#wrap { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
} 
 
.all { 
  background-image: url(../img/shopORDER1.jpg); 
  background-size: cover; 
  flex-grow: 2; 
  font-size: 1.3em; 
  font-family: 'Comfortaa', cursive; 
} 
 
.OTSTUP { 
  padding-top: 20px; 
} 
 
body { 
  height: 100%; 
  color: #ffffff; 
  background: #f7f7f7; 
  font-size: 1em; 
  font-family: "Marck Script", cursive; 
  line-height: 140%; 
  margin: 0; 
  padding: 0; 
} 
 
.top-right { 
  font-size: 2.3em; 
  font-family: 'Oswald', sans-serif; 
  float: right; 
  margin-left: 50px; 
  color: #C0F400; 
} 
 
.top-left { 
  float: left; 
} 
 
.menu { 
  margin: 0; 
  padding: 0; 
} 
 
.menu ul, 
.menu ol { 
  list-style: none; 
} 
 
.menu>ul { 
  display: flex; 
  justify-content: center; 
} 
 
.menu>ul li { 
  position: relative; 
  border-right: 2px solid #403FD7; 
} 
 
.menu>ul li a { 
  display: block; 
  background: #ffffff; 
  padding: 15px 35px 15px 45px; 
  font-size: 25px; 
  color: #454448; 
  text-decoration: none; 
  transition: 1s ease; 
} 
 
.menu>ul li:first-child { 
  border-left: 2px solid #403F89; 
} 
 
.menu>ul li:last-child { 
  border-right: 2px solid #403F89; 
} 
 
.menu li a:hover { 
  background: #403F89; 
  color: #ffffff; 
  box-shadow: 1px 5px 10px -5px #1A72E6; 
  transition: 1s ease; 
} 
 
header img { 
  width: 60px; 
} 
 
.logo { 
  font-size: 4em; 
  font-family: 'Caveat', cursive; 
  text-align: center; 
  padding-top: 10px; 
} 
 
img { 
  max-width: 100%; 
  height: 100%; 
  width: auto\9; 
} 
 
header, 
#footer { 
  width: 98%; 
  background-color: #403F89; 
} 
 
header { 
  border-bottom: 2px solid #ffffff; 
  padding: 1%; 
} 
 
#footer { 
  border-top: 2px solid #ffffff; 
  margin-top: 12px; 
  padding-top: 30px; 
  width: 100%; 
  margin: auto; 
  height: 100px; 
  text-align: center; 
  color: #ffffff; 
  font-family: 'Comfortaa', cursive; 
  font-size: 1em; 
} 
 
a { 
  color: #C524D3; 
  text-decoration: none; 
  transition: all.5s ease; 
  -moz-transition: all.5s ease; 
  -webkit-transition: all.5s ease; 
  -ms-transition: all.5s ease; 
} 
 
a:hover { 
  color: #000000; 
  text-decoration: none; 
  transition: all.5s ease; 
  -moz-transition: all.5s ease; 
  -webkit-transition: all.5s ease; 
  -ms-transition: all.5s ease; 
} 
 
.all a { 
  color: #E382FF; 
} 
 
.all a:hover { 
  color: #C0F400; 
} 
 
a:active { 
  color: #C4FFFF; 
} 
 
 
/* MENUSHKA */ 
 
.menu li ul { 
  position: absolute; 
  min-width: 150px; 
  display: none; 
} 
 
.menu li:hover>ul { 
  display: block; 
} 
 
.menu li>ul li { 
  border: 1px solid #1A72E6; 
} 
 
.menu li>ul li a { 
  padding: 10px; 
  text-transform: none; 
  background: #1A70E3; 
} 
 
.menu li>ul li ul { 
  position: absolute; 
  right: -250px; 
  top: 0; 
} 
 
 
/*  Videlenie  */ 
 
 ::selection { 
  background: #FFDEE3; 
  color: #000000; 
   ::-moz-selection { 
    background: #FFDEE3; 
    color: #000000; 
     ::-webkit-selection { 
      background: #FFDEE3; 
      color: #000000; 
    }
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <base target="_blank"> 
  <meta charset="UTF-8"> 
  <meta name="description" content=""> 
  <title>Заказ</title> 
  <link rel="stylesheet" type="text/css" href="css/main2.css"> 
  <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
</head> 
 
<body> 
  <div id="wrap"> 
    <header> 
      <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"> 
      <div class="logo"> 
        <span class="top-left"> <a href=""> <img src="img/VK.png" alt="" title="Группа ВК"> </a> </span> 
        <a href="Order.html" target="_self" title="Страница заказа"> Заказ </a> 
      </div> 
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
      <a href="About.html" target="_self" title="Полезная информация о нашем магазине" class="top-right"> О нас </a> 
      <a href="Main.html" target="_self" title="Главная страница магазина" class="top-right"> Кнопка </a> 
    </header> 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
    <div class="all"> 
      <nav class="menu"> 
        <ul> 
          <li> <a href="#"> Простыни </a></li> 
          <li><a href="#"> Подушки </a> 
            <ul> 
              <li><a href="#">50x70cm</a> 
                <ul> 
                  <li><a href="#">Караван</a></li> 
                  <li><a href="#">Бамбук ЭКО</a></li> 
                  <li><a href="#">ТЧ Бамбук</a></li> 
                  <li><a href="#">Шарм</a></li> 
                  <li><a href="#">Люкс</a></li> 
                  <li><a href="#">Прима</a></li> 
                  <li><a href="#">Диалог</a></li> 
                  <li><a href="#">Классика</a></li> 
                  <li><a href="#">Пуховая</a></li> 
                  <li><a href="#">Полупуховая</a></li> 
                  <li><a href="#">Green Line Хлопок</a></li> 
                  <li><a href="#">Green Line Лён</a></li> 
                  <li><a href="#">Verossa Camel</a></li> 
                  <li><a href="#">Verossa Aloe Vera</a></li> 
                  <li><a href="#">Verossa Classic</a></li> 
                  <li><a href="#">SPAtex</a></li> 
                  <li><a href="#">Коллекция 750</a></li> 
                  <li><a href="#">Коллекция 960 с бортиком</a></li> 
                  <li><a href="#">Коллекция 925 со вставкой MEMORY</a></li> 
                  <li><a href="#">Коллекция 875 с валиком</a></li> 
                  <li><a href="#">Коллекция 916 двухкамерная</a></li> 
                  <li><a href="#">Эвкалипт</a></li> 
                  <li><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="#">70x70cm</a> 
                <ul> 
                  <li><a href="#">ТЧ Бамбук</a></li> 
                  <li><a href="#">Полу-пуховая</a></li> 
                  <li><a href="#">Green Line Лён</a></li> 
                  <li><a href="#">Green Line Хлопок</a></li> 
                  <li><a href="#">Verossa Camel</a></li> 
                  <li><a href="#">Verossa Aloe Vera</a></li> 
                  <li><a href="#">Verossa Classic</a></li> 
                  <li><a href="#">SPAtex</a></li> 
                  <li><a href="#">Коллекция 750</a></li> 
                  <li><a href="#">Коллекция 960 с бортиком</a></li> 
                  <li><a href="#">Коллекция 875 с валиком</a></li> 
                  <li><a href="#">Эвкалипт</a></li> 
                  <li><a href="#">Шарм</a></li> 
                  <li><a href="#">Неженка</a></li> 
                  <li><a href="#">Люкс</a></li> 
                  <li><a href="#">Прима</a></li> 
                  <li><a href="#">Диалог</a></li> 
                  <li><a href="#">Лебяжий пух</a></li> 
                  <li><a href="#">ГАРМОНИЯ</a></li> 
                  <li><a href="#">Стандарт</a></li> 
                  <li><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="#">70x71cm</a></li> 
            </ul> 
          </li> 
          <li><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> 
      </nav> 
      <p class="OTSTUP"> Как только Вы выбрали , что покупать - свяжитесь с нами по номеру телефона 
        <a href="tel:"></a> или 
        <a href="tel:"></a>! </p> 
      <p class="OTSTUP"> Или свяжитесь с нами в <a href=""> нашей группе ВКонтакте! </a> </p> 
    </div> 
  </div> 
  <div id="footer"> 
    Все права защищены. Копирование информации и использование в коммерческих целях преследуется по закону &copy; 2018 
  </div> 
</body> 
 
</html>

Answer 1

Можно для .menu li > ul li ul задать фиксированную ширину, например width: 250px;

* { 
  margin: 0; 
  padding: 0; 
} 
 
html { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
#wrap { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
} 
 
.all { 
  background-image: url(../img/shopORDER1.jpg); 
  background-size: cover; 
  flex-grow: 2; 
  font-size: 1.3em; 
  font-family: 'Comfortaa', cursive; 
} 
 
.OTSTUP { 
  padding-top: 20px; 
} 
 
body { 
  height: 100%; 
  color: #ffffff; 
  background: #f7f7f7; 
  font-size: 1em; 
  font-family: "Marck Script", cursive; 
  line-height: 140%; 
  margin: 0; 
  padding: 0; 
} 
 
.top-right { 
  font-size: 2.3em; 
  font-family: 'Oswald', sans-serif; 
  float: right; 
  margin-left: 50px; 
  color: #C0F400; 
} 
 
.top-left { 
  float: left; 
} 
 
.menu { 
  margin: 0; 
  padding: 0; 
} 
 
.menu ul, 
.menu ol { 
  list-style: none; 
} 
 
.menu>ul { 
  display: flex; 
  justify-content: center; 
} 
 
.menu>ul li { 
  position: relative; 
  border-right: 2px solid #403FD7; 
} 
 
.menu>ul li a { 
  display: block; 
  background: #ffffff; 
  padding: 15px 35px 15px 45px; 
  font-size: 25px; 
  color: #454448; 
  text-decoration: none; 
  transition: 1s ease; 
} 
 
.menu>ul li:first-child { 
  border-left: 2px solid #403F89; 
} 
 
.menu>ul li:last-child { 
  border-right: 2px solid #403F89; 
} 
 
.menu li a:hover { 
  background: #403F89; 
  color: #ffffff; 
  box-shadow: 1px 5px 10px -5px #1A72E6; 
  transition: 1s ease; 
} 
 
header img { 
  width: 60px; 
} 
 
.logo { 
  font-size: 4em; 
  font-family: 'Caveat', cursive; 
  text-align: center; 
  padding-top: 10px; 
} 
 
img { 
  max-width: 100%; 
  height: 100%; 
  width: auto\9; 
} 
 
header, 
#footer { 
  width: 98%; 
  background-color: #403F89; 
} 
 
header { 
  border-bottom: 2px solid #ffffff; 
  padding: 1%; 
} 
 
#footer { 
  border-top: 2px solid #ffffff; 
  margin-top: 12px; 
  padding-top: 30px; 
  width: 100%; 
  margin: auto; 
  height: 100px; 
  text-align: center; 
  color: #ffffff; 
  font-family: 'Comfortaa', cursive; 
  font-size: 1em; 
} 
 
a { 
  color: #C524D3; 
  text-decoration: none; 
  transition: all.5s ease; 
  -moz-transition: all.5s ease; 
  -webkit-transition: all.5s ease; 
  -ms-transition: all.5s ease; 
} 
 
a:hover { 
  color: #000000; 
  text-decoration: none; 
  transition: all.5s ease; 
  -moz-transition: all.5s ease; 
  -webkit-transition: all.5s ease; 
  -ms-transition: all.5s ease; 
} 
 
.all a { 
  color: #E382FF; 
} 
 
.all a:hover { 
  color: #C0F400; 
} 
 
a:active { 
  color: #C4FFFF; 
} 
 
 
/* MENUSHKA */ 
 
.menu li ul { 
  position: absolute; 
  min-width: 150px; 
  display: none; 
} 
 
.menu li:hover>ul { 
  display: block; 
} 
 
.menu li>ul li { 
  border: 1px solid #1A72E6; 
} 
 
.menu li>ul li a { 
  padding: 10px; 
  text-transform: none; 
  background: #1A70E3; 
} 
 
.menu li>ul li ul { 
  position: absolute; 
  right: -250px; 
  width: 250px; 
  top: 0; 
} 
 
 
/*  Videlenie  */ 
 
 ::selection { 
  background: #FFDEE3; 
  color: #000000; 
   ::-moz-selection { 
    background: #FFDEE3; 
    color: #000000; 
     ::-webkit-selection { 
      background: #FFDEE3; 
      color: #000000; 
    }
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <base target="_blank"> 
  <meta charset="UTF-8"> 
  <meta name="description" content=""> 
  <title>Заказ</title> 
  <link rel="stylesheet" type="text/css" href="css/main2.css"> 
  <link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
</head> 
 
<body> 
  <div id="wrap"> 
    <header> 
      <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"> 
      <div class="logo"> 
        <span class="top-left"> <a href=""> <img src="img/VK.png" alt="" title="Группа ВК"> </a> </span> 
        <a href="Order.html" target="_self" title="Страница заказа"> Заказ </a> 
      </div> 
      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
      <a href="About.html" target="_self" title="Полезная информация о нашем магазине" class="top-right"> О нас </a> 
      <a href="Main.html" target="_self" title="Главная страница магазина" class="top-right"> Кнопка </a> 
    </header> 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
    <div class="all"> 
      <nav class="menu"> 
        <ul> 
          <li> <a href="#"> Простыни </a></li> 
          <li><a href="#"> Подушки </a> 
            <ul> 
              <li><a href="#">50x70cm</a> 
                <ul> 
                  <li><a href="#">Караван</a></li> 
                  <li><a href="#">Бамбук ЭКО</a></li> 
                  <li><a href="#">ТЧ Бамбук</a></li> 
                  <li><a href="#">Шарм</a></li> 
                  <li><a href="#">Люкс</a></li> 
                  <li><a href="#">Прима</a></li> 
                  <li><a href="#">Диалог</a></li> 
                  <li><a href="#">Классика</a></li> 
                  <li><a href="#">Пуховая</a></li> 
                  <li><a href="#">Полупуховая</a></li> 
                  <li><a href="#">Green Line Хлопок</a></li> 
                  <li><a href="#">Green Line Лён</a></li> 
                  <li><a href="#">Verossa Camel</a></li> 
                  <li><a href="#">Verossa Aloe Vera</a></li> 
                  <li><a href="#">Verossa Classic</a></li> 
                  <li><a href="#">SPAtex</a></li> 
                  <li><a href="#">Коллекция 750</a></li> 
                  <li><a href="#">Коллекция 960 с бортиком</a></li> 
                  <li><a href="#">Коллекция 925 со вставкой MEMORY</a></li> 
                  <li><a href="#">Коллекция 875 с валиком</a></li> 
                  <li><a href="#">Коллекция 916 двухкамерная</a></li> 
                  <li><a href="#">Эвкалипт</a></li> 
                  <li><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="#">70x70cm</a> 
                <ul> 
                  <li><a href="#">ТЧ Бамбук</a></li> 
                  <li><a href="#">Полу-пуховая</a></li> 
                  <li><a href="#">Green Line Лён</a></li> 
                  <li><a href="#">Green Line Хлопок</a></li> 
                  <li><a href="#">Verossa Camel</a></li> 
                  <li><a href="#">Verossa Aloe Vera</a></li> 
                  <li><a href="#">Verossa Classic</a></li> 
                  <li><a href="#">SPAtex</a></li> 
                  <li><a href="#">Коллекция 750</a></li> 
                  <li><a href="#">Коллекция 960 с бортиком</a></li> 
                  <li><a href="#">Коллекция 875 с валиком</a></li> 
                  <li><a href="#">Эвкалипт</a></li> 
                  <li><a href="#">Шарм</a></li> 
                  <li><a href="#">Неженка</a></li> 
                  <li><a href="#">Люкс</a></li> 
                  <li><a href="#">Прима</a></li> 
                  <li><a href="#">Диалог</a></li> 
                  <li><a href="#">Лебяжий пух</a></li> 
                  <li><a href="#">ГАРМОНИЯ</a></li> 
                  <li><a href="#">Стандарт</a></li> 
                  <li><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="#">70x71cm</a></li> 
            </ul> 
          </li> 
          <li><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> 
      </nav> 
      <p class="OTSTUP"> Как только Вы выбрали , что покупать - свяжитесь с нами по номеру телефона 
        <a href="tel:"></a> или 
        <a href="tel:"></a>! </p> 
      <p class="OTSTUP"> Или свяжитесь с нами в <a href=""> нашей группе ВКонтакте! </a> </p> 
    </div> 
  </div> 
  <div id="footer"> 
    Все права защищены. Копирование информации и использование в коммерческих целях преследуется по закону &copy; 2018 
  </div> 
</body> 
 
</html>

READ ALSO
Курсор и прозрачность в css
HTML

Курсор и прозрачность в css

У меня есть html:

 152
Правильный выбор breakpoint css
HTML

Правильный выбор breakpoint css

в psd макетах: Десктоп - ширина контейнера 1180px, мобильные - ширина контейнера 420pxДумаю, что проще будет, с учетом распространенных разрешений...

 165
Как спрятать стрелки карусели на WP?
jQuery

Как спрятать стрелки карусели на WP?

Есть карусель постов на WordPressВыводит посты с помощью доп

 193
Имитация клика при загрузке страницы
jQuery

Имитация клика при загрузке страницы

Есть код, который имитирует клик на ссылку при полной прогрузке страницыПо идее стоит таймаут, а не интервал, но клик всё равно повторяется...

 134