Title Menu bar using CSS and Hover

This post is basically showing how the each Menu title populates sub menu using hover functionality in easiest way. This is designed based on CSS styling and uses HTML table header. I tried in google to find this but I couldn’t and eventually I’ve developed it so that people like me will no longer suffer to find kind of examples.

See the following code snippets.

.header,.header ul  {
padding: 0;
margin: 1;
list-style: none;
width: 150px;
}
.header a {
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: block;
padding: 0px 0px 0px 0px;
margin: 1;
}
.header div {
display: inline;
width: 150px;
}
.header li {
float: center;
padding: 0px 8px 2px 0px;
width: 180px;
}
/* all hoover list items */
.header li ul {
position: absolute;
background: #A0CFEC;
padding: 0px 0px 0px 0px;
width: 150px;
left: -9999px;
border-style:solid;
border-color:black;
border-width:1px;
}
/* second-level lists */
.header li:hover ul {
left: auto;
}
/* nest list under hovered list items */
.header li ul li a {
color: black;
text-decoration: none;
display: block;
font-family: Times New Roman;
font-weight: 900;
font-size: 0.7em;
width:149px;
}
.header li ul li a:hover {
color: black;
background:#A0CFEC;
width=180px;
background: #90BAD4;
}
.down {
color: #808080;
font-family:arial;
font-size: 0.8em;
font-weight: bold;
}
.uid_spacing {
padding: 0px 95px 0px 0px;
}
.nid_spacing {
padding: 0px 80px 0px 0px;
}
.fn_spacing {
padding: 0px 80px 0px 0px;
}
.ln_spacing {
padding: 0px 60px 0px 0px;
}

I hope the above CSS code will help you to get the idea. If you want to test the page, just copy the following code and run it from your browser.

<HTML>
<HEAD>
<TITLE> HTML Hover functionality </TITLE>
<STYLE TYPE=”text/css”>
.header,.header ul  {
padding: 0;
margin: 1;
list-style: none;
width: 150px;
}
.header a {
font-weight: bold;
font-family: Times New Roman;
font-style: normal;
font-size: 15px;
color: black;
text-decoration: none;
display: block;
padding: 0px 0px 0px 0px;
margin: 1;
}
.header div {
display: inline;
width: 150px;
}
.header li {
float: center;
padding: 0px 8px 2px 0px;
width: 180px;
}
/* all hoover list items */
.header li ul {
position: absolute;
background: #A0CFEC;
padding: 0px 0px 0px 0px;
width: 150px;
left: -9999px;
border-style:solid;
border-color:black;
border-width:1px;
}
/* second-level lists */
.header li:hover ul {
left: auto;
}
/* nest list under hovered list items */
.header li ul li a {
color: black;
text-decoration: none;
display: block;
font-family: Times New Roman;
font-weight: 900;
font-size: 0.7em;
width:149px;
}
.header li ul li a:hover {
color: black;
background:#A0CFEC;
width=180px;
background: #90BAD4;
}
.down {
color: #808080;
font-family:arial;
font-size: 0.8em;
font-weight: bold;
}
.uid_spacing {
padding: 0px 95px 0px 0px;
}
.nid_spacing {
padding: 0px 80px 0px 0px;
}
.fn_spacing {
padding: 0px 80px 0px 0px;
}
.ln_spacing {
padding: 0px 60px 0px 0px;
}
</STYLE>

</HEAD>
<BODY>
<H3>HTML table header (like CSS menu bar) with hover functioanlity</H3>
<FORM ACTION=”” METHOD=”POST” NAME=”searchForm”>

<BR /></BR />
<TABLE WIDTH=”600″ BORDER=1 ID=”results”>
<THEAD>
<TR BGCOLOR=”#A0CFEC”>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Home<div></div><div id=”0_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Page home</a></li>
<li><a   href=”javascript:;”>Section home</a></li>
<li><a href=”javascript:void(0);” >Area home</a>
</li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Products<div></div><div  id=”1_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Scissor</a></li>
<li><a   href=”javascript:;”>Knife</a></li>
<li><a      href=”javascript:;”>Cutlery</a>
<li><a   href=”javascript:;”>Chain</a></li>
<li><a   href=”javascript:;”>Prounes</a></li>
<li><a      href=”javascript:;”>Iron sticks</a>
</li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Services<div></div><div id=”2_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Home Repairs</a></li>
<li><a   href=”javascript:;”>Auto Repairs</a></li>
<li><a   href=”javascript:;”>Computer Repairs</a></li>
<li><a   href=”javascript:;”>Phone Repairs</a></li>
<li><a   href=”javascript:;”>Mobile Repairs</a></li>
</ul>
</li>
</ul>
</TH>
<TH ALIGN=left WIDTH=”25%”>
<ul>
<li><a href=”#”>Contact US<div></div><div id=”3_arrow”>▼</div></a>
<ul>
<li><a   href=”javascript:;”>Email</a></li>
<li><a   href=”javascript:;”>Phone</a></li>
<li><a      href=”javascript:;”>Mail</a></li>
<li><a      href=”javascript:;”>In-person</a></li>
</ul>
</li>
</ul>
</TH>
</TR>
</THEAD>

</TABLE>
</FORM>
</BODY>
</HTML>

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: