css dropdown expands whole nav bar with it

Question

Drop down issues

I'm trying to make a purely CSS dropdown menu and I have looked at other questions about this, but none of the solutions seem to work. The problem I have is that when I hover over the drop down button, it does display the menu, however it brings the whole nav-bar down with it.

body {
  background-color: #15083E;
  margin: 0;
}

.top-buttons {
  position: fixed;
  width: 100%;
  z-index: 99;
}

.top-buttons #logo {
  font-family: arial;
  text-align: center;
  padding: 14px;
  background-color: white;
}

.top-buttons>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #15083E;
  border-style: solid;
  border-bottom: 1px solid white;
  position: relative;
}

.top-buttons>ul>li {
  float: left;
}

.top-buttons>ul>li>ul {
  display: none;
  background: #666;
  padding: 0;
  position: relative;
  top: 100%;
}

.top-buttons>ul>li a {
  display: block;
  color: white;
  font-family: arial, sans-serif;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  min-width: 7em;
}

.top-buttons li a:hover {
  background-color: #CC3E54;
}

.active {
  background-color: #CC3E54;
}

.top-buttons ul li:hover>ul {
  display: block;
  position: relative;
  float: none;
  max-width: 7rem;
}

.top-buttons ul ul {
  display: none;
  position: absolute;
  vertical-align: top;
}

.top-buttons>ul ul>li {
  background-color: #15083E;
  list-style-type: none;
}

.top-buttons>ul ul>li a {
  background-color: #15083E;
}

<nav class="top-buttons">
  <ul>
    <li id="logo">Logo</li>
    <li><a class="active" href="index.htm">Home</a></li>
    <li><a href="#">Placeholder</a></li>
    <li><a>DropDown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

My html probably isn't the best, i'm relatively new to it.

Any suggestions would be greatly appreciated!

Answer 1

Your HTML isn't bad. You were pretty close to a working solution. The main thing you were missing was that your dropdown needs to use absolute positioning inside it's relative positioned parent element. The reason the parent needs relative positioning is so that the absolute positioned child element (the dropdown menu) can be contained within it, otherwise it'll end up where you don't want it.

The other thing that was somewhat important to fix was overflow: hidden; on the top level ul. Once absolute positioning is in place for the dropdown, overflow hidden will hide anything that's outside of the ul. You don't want that. If you remove it then your bottom border doesn't end up where you want it so you need another way to clear the floated li. I used a clearfix to do this, hence the addition of the .cf class on the ul.

body {
  background-color: #15083E;
  margin: 0;
}

.top-buttons {
  position: fixed;
  width: 100%;
  z-index: 99;
}

.top-buttons #logo {
  font-family: arial;
  text-align: center;
  padding: 14px;
  background-color: white;
}

.top-buttons>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background-color: #15083E;
  border-style: solid;
  border-bottom: 1px solid white;
  /* position: relative; */
}

.top-buttons>ul>li {
  position: relative;
  /* added */
  float: left;
}

.top-buttons>ul>li>ul {
  display: none;
  background: #666;
  padding: 0;
  /* position: relative; */
  position: absolute;
  /* top: 100%; */
}

.top-buttons>ul>li a {
  display: block;
  color: white;
  font-family: arial, sans-serif;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  min-width: 7em;
}

.top-buttons li a:hover {
  background-color: #CC3E54;
}

.active {
  background-color: #CC3E54;
}

.top-buttons ul li:hover>ul {
  display: block;
  /* position: relative; */
  /* float: none; */
  max-width: 7rem;
}


/*
.top-buttons ul ul {
  display: none;
  position: absolute;
  vertical-align: top;
}
*/

.top-buttons>ul ul>li {
  background-color: #15083E;
  list-style-type: none;
}

.top-buttons>ul ul>li a {
  background-color: #15083E;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

<nav class="top-buttons">

  <ul class="cf">
    <li id="logo">Logo</li>
    <li><a class="active" href="index.htm">Home</a></li>
    <li><a href="#">Placeholder</a></li>
    <li><a>DropDown</a>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
  </ul>
  
</nav>

I see a few areas of improvement for the CSS but overall not bad.