0

I'm having some difficulties with a dropdown menu. I'm trying to create multiple lists next to each other with variable width. The alignment itself is working as you can see at:

http://codepen.io/anon/pen/aOrQyw

The problem is that I can't seem to figure out how to exactly place the parent divs next to each other. The parent divs are placed on top of each other right now. It seems like these list items are too long, which is weird because I didn't set a width to these items. As I read on other pages, it might be the parent divs position set to absolute that causes this problem, but I don't know how to fix it. Is there anyone who can help me out with this?

The code:

nav {
  background: #e5e7eb;
}

.wrap {
  width: 1200px;
  margin: 0 auto;
}

#primary ul {
  width: 100%;
  height: 48px;
  line-height: 48px;
  position: relative;
  display: inline-table;
  z-index: 100000;
}

#primary ul:after {
  content: "";
  display: block;
  clear: both;
}

#primary ul li {
  padding: 0 0.8333333333333333%;
  display: inline-block;
}

#primary ul li:first-child {
  padding-left: 0;
}

#primary ul li:last-child {
  padding-right: 0;
}

#primary ul li a {
  text-transform: uppercase;
  display: block;
}

#primary ul li > .submenu {
  display: none;
}

#primary ul li:hover > .submenu {
  width: 100%;
  height: 250px;
  background: pink;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
}

#primary ul li > .submenu .outer {
  position: relative;
  display: inline-block;
}

#primary ul li > .submenu .list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

#primary ul li > .submenu .list h4 {
  height: 20px;
  line-height: 20px;
  margin: 10px;
  display: block;
}

#primary ul li > .submenu .list h4 a {
  font-size: 1em;
  font-weight: 600;
  text-transform: none;
}

#primary ul li > .submenu .list ul {
  width: 100%;
  height: 210px;
  margin: 0 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-content: flex-start;
  -webkit-align-content: flex-start;
}

#primary ul li > .submenu .list ul li {
  height: 20px;
  line-height: initial;
  padding: 0;
  margin-right: 40px;
}

#primary ul ul li.title {
  font-weight: 600;
  margin: 0 0 10px 0;
}
<nav>
  <div class="wrap" id="primary">
    <ul>
      <li>Nav 1</li>
      <li><a href="/">Nav 2</a>

        <div class="submenu">
          <div class="outer" style="background: grey;">
            <div class="list ">
              <h4>List 1</h4>
              <ul>
                <li>First item in list 1</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Last item in list 1</li>
              </ul>
            </div>
          </div>

          <div class="outer " style="background: lightgrey; ">
            <div class="list ">
              <h4>List 2 with items</h4>

              <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Last item list 2</li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li>Nav 3</li>
    </ul>
  </div>
<nav>

Thanks in advance!

1 Answer 1

0

I confess from your description I'm not quite clear on the problem but I think this is what you are after.

Note: I have used flexbox throughout in the unprefixed versions. The prefixed version can be seen on the Codepen demo by clicking on the "View Compiled" button in the CSS section.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  background: lightgrey;
  text-align: center;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  padding: 1em;
  display: block;
}
a:hover {
  background: darkgrey;
  color: white;
}
.menu-top {
  display: inline-flex;
  width: 80%;
  position: relative;
}
.menu-top > li .submenu-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: pink;
  display: none;
  text-align: left;
}
.menu-top > li:hover .submenu-wrap {
  display: flex;
}
.list {
  flex: 0 0 auto;
  background: lightblue;
  margin-right: 1em;
  padding: .5em;
  margin: .5em;
}
.list h4 {
  margin-bottom: .5em;
}
<nav role='navigation'>
  <ul class="menu-top">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
      <div class="submenu-wrap">
        <div class="list">
          <h4>List 1</h4>
          <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            <li>Item 11</li>
            <li>Item 12</li>
          </ul>
        </div>

        <div class="list">
          <h4>List 2</h4>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Lorem ipsum dolor.</li>
            <li>Item 4</li>
          </ul>
        </div>
      </div>
    </li>
    <li><a href="#">Clients</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </ul>
</nav>

Codepen Demo

3
  • Thank you for your response. That's almost what I want. I forgot to mention that I want to set the height of the submenu to +/- 200px. In your example, Item 9 of List 1 should start a new row.
    – Laura
    Aug 20, 2015 at 7:43
  • By new row, do you mean new column? Without an image of what this is suppsoed to look like I'm working in the dark.
    – Paulie_D
    Aug 20, 2015 at 8:59
  • That's really another question. You might want to look into column-count.
    – Paulie_D
    Aug 20, 2015 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.