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