When devising navigation for your website, a html dropdown menu is a common technique for creating a visual hierarchy of your webpage content.  The design and function of your main navigation can mean a huge difference in your conversion rate.  A good conversion rate is essential for proper internet marketing of your business.  Your visitors need direction, and it is up to you to lead them!  Let's review basic dropdown navigation menu's first:

Your Basic Dropdown Navigation in HTML & CSS.

Their are multiple ways to code and structure your dropdown navigation menu.  This is the most basic and simple that you can achieve -

HTML Coding

<nav id="main">
    <ul id="nav-top">
        <li><a href="#">Home</a>
            <ul class="subnav">
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Our Mission</a>
                </li>
                <li><a href="#">Our Team</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul class="subnav">
                <li><a href="#">Website Development</a>
                </li>
                <li><a href="#">Online Marketing</a>
                </li>
                <li><a href="#">Social Media Marketing</a>
                </li>
            </ul>
        </li>
            </ul>
        </li>
    </ul>
</nav>

and here is the CSS coding to give it some very basic styling, with the colors used in Kickin Knowledge's navigation above. Have fun and experiment with this code on your website, proper css styling can make the bland beautiful with little coding required.

CSS Coding

#main {
    width: 100%;
    height: 80px;
    background: #243B5E;
}
#main .subnav {
    display: none;
    position: absolute;
    top: 69px;
    left: 0px;
    width: 100%;
    list-style-type: none;
    background: #243B5E;
    margin: 0;
    z-index:5;
    padding:0;
}
#main .subnav li {
    display: block;
    margin:0;
}
#main .subnav li a {
    color: #fff;
    height:18px;
    padding:10px 0;
    font-size:14px;
}
#main .subnav li a:hover {
    background:#243B5E;
}
#nav-top {
    list-style-type: none;
    margin: 0;
    float: left;
    padding:0;
}
#nav-top li {
    float: left;
    position: relative;
}
#nav-top li a {
    float: left;
    font-size: 15px;
    height: 50px;
    padding-top: 20px;
    line-height: 16px;
    width: 175px;
    color: #fff; 
    text-align: center;
    text-decoration:none;
}
#nav-top li a:hover {
    text-decoration:none;
}
#nav-top li:hover .subnav {
    display: block;
}

 /pre>

for some extra flare, feel free to get creative with more advanced and modern CSS3 effects such as:

• Menu Rounded Borders - Try adding - { border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; } to your #main .subnav
  Here's a great CSS Border Radius Generator - http://border-radius.com/

and

• Box-Shadows - Try Adding - { -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow:  4px 4px 5px rgba(50, 50, 50, 0.75); box-shadow:  4px 4px 5px rgba(50, 50, 50, 0.75); to your #mainHere's a great CSS Box Shadow Generator - http://css3gen.com/box-shadow/

The concepts behind this simple HTML and CSS navigation menu translates to pretty much every website, including CMS websites such as WordPress and Joomla.  Don't be afraid to customize your themes (with the correct upgrade-safe practices, i.e. childsheets for WordPress)  A little creativity can go along way, just make sure to keep your design consistent and clean, concentrating on readability and user comfort.

Stay tuned to Kickin Knowledge, for we'll also be doing a post on responsive html dropdown menu design, for a mobile and tablet friends version of your navigation.

Are you looking for a more advanced and fast-paced learning of web design & development?

I highly recommend checking out Treehouse and checking out this awesome offer - No Contracts, No Risk & a 30-Day Money Back Guarantee. Start Learning Web Design, Coding & More Now at TeamTreehouse.com

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]