Easy to make Horizontal Collapsing Menu done in CSS with the assistance of JavaScript to Show and Hide the menus.
You can easily change the menus the show and hide when you click aswell its easy and simple to understand.
Enjoy!
/*Menu look*/
#menu li {
padding-top:6px 3px 6px 3px;
border:solid 1px #000;/*Border Size and Color */
margin::0px;
list-style-type:none; /*Get rid of pesky bullets */
width:120px; /*Change width to resize */
min-height:12px;
font-size:12px;
font-weight:bold;
background-color:#FFF; /*Non Hover Color */
color:#000; /*Change text color */
}
/* Makes the Menu Change Color */
#menu li:hover {
background-color:#CCC;
}
/*How do links look?*/
#menu a {
color:#000;
text-decoration:none;
/*Make entire menu linked not just text */
display:block;
}
/*Across Rules */
.across {
float:left; /*Make the menu span horizontally */
padding:0px;
margin:0px;
white-space:nowrap;
/*All text on one line */
overflow:hidden; /*Hide text if too long */
}
/*Makes the Sub Menus*/
.sub {
max-width:inherit;
margin:0px;
padding:0px;
/*Text can be as long as you want */
white-space:normal;
}
//Show the Elements in the array obj
function show(obj){
list = obj.split(",");
for(i in list){
document.getElementById(list[i]).style.display = '';
}
}
//Hide the Elements in array obj
function hide(obj){
list = obj.split(",");
for(i in list){
//The display style when set to 'none' makes the object invisible.
var e = document.getElementById(list[i]).style.display;
if(!e) //If the menu is visible hide it
document.getElementById(list[i]).style.display = 'none';
}
}
<!--Hide your sub menus when everything is loading -->
<body onLoad="hide('1,2,3')">
<div id="menu">
<!-- Use the rule set "across" to create each parent menu -->
<ul class="across">
<li onMouseOver="show('1');" onMouseOut="hide('1');">
<a href="#">Menu 1</a></li>
<!-- Use the rule set "sub" to create each sub menu -->
<ul onMouseOver="show('1');" onMouseOut="hide('1');" class="sub" id="1">
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</ul>
<ul class="across">
<li onMouseOver="show('2')" onMouseOut="hide('2')">
<a href="#">Menu 2</a></li>
<ul onMouseOver="show('2');" onMouseOut="hide('2');" class="sub" id="2">
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</ul>
<ul class="across">
<li onMouseOver="show('3')" onMouseOut="hide('3')">
<a href="#">Menu 3</a></li>
<ul onMouseOver="show('3');" onMouseOut="hide('3');" class="sub" id="3">
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul>
</ul>
</div>
</body>