Vova Vova - 1 month ago 7
CSS Question

How to align horizontally list if there is a sublist css

How to align horizontally list if there is a sublist.
menu_item (Home News ...) should to be on one line, below should to be menu_sub-item

HTML

<body>
<div class="menu">
<ul class="menu_list">
<li class="menu_item">
<a href="#" class="menu_link">Home</a>
<ul class="menu_sub-list">
<li class="menu_sub-item"><a href="#" class="menu_sub-link">About us</a></li>
<li class="menu_sub-item"><a href="#" class="menu_sub-link">Managment</a></li>
<li class="menu_sub-item"><a href="#" class="menu_sub-link">History</a></li>
<li class="menu_sub-item"><a href="#" class="menu_sub-link">Code of ethics</a></li>
</ul>
</li>
<li class="menu_item"><a href="#" class="menu_link">News</a></li>
<li class="menu_item"><a href="#" class="menu_link">For private
clients</a></li>
<li class="menu_item"><a href="#" class="menu_link">For corporate
clients</a></li>
<li class="menu_item"><a href="#" class="menu_link">Promo campaigns</a></li>
</ul>
</div>
</body>


CSS

li .menu_sub-item {
display: inline-block;
}

.menu_item {
display: inline-block;
}

Answer

Only the horizontal list items should have display: inline-block, the sub-menu items remain block elements, plus the ul of the sub-menu list should have position: absolute to keep it out of the flow of the horizontal list:

li .menu_sub-item {
  display: block;
}

ul.menu_sub-list {
  position: absolute;
  padding: 0;
}

.menu_item {
  display: inline-block;
  margin: 0 20px;
}

http://codepen.io/anon/pen/wzbYJZ

Comments