CODEWITHSUNDEEP
htmlcssnavigation
Legarndary
Legarndary

Reputation: 967

make submenu horizontal instead of vertical

so im building a navigation with 2 levels, my problem is when im hovering a parent element the sub menu will not make the links float left so they are horizontal. I know it is becouse the second levels is in a <li>tag that is not wider than about 70 px or so.

how do i overcome the width of the parent?

this is the navigation:

<nav>
<ul>
    <li><a href="#">Om rbs</a>
    </li>
    <li><a href="#">Gratis</a>
    </li>
    <li><a href="#">Kurser</a>

        <ul>
            <li><a href="#">Foredrag</a>
            </li>
            <li><a href="#">Workshops</a>
            </li>
            <li><a href="#">Proces med konsulent</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Bliv Certifikeret</a>
    </li>
    <li><a href="#">Workshops</a>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Kontakt</a>
    </li>
    <li><a href="#">Login</a>
    </li>
</ul>
</nav>

And the style:

nav {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: #2d2d2d;
  }
  nav::after {
      display: block;
      clear: both;
      content:'';
  }
  nav a {
      font-size: 16px;
      font-family:'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
      color: #fff;
      text-transform: uppercase;
  }
  nav > ul {
      position: relative;
      float: right;
      list-style: none;
      padding: 0;
      margin: 0;
  }
  nav > ul > li {
      position: relative;
      float: left;
      border-right: solid 1px rgba(255, 255, 255, 0.4);
      padding: 10px 0;
  }
  nav > ul > li::after {
      position: absolute;
      bottom: -8px;
      left: 50%;
      margin-left: -6px;
      display: none;
      content:'';
      width: 12px;
      height: 12px;
      background-color: #fff;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  nav > ul > li > a:hover {
      color: #fff;
      background-color: #3e3e3e;
  }
  nav > ul > li > a {
      padding: 10px 20px;
  }
  nav > ul > li:hover > ul {
      display: block;
  }
  nav > ul > li:hover::after {
      display: block;
  }
  nav > ul > li > ul {
      position: absolute;
      padding: 0;
      top: 100%;
      left: 0;
      list-style: none;
      display: none;
  }
  nav > ul > li > ul > li {
      float: left;
      padding: 10px 0;
  }
  nav > ul > li > ul > li > a {
      color: #7c7c7c;
      white-space: nowrap;
      padding: 10px 20px;
  }
  nav > ul > li > ul > li > a:hover {
      color: #000;
      background-color: #fff;
  }

Codepen here

Upvotes: 0

Views: 207

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Update the following two styles.

 nav > ul > li > ul {
  position: absolute;
  padding: 0;
  top: 100%;
  left: 0;
  list-style: none;
  display: none;
  white-space:nowrap; /* This will make all the links in one line */
  }
  nav > ul > li > ul > li {
  display:inline-block;
  padding: 10px 0;
  }

DEMO

Upvotes: 2

Related Questions