Search code examples
htmlcssdropdownbackground-color

how to stretch a UL across the browser window

I have an UL that acts as my navigation bar on my web page. currently it is all the way to the left of the screen. I would like it to be centered and have the background color stretch all the way to the left and right, Like below. what would I need to change to stretch the UL across the page like the top example image? Ideal Nav bar

Here is what it looks like currently: enter image description here

Here is my code:

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #1D3567;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent:hover>ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  background-color: #1D3567;
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #FFFFFF;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  min-width: 15em;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #95B4CA;
}
<ul id="nav_ul">
  <li class="parent"><a href="#">Home</a></li>
  <li class="parent"><a href="https:">Outlook Web</a></li>
  <li class="parent"><a href="#">Production</a>
    <ul class="child">
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="">Hennig Enclosure Systems</a></li>
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="http://">Factory Andon</a></li>
      <li class="parent"><a href="http://">Web Docs</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">IT</a>
    <ul class="child">
      <li><a href="http:/">Knowledge Base</a></li>
      <li><a href="http:/">Submit a Ticket</a></li>
      <li class="parent"><a href="http:/">Archived Links</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Office Directories</a>
    <ul class="child">
      <li><a href="http:">Hennig</a></li>
      <li><a href="http:">AME</a></li>
    </ul>
  </li>
  <li class="parent"><a href="http:">Hennig Parts</a></li>
  <li class="parent"><a href="http">Factory Andon</a></li>
  <li class="parent"><a href="https">Business Cards</a></li>
  <li class="parent"><a href="#">Reports</a>
    <ul class="child">
      <li class="parent"><a href="#">Global Shop<span class="expand">&raquo;</span></a>
        <ul class="child">
          <li><a href="inventoryl">Inventory Report</a></li>
          <li><a href="sales">Sales Report</a></li>
          <li><a href="quotesl">Quotes Report</a></li>
          <li><a href="workOrder">Work Order Report</a></li>
          <li><a href="prtUsed">Part Where Used Report</a></li>
        </ul>
      </li>
      <li class="parent"><a href="#">Ndustrios<span class="expand">&raquo;</span></a>
      </li>
    </ul>
  </li>
</ul>

Solution

  • Make your ul a flex container in which you align the children centered, and apply the background-color to this element instead of the li children by adding this rule:

    #nav_ul {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #1D3567;
}


    .parent {
  position: relative;
  float: left;
  line-height: 30px;
  background-color: #1D3567;
}

.parent a {
  margin: 10px;
  color: #FFFFFF;
  text-decoration: none;
}

.parent:hover>ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  line-height: 30px;
  border-bottom: #CCC 1px solid;
  border-right: #CCC 1px solid;
  width: 100%;
}

.child li a {
  color: #FFFFFF;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  min-width: 15em;
}

#nav_ul {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #1D3567;
}

ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}

li:hover {
  background-color: #95B4CA;
}

.parent li:hover {
  background-color: #95B4CA;
}
    <ul id="nav_ul">
  <li class="parent"><a href="#">Home</a></li>
  <li class="parent"><a href="https:">Outlook Web</a></li>
  <li class="parent"><a href="#">Production</a>
    <ul class="child">
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="">Hennig Enclosure Systems</a></li>
      <li class="parent"><a href="">Hennig South</a></li>
      <li class="parent"><a href="http://">Factory Andon</a></li>
      <li class="parent"><a href="http://">Web Docs</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">IT</a>
    <ul class="child">
      <li><a href="http:/">Knowledge Base</a></li>
      <li><a href="http:/">Submit a Ticket</a></li>
      <li class="parent"><a href="http:/">Archived Links</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#">Office Directories</a>
    <ul class="child">
      <li><a href="http:">Hennig</a></li>
      <li><a href="http:">AME</a></li>
    </ul>
  </li>
  <li class="parent"><a href="http:">Hennig Parts</a></li>
  <li class="parent"><a href="http">Factory Andon</a></li>
  <li class="parent"><a href="https">Business Cards</a></li>
  <li class="parent"><a href="#">Reports</a>
    <ul class="child">
      <li class="parent"><a href="#">Global Shop<span class="expand">&raquo;</span></a>
        <ul class="child">
          <li><a href="inventoryl">Inventory Report</a></li>
          <li><a href="sales">Sales Report</a></li>
          <li><a href="quotesl">Quotes Report</a></li>
          <li><a href="workOrder">Work Order Report</a></li>
          <li><a href="prtUsed">Part Where Used Report</a></li>
        </ul>
      </li>
      <li class="parent"><a href="#">Ndustrios<span class="expand">&raquo;</span></a>
      </li>
    </ul>
  </li>
</ul>