logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
How to Create a Horizontal Drop-Down Menu with HTML, CSS and Javascript
Ishola Ayinla    May 19, 2017 at 08:40 AM    1    3009
Good day everybody!
Please I am having an issue with creating a horizontal drop-down menu. Can any one help me with a sample code so that I can develop on it?
Back to All Forum Posts

1 Answer
Ishola Wasiu says...
May 19, 2017 at 10:48 AM

Creating horizontal drop-down menu with HTML, CSS and JavaScript is quite easy.

Create a new file with the name "horizontal_menu.htm" then copy and paste the following codes in it:

<html>
<head>
<style>
<!--
table.tutor{font-size:14px;font-weight:bold;background:black}
table.tutor span{margin-left:5px}
table.tutor a{color:#FFFFFF;text-decoration:none;font:bold; display:block; clear:both; width:120px;border-top:#000000 1px solid;border-bottom:#000000 1px solid;border-left:#000000 1px solid;border-right:#000000 1px solid;padding:5px}
table.tutor a:hover{background:#0066FF}
table.tutor td{cursor:pointer; padding:0px; padding-top:10px; width:120px;}
table.tutor td.menu{background:#00CCFF; cursor:pointer; padding:0px;}
table.tutor.menu
{
font-size:14px;
position:absolute;
display:none;
width:120px
}
-->
</style>
<script type="text/javascript">
<!--
function showmenu(what,elmnt)
{
document.all(elmnt).style.display="block";
what.style.background="#00CCFF";
what.style.color="#FFFFFF";
}
function hidemenu(what,elmnt)
{
document.all(elmnt).style.display="none";
what.style.background="#FF8080";
what.style.color="#000000";
}
//-->
</script>
</head>
<body>
<table class="tutor">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu(this,'tutorials')" onmouseout="hidemenu(this,'tutorials')">
<span>Tutorials</span><br />
<table class="menu" id="tutorials">
<tr><td class="menu"><a href="#">HTML</a>
<a href="#">XHTML</a>
<a href="#">CSS</a>
<a href="#">XML</a>
<a href="#">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu(this,'scripting')" onmouseout="hidemenu(this,'scripting')">
<span>Scripting</span><br />
<table class="menu" id="scripting">
<tr><td class="menu"><a href="#">JavaScript</a>
<a href="#">VBScript</a>
<a href="#">DHTML</a>
<a href="#">ASP</a>
<a href="#">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu(this,'validation')" onmouseout="hidemenu(this,'validation')">
<span>Validation</span><br />
<table class="menu" id="validation">
<tr><td class="menu"><a href="#">Validate HTML</a>
<a href="#">Validate XHTML</a>
<a href="#">Validate CSS</a>
<a href="#">Validate XML</a>
<a href="#">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Full Details