blisnvrwas February 2016

Navigation Menu Alignment

I'm trying to create a basic drop down menu. I'm having issues with the alignment. How can I get sub menu items to be directly underneath one another? For example, I am trying to get twitter, instagram, and facebook underneath "Social". Thanks.

https://jsfiddle.net/xalxnder/ostaqgyk/

HTML

<body>
    <ul class="main-nav">
        <li>Home</li>
        <li>Projects</li>
        <li class="dropdown">
            Social
            <ul class="sub">
                <li>Twitter</li>
                <li>Facebook</li>
                <li>Instagram</li>
            </ul>
        </li>
    </ul>
</body>

CSS

body {
    background: #000000;
    color: white;
}

.main-nav {
    float: left;
}

.main-nav li {
    font-size: 10px;
    display: inline;
    padding-right: 10px;
}

.main-nav .sub {
    color: pink;
    float: none;
    z-index: -200;
}

//**  .sub{display: none;

}
.dropdown:hover > .sub {
    display: block;
    position: absolute;
}

Answers


Hatchet February 2016

Since block-level elements take up their own line, this rule should hold you:

.sub li {
    display: block;
}

Add to .main-nav .sub:

position: absolute;
padding: 0;

body {
  background: #000000;
  color: white;
}

.main-nav {
  float: left;
}

.main-nav li {
  font-size: 10px;
  display: inline-block;
  padding-right: 10px;
}

.main-nav .sub {
  position: absolute;
  padding: 0;
  color: pink;
  float: none;
  z-index: -200;
}

.sub li {
    display: block;
}
<body>
    <ul class="main-nav">
        <li>Home</li>
        <li>Projects</li>
        <li class="dropdown">
            Social
            <ul class="sub">
                <li>Twitter</li>
                <li>Facebook</li>
                <li>Instagram</li>
            </ul>
        </li>
    </ul>
</body>


Paulie_D February 2016

Here's the basics of it.

JSFiddle

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: black;
}
ul {
  list-style-type: none;
  color: white;
}
.main-nav >li {
  display: inline-block;
  position: relative;
  padding-right: 10px;
}
.sub {
  position: absolute;
  top: 100%;
  left: 0;
  color: pink;
  /* display:none */ /* disabled for demo */
}

.dropdown:hover .sub {
  display:block;
  }
<ul class="main-nav">
  <li>Home</li>
  <li>Projects</li>
  <li class="dropdown">
    Social
    <ul class="sub">
      <li>Twitter</li>
      <li>Facebook</li>
      <li>Instagram</li>
    </ul>
  </li>
</ul>

Post Status

Asked in February 2016
Viewed 1,600 times
Voted 12
Answered 2 times

Search




Leave an answer