Menu
Hi guys
I’m trying to create a menu that once it’s clicked, other sub menus would pop out (something similar to Windows Start menu).
I probably need Java Script to accomplish this.
I have zero knowledge of JS, but I’m willing to learn.
Your help is greatly appreciated!
Here is my code:
HTML:
[CODE]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”menu.css”>
</head>
<body>
<div id=”menu”>
<ul>
<li><a href=””><p>Start</p></a>
<div class=”submenu”>
<ul>
<li><a href=””><p>Images </p></a></li>
<li><a href=””><p>Videos</p></a></li>
<li><a href=””><p>Documents</p></a></li>
<li><a href=””><p>Settings</p></a></li>
<li><a href=””><p>Log off</p></a></li>
</ul>
</li>
<li><a href=””><p>menu 2</p></a></li>
<li><a href=””><p>menu 3</p></a></li>
<li><a href=””><p>menu 4</p></a></li>
<li><a href=””><p>menu 5</p></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
[CODE]body{background-color:grey;}
#menu li{width:200px; float:left; list-style-type:none;}
#menu a{ border-radius:15px; display:block; color:white;
text-indent:55px; border:1px solid white; background-color:black;
font-size:18pt; font-weight:bold; text-decoration:none;}
#menu a:hover{color:black; background: white;}
#menu ul .submenu li{height:75px; float:left; width:250px;}
#menu li .submenu{position:absolute; left:20px;
width:10px; height:200px; display:none;}
#menu li:hover .submenu{display:block;}