HMTL Dropdown Menu Made Easy

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:

and

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]

How to Add Google Authorship to your Quora Profile

Quora is one of the few websites that have metadata chosen by Google to show you Quora profile picture and Authorship for Answers of questions on the social network.  This is a great opportunity for more personal branding and reputation building.  Become an authority figure in your industry, and provide value to a fast growing community.

This is what Quora post results look like with Authorship -

 

[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"]

google authorship via quora

Justin Murray Google Authorship via Quora

 

This is the question which I answered on one of my favorite social networking websites, Quora.com -

Quora: How do you enable Google Authorship for your Quora profile?

 

Read Quote of Justin Murray's answer to Quora: How do you enable Google Authorship for your Quora profile? on Quora

So friends, what do you think of Quora.com?  Have you noticed your Quora results being indexed with your Authorship?  Please share your experience in the comments below...[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]