asked on
/* 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();});
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
TRUSTED BY
ASKER
Unfortunately I don't have access to the html to change it so it has to stay exactly as it is.
Is there anything you can suggest to get this effect (which is perfect by the way) but with the html provided?
Thanks a million for all your help.
Open in new window