/* html */
<div id="main_menu">
<ul id="nav">
<!-- Start of CMS Top Menu Object -->
<li class="link_selected"><a href="" >H</a></li>
<li class="link"><a href="" >M</a>
<ul>
<li class="link"><a href="" class="enclose">C</a></li>
<li class="link"><a href="" >L</a></li>
<li class="link"><a href="" >V1</a></li>
<li class="link"><a href="" >V2</a></li>
<li class="link"><a href="" >V3</a></li>
<li class="link"><a href="" >V4</a></li>
</ul>
</li>
<li class="link"><a href="" >S</a>
<ul>
<li class="link"><a href="" class="enclose">C</a></li>
<li class="link"><a href="" >T</a></li>
<li class="link"><a href="" >G</a></li>
<li class="link"><a href="" >I</a></li>
<li class="link"><a href="" >P</a></li>
<li class="link"><a href="" >C</a></li>
<li class="link"><a href="" >M</a></li>
</ul>
</li>
<li class="link"><a href="" >Q</a></li>
<li class="link"><a href="" class="enclose">C</a></li>
<!-- End of CMS Top Menu Object -->
</ul>
</div>
/* CSS */
ul#nav, ul#nav ul
{
list-style-type:none;
padding: 0;
width: 228px;
margin:1px 0px 1px 1px;
}
ul#nav a
{
display: block;
text-decoration: none;
}
ul#nav li {
margin-top: 1px;
}
ul#nav li a
{
width:197px;
font-weight: bold;
color: white;
background: #005883 url(link_image.jpg) no-repeat 8px 9px;
margin-bottom: 1px;
padding: 7px 0 0px 31px;
min-height:24px;
}
ul#nav li a:hover
{
}
ul#nav li ul li a
{
color: #818085;
background-color: #bcdeef;
padding-left: 30px;
font-weight:normal;
background-image:none;
font-size:.9em;
}
ul#nav li ul li a:hover
{
text-decoration:underline;
}
.code
{
border: 1px solid #ccc;
list-style-type: decimal-leading-zero;
padding: 5px;
margin: 0;
}
.code code
{
display: block;
padding: 3px;
margin-bottom: 0;
}
.code li
{
background: #ddd;
border: 1px solid #ccc;
margin: 0 0 2px 2.2em;
}
.indent1
{
padding-left: 1em;
}
.indent2
{
padding-left: 2em;
}
/*jQuery*/
function initMenu() {
$('#nav ul').hide();
$('#nav ul:first').hide();
$('#nav li a').hover(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
},
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
checkElement.slideDown('normal');
$('#nav ul:visible').slideUp('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
Do more with
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
ul#nav, ul#nav ul
{
list-style-type: none;
padding: 0;
width: 228px;
margin: 1px 0px 1px 1px;
}
ul#nav a
{
display: block;
text-decoration: none;
}
ul#nav li
{
margin-top: 1px;
}
ul#nav li a
{
width: 197px;
font-weight: bold;
color: white;
background: #005883 url(link_image.jpg) no-repeat 8px 9px;
margin-bottom: 1px;
padding: 7px 0 0px 31px;
min-height: 24px;
}
ul#nav li a:hover
{
}
ul#nav li ul li a
{
color: #818085;
background-color: #bcdeef;
padding-left: 30px;
font-weight: normal;
background-image: none;
font-size: .9em;
}
ul#nav li ul li a:hover
{
text-decoration: underline;
}
.code
{
border: 1px solid #ccc;
list-style-type: decimal-leading-zero;
padding: 5px;
margin: 0;
}
.code code
{
display: block;
padding: 3px;
margin-bottom: 0;
}
.code li
{
background: #ddd;
border: 1px solid #ccc;
margin: 0 0 2px 2.2em;
}
.indent1
{
padding-left: 1em;
}
.indent2
{
padding-left: 2em;
}
</style>
</head>
<body>
<div id="main_menu">
<ul id="nav">
<!-- Start of CMS Top Menu Object -->
<li class="link menuitem selected"><a href="">H</a></li>
<li class="link menuitem"><a href="">M</a>
<ul>
<li class="link"><a href="" class="enclose">C</a></li>
<li class="link"><a href="">L</a></li>
<li class="link"><a href="">V1</a></li>
<li class="link"><a href="">V2</a></li>
<li class="link"><a href="">V3</a></li>
<li class="link"><a href="">V4</a></li>
</ul>
</li>
<li class="link menuitem"><a href="">S</a>
<ul>
<li class="link"><a href="" class="enclose">C</a></li>
<li class="link"><a href="">T</a></li>
<li class="link"><a href="">G</a></li>
<li class="link"><a href="">I</a></li>
<li class="link"><a href="">P</a></li>
<li class="link"><a href="">C</a></li>
<li class="link"><a href="">M</a></li>
</ul>
</li>
<li class="link menuitem"><a href="">Q</a></li>
<li class="link menuitem"><a href="" class="enclose">C</a></li>
<!-- End of CMS Top Menu Object -->
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initMenu() {
$('#nav ul').hide();
$('#nav ul:first').hide();
var menus = $('#nav .menuitem');
$('#nav .menuitem').hover(function () {
var menu = $(this);
var prevSelectedMenu = $(menus).filter('.selected');
prevSelectedMenu.removeClass('selected');
prevSelectedMenu = $('ul', prevSelectedMenu);
menu.addClass('selected');
var submenu = $('ul', menu);
if (!submenu.is(':visible')) {
//console.log('show');
prevSelectedMenu.slideUp('normal');
submenu.slideDown('normal');
}
},
function (e) {
//Comparing with main menu id <div id="main_menu">
if ($(e.relatedTarget).attr('id') != 'main_menu') return;
var menu = $(this);
var submenu = $('ul', menu);
if (submenu.is(':visible')) {
submenu.slideUp('normal');
return false;
}
});
}
$(document).ready(function () { initMenu(); });
</script>
</body>
</html>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial