Simple Menu Creation Using CSS
This is example of simple menu creation using CSS. Save as html and view a menu.

<html>
<head>
<title>Menu bar</title>
<style>
body {
 font: normal 11px verdana;
}
ul
{
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px; /* Width of Menu Items */
 border-bottom: 1px solid #ccc;
}
ul li
{
 position: relative;
}
ul li a
{
 display: block;
 text-decoration: none;
 color: #777;
 background: #fff; /* IE6 Bug */
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 0;
}
ul li a:hover
{
 color:#e21444; background:#f9fff9
}
/* horizontal Menu */
a
{ text-decoration: none;
 color: #777;
 background: #fff; /* IE6 Bug */
 padding: 5px;
 border: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 width:150px;
 text-align:center;
 font-size:11;
}
a:hover
{
 color:#e21444; background:#f9fff9
}


</style>
</head>
<body onload="document.getElementById('id1').style.visibility='hidden';document.getElementById('id2').style.visibility='hidden';">
<p> Click Me</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<br><br>
<table><tr valign="top">
<td>
<a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Home</a>&nbsp;&nbsp;
<ul id="id1">
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">First</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Second</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id1').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id1').style.visibility='hidden';">Third</a></li>
</ul>
<br><br>
</td>
<td>
<a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">About Us</a>&nbsp;&nbsp;
<ul id="id2">
<li><a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">First</a></li>
<li><a href="#" onMouseOver="javascript:document.getElementById('id2').style.visibility='visible';" onMouseOut="javascript:document.getElementById('id2').style.visibility='hidden';">Second</a></li>
</ul>
<br><br>
</td>
<td>
<a href="#">Contact Us</a>
</td>
</tr></table>
</body>
</html>

The menu looks like below


00:45 | Category: | 1 comments

Comments (1)

On 4 March 2022 at 00:04 , sagazhaasl said...

Casino - DrmCD
Find contact information 구미 출장안마 for Casino. 부천 출장샵 Learn about their Hospitality and Workforce status 파주 출장마사지 and qualifications. Get information on job security, salaries,  고양 출장마사지 Rating: 3 남원 출장안마 · ‎1 vote

 

Post a Comment