Creating A Dropdown List Item Menu With CSS Only

In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio

Solution 1:

This is the basics of it:

nav {
  position: absolute;
  padding: 10px 0;
}
nav ul {
  list-style: none;
  ;
  padding: 0;
}
nav > ul > li {
  display: inline-block;
  position: relative;
  border: 1px solid lightgreen;
  /* for demo */
}
nav a {
  font-weight: 800;
  padding: 5px 10px;
  display: block;
}
nav > ul > li.subNav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  background: pink;
}
nav ul li.subNav:hover ul {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="index.html">About</a>
    </li>
    <li class="subNav">
      <a class="selected">Portfolio</a>
      <ul>
        <li><a href="writing_samples.html">Writing Samples</a>
        </li>
        <li><a href="photoshop.html">Photoshop</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>

The parent li is given position:relative to provide positioning context.

The submenu is positioned absolutely, at the bottom of the parent li and aligned left.

Note that I have used the direct child selector > to target only the elements I want to.

Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.

Solution 2:

You have the right idea; the comment tags in the HTML below are used to remove space between the "li" elements.

Instead of using display:none, I use visibility: hidden for S.E.O purposes.

Even though you use position: absolute, you should also use z-index so that menu elements are able to be clicked if they are overlapping other content.

.mm,
.sm {
  list-style: none;
}
.mm {
  position: relative;
  margin: 0px;
  padding: 0px;
  background-color: #000;
  border-bottom: 4px solid red;
}
.sm {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  background-color: #000;
  border-width: 0px 4px 4px 4px;
  border-style: solid;
  border-color: red;
}
.mm > li {
  display: inline-block;
}
.mm > li > a {
  display: inline-block;
  padding: 8px;
}
.sm a {
  display: block;
  padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
  visibility: visible;
}
.mm a {
  text-decoration: none;
  color: #FFF;
}
.mm a:hover {
  text-decoration: underline;
  color: yellow;
}

<nav>
    <ul class="mm">
	    <li><a href="#" title="#">AAA</a></li><!--
        --><li><a href="#" title="#">BBB</a>
            <ul class="sm">
                <li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li>
            </ul>
        </li><!--
		--><li><a href="#" title="#">CCC</a>
            <ul class="sm">
                <li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li>
            </ul>
        </li>
    </ul>
</nav>

<h1>CSS NAVIGATION</h1>