Simple CSS Horizontal Menu

27 Dec

Horizontal Menu’s are simple in design and do not confuse the users with respect to navigations.Since words are read from left to right/Top left to bottom right in the computer screen, I feel having horizontal menus somewhat enhance your site’s user experiences.Below is one of the simple CSS code which I tried and worked for me while building horizontal menus,

<meta charset=”utf-8″>
<title>Sample Horizontal CSS Menu</title>
<style type=”text/css”>
#idmenudiv {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    text-align: justify;
    margin:20px ;   
    padding: 15px;   
    width: 80%;
    overflow: hidden;
    position: absolute;
    visibility: visible;
    z-index: auto;
    height: auto;
    border:solid #55DFAA;
    background-color: transparent;

ul li a{

    list-style:none !important;   
A:link {text-decoration:none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:16; font-weight:bold; color:#008080}


<div class=”clmenudiv” id=”idmenudiv”>
<ul class=”clulmenu” id=”idulmenu” dir=”ltr” lang=”en”>
    <li ><a href=”” title=”Google1″ target=”_new”>Home</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google2″ target=”_new”>Consulting</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google3″ target=”_new”>Testing Services</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google4″ target=”_new”>Training</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google5″ target=”_new”>Affilliations</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google6″ target=”_new”>Careers</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google7″ target=”_new”>Blogs</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google8″ target=”_new”>About Us</a></li>&nbsp;|&nbsp;
    <li><a href=”” title=”Google9″ target=”_new”>Contact Us</a></li>

Once you ran the above code in browser, you should be able to see the below screenshot,


Feel free to play around with some of the CSS Style in this piece of code so as to suit your requirements in terms of look and feel.

One of the things this exercise helped in understanding is that browsers execute CSS Styles sequentially for at least some of the tags with concept of first come first served basis.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: