Dropdown Navigation

Dropdown Navigation

Drop-down navigation works by placing a new unordered list (<ul>) inside of another list.

You can use drop-down navigation to nest your pages inside other options in the navigation bar as the example below shows.  If you wish to use any of the following examples in your work you will need to copy and paste both the <a title="HTML" href="http://code.emrysproductions.com/wiki/html/">HTML</a> and <a title="CSS" href="http://code.emrysproductions.com/wiki/css/">CSS</a> into the correct places (HTML into the body, CSS into the head.)

1)

<iframe src="//jsfiddle.net/mjdwebdesign/KsAZ8/embedded/html,css,result" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

2) Source: <a title="CSS Snippets" href="http://css-snippets.com/drop-down-navigation/" target="_blank">CSS-Snippets</a>
<p class="codepen" data-height="268" data-theme-id="0" data-slug-hash="QwyoQq" data-default-tab="html" data-user="lisa_c">See the Pen <a href="http://codepen.io/lisa_c/pen/QwyoQq/">Drop Down Navigation (CSS Only)</a> by Lisa Catalano (<a href="http://codepen.io/lisa_c">@lisa_c</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script src="//assets.codepen.io/assets/embed/ei.js" async=""></script>