Sub nav скрыт в горизонтальном меню с автоматическим переполнением

Question

Я создал простое горизонтальное меню с одним списком суб-навигации, но мне пришлось сделать видимым суб-навигацию. Я знаю, что это меню отключено.wrapper, согласно директиве overflow: auto.

Abyhow, что я могу сделать, чтобы достичь цели? Структура.wrapper должна выглядеть так ----- ------ | LOGO NAV ICONS | ----- ------ Логотип слева, рядом с ним находится список навигации с подменю. Справа должны быть иконки.

Моя проблема представлена ​​здесь: https://jsfiddle.net/4mor5g80/2/ Любые советы / идеи?

Спасибо якуб

Answer 1

Нужно установить float:left;width:100% к .wrapper тоже, потому что все элементы внутри float и так, .wrapper должен иметь высоту своего содержимого, а также установить overflow:visible вместо auto

body {
    background: #fff;
}

div.wrapper {
    background: #2e2e2e;
    min-height: 10px;
    overflow: visible;
    float:left;
    width:100%;
}

div.wrapper .info {float: right;}

div.wrapper .logo {
    float: left;
    margin-right: 2em;
    min-height: 10px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    float: left;
}
ul li ul {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;

}

li {
    display: inline;
    padding: 10px 0;
    position: relative;
}

li a {
    color: white;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: green;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

ul li:hover .dropdown-content {
    display: block;
}

h3 {
  clear: both; 
}
}

<div class="wrapper">
<p class="logo">logo</p>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li>
    <a href="#">Dropdown</a>
    <ul class="dropdown-content">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </li>
</ul>
<div class="info"><a href="a">Test</a></div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>