HMTL Dropdown Menu Made Easy

Published on:
October 10, 2013

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]

About the Author:
Justin Murray
Justin Murray

Justin Murray is the Owner and operator of Kickin Knowledge, a San Diego web design, development, and marketing company. With over 8 years of online marketing and website experience, Justin has a passion for building and promoting businesses on the internet. Justin studied Computer Science from Coleman University, with a concentration in Computer Networking, where he achievied certifications in A+ Computer Repair, as well as CompTIA Certifications in Computer Security and Networking.  Considered a "jack of all trades" when it comes to websites, Justin brings experience and dedication to Kickin Knowledge. Kickin Knowledge proudly specializes in Wordpress, Woocommerce, E-commerce, SEO, and PPC (pay per click like Google Adwords) marketing services.

Email Justin:

Questions? Call (415) 237-3932

Our Services

We offer Website Design, Local SEO, Google & Facebook Ad Management, and more!

About Us

Kickin Knowledge
San Diego Website & Marketing Company
4629 Cass St. #165
San Diego, CA
92109

envelope-olightbulb-o