CSS menu with dropdown menu styling

Question

I am making this simple work list/client/stock management platform for a friend who just started his business.

It is being built in html, php and css.

The problem I am facing is with the page CSS. The sub-menu's width are being shrunk down and am not being able to change it. The menu was based from w3schools examples with a change here and there I found googling/SO searching. But can't find the reason and how to fix my problem.

body {
  margin: 0;
}

ul {
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #003366;
}

li {
  display: inline-block;
  position: relative;
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #0066CC;
}

li.dropdown {
  display: inline-block;
  border-right: 1px solid #bbb;
}

li.right {
  float: right;
}

.arrow {
  font-size: 8px;
  line-height: 0%;
}

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

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

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

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

<!-- Header -->
<header id="header">
  <nav id="nav">
    <ul>

      <li class="dropdown">
        <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Pedidos de Reparação</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Cliente</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Stock</a>
        </div>
      </li>

      <li class="right"><a href="#">Deltronic</a></li>

    </ul>
  </nav>
</header>
<!-- Header -->

<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>

I have set a jsfiddle example as well.

Hope some one can help me understand why it is happening like that and eventually achieve the result am seeking.

Answer 1

You could have compared the CSS file from w3schools to yours. Then you would have noticed that you added position: relative; to your li element. And this is exactly the reason for your problem.

li {
    display: inline-block;
    position: relative; // This is what's causing the problem
    float: left;
}

Unless there is any specific reason for the change, just get rid of it and you are good to go.

Answer 2

If I understand you correctly, you don't want the contents of the dropdown menus to wrap into two lines.

To achieve that, just add white-space: nowrap; to the rule for dropdown-content a:

body {
  margin: 0;
}

ul {
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #003366;
}

li {
  display: inline-block;
  position: relative;
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #0066CC;
}

li.dropdown {
  display: inline-block;
  border-right: 1px solid #bbb;
}

li.right {
  float: right;
}

.arrow {
  font-size: 8px;
  line-height: 0%;
}

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

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

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

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

<!-- Header -->
<header id="header">
  <nav id="nav">
    <ul>

      <li class="dropdown">
        <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Pedidos de Reparação</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Cliente</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Stock</a>
        </div>
      </li>

      <li class="right"><a href="#">Deltronic</a></li>

    </ul>
  </nav>
</header>
<!-- Header -->

<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>