Этих менюх как грязи в сети. Но, я как-то нарисовал такой вот вариант, никуда он не пошел, пока что, остался в черновиках, а смысл там такой, типа, чтобы в меню были и пункты по наводке и по щелчку. Типа прописал в дата- тег какой нужен пункт - скрипт такой и сделает.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
ul.nav_menu {
background-color:brown;
height: 25px;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.nav_menu li {
list-style: none;
float: left;
border-left:1px solid rgb(230,180,180);
line-height: 25px;
height:25px;
font-weight: bold;
display:block;
padding: 0 10px;
color:white;
}
.nav_menu li:hover {
background: rgb(200,200,200);
color: black;
}
/*
* hidden list
*/
.nav_menu li ul {
display: none;
position: absolute;
padding: 0;
margin-left:-10px;
background: rgb(230,230,230);
color:black;
}
.nav_menu li ul li {
float: none;
}
.nav_menu li ul li a {
text-decoration: none;
color: black;
}
.nav_menu li a {
text-decoration: none;
color: inherit;
}
.nav_menu li a:hover {
color: inherit;
}
</style>
</head>
<body>
<ul id="nav_menu" class="nav_menu">
<li data-menu="orders">
<a href="#">Parent 1</a>
<ul data-event="click">
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
</ul>
</li>
<li data-menu="profiles">
<a href="#">Parent 2</a>
<ul data-event="click">
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
</ul>
</li>
<li data-menu="pubs">
<a href="#">Parent 3</a>
<ul data-event="mouseover, mouseout">
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
</ul>
</li>
</ul>
<script>
function TopMenu(){
var items={};
var last_index = null;
var handle = {
'click':function(){
handle.off();
if(this.dataset.menu==last_index)
last_index = null;
else
handle.on(this);
},
'mouseover':function() {
handle.off(this);
},
'mouseout':function() {
handle.off(null);
},
'on':function(elem){
last_index=elem.dataset.menu;
items[last_index].style.display="block";
// items[last_index].parentNode.classList.add('nav_menu_active');
},
'off':function(elem){
if(last_index) {
items[last_index].style.display="none";
// items[last_index].parentNode.classList.remove('nav_menu_active');
}
if(elem)
this.on(elem);
}
};
try {
var top_menu = document.getElementById('nav_menu').querySelectorAll('[data-menu]');
for(var i=0; i<top_menu.length; i++) {
var sub_menu = top_menu[i].querySelector('[data-event]');
var events = sub_menu.dataset.event.split(',');
for(var j=0; j<events.length; j++) {
var e=events[j].trim();
top_menu[i].addEventListener(e, handle[e], false);
}
items[top_menu[i].dataset.menu]=sub_menu;
}
}
catch(e){
console.log(e);
return false;
}
}
window.addEventListener('load', TopMenu, false);
</script>
</body>
</html>