CODEWITHSUNDEEP
htmlcssnav
Matt Dempsey
Matt Dempsey

Reputation: 29

Horizontal Nav Bar Sub Navs Wrapping Down instead of using space behind(left) of it

So the problem I have is that if I select the last option on my nav bar, because the drop down has so many options, it exceeds the length left of the nav bar and wraps underneath, creating a grid of options 2x2.

I would much prefer if it used the space to the left rather than wrapping down. how can I make this possible.

nav {
  margin: 0 auto;
  text-align: center;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  color: white;
  background: #787878;
  background: linear-gradient(top, #787878 0%, #272727 100%);
  background: -moz-linear-gradient(top, #787878 0%, #272727 100%);
  background: -webkit-linear-gradient(top, #787878 0%, #272727 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 25px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover {
  background: #A8A8A8;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 15px 50px;
  color: white;
  text-decoration: none;
}
nav ul ul {
  background: #505050;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: left;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #A8A8A8;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
<nav>
  <ul>
    <li><a href="/p/">Players</a>
      <ul>
        <li><a href="#">Wonderkids</a>
        </li>
        <li><a href="#">Cheap Players</a>
        </li>
        <li><a href="#">Player Comparisons</a>
        </li>
      </ul>
    </li>
    <li><a href="/c/">Clubs</a>
      <ul>
        <li><a href="#">Club Info</a>
        </li>
        <li><a href="#">Transfer Budgets</a>
        </li>
        <li><a href="#">Sugar Daddys</a>
        </li>
      </ul>
    </li>
    <li><a href="/s/">Downloads</a>
      <ul>
        <li><a href="#">Tactics</a>
        </li>
        <li><a href="#">Shortlists</a>
          <ul>
            <li><a href="#">Various Shortlists</a>
            </li>
            <li><a href="#">Positional Shortlists</a>
            </li>
            <li><a href="#">Staff Shortlists</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="/g/">Write-Ups</a>
    </li>
    <li><a href="/p/">Social</a>
      <ul>
        <li><a href="#">Facebook</a>
        </li>
        <li><a href="#">Twitter</a>
        </li>
        <li><a href="#">Youtube</a>
        </li>
        <li><a href="#">Affiliates</a>
        </li>
      </ul>
    </li>
    <li><a href="/aboutus/">About Us</a>
    </li>
  </ul>
</nav>

enter image description here

Upvotes: 0

Views: 31

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

The problem is that the submenu is aligned on the left edge of the parent item in the main menu. Let's align the submenu on the right edge of the main menu.

  1. Add class ul-right to the corresponding <ul>.
  2. Add CSS-code nav ul ul.ul-right { right: 0; }.

Check the result:

nav {
  margin: 0 auto;
  text-align: center;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  color: white;
  background: #787878;
  background: linear-gradient(top, #787878 0%, #272727 100%);
  background: -moz-linear-gradient(top, #787878 0%, #272727 100%);
  background: -webkit-linear-gradient(top, #787878 0%, #272727 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 25px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover {
  background: #A8A8A8;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 15px 50px;
  color: white;
  text-decoration: none;
}
nav ul ul {
  background: #505050;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul.ul-right {
  right: 0;
}
nav ul ul li {
  float: left;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #A8A8A8;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
<nav>
  <ul>
    <li><a href="/p/">Players</a>
      <ul>
        <li><a href="#">Wonderkids</a>
        </li>
        <li><a href="#">Cheap Players</a>
        </li>
        <li><a href="#">Player Comparisons</a>
        </li>
      </ul>
    </li>
    <li><a href="/c/">Clubs</a>
      <ul>
        <li><a href="#">Club Info</a>
        </li>
        <li><a href="#">Transfer Budgets</a>
        </li>
        <li><a href="#">Sugar Daddys</a>
        </li>
      </ul>
    </li>
    <li><a href="/s/">Downloads</a>
      <ul>
        <li><a href="#">Tactics</a>
        </li>
        <li><a href="#">Shortlists</a>
          <ul>
            <li><a href="#">Various Shortlists</a>
            </li>
            <li><a href="#">Positional Shortlists</a>
            </li>
            <li><a href="#">Staff Shortlists</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="/g/">Write-Ups</a>
    </li>
    <li><a href="/p/">Social</a>
      <ul class="ul-right">
        <li><a href="#">Facebook</a>
        </li>
        <li><a href="#">Twitter</a>
        </li>
        <li><a href="#">Youtube</a>
        </li>
        <li><a href="#">Affiliates</a>
        </li>
      </ul>
    </li>
    <li><a href="/aboutus/">About Us</a>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions