/* first-level list */
#topMenu_ul a {
display: block;
width: 6.4em;
text-decoration: none;
color: #FFFFFF;
padding: 1px 3px 5px 5px;
Then, what is my question?
height: 1em;
}
/* faded blue */
#topMenu_ul a:hover{
background:#5C75AA;
}
/* all list items */
#topMenu_ul li {
float: left;
padding:0;
margin:0;
}
#topMenu_ul li ul { /* second-level lists */
position: absolute;
width: 8.3em;
left: -1999px; /* more accessible than display: none */
background: #eee;
Then, what is my question?
height: auto;
margin: 0;
border-width: 1px;
Then, what is my question?
font-weight: normal;
font-size: 12px;
}
#topMenu_ul li ul li a{
color: #394664;
width: 100%;
padding:3px 6px;
white-space:nowrap;
}
#topMenu_ul li:hover ul, #topMenu_ul li li:hover ul, #topMenu_ul li.navhover ul, #topMenu_ul li li.navhover ul{ /* lists nested under hovered list items */
left: auto;
}
The above codes were tested on Firefox and it worked.
However, when I tested it on Internet Explorer 9, the list under the HELP menu failed to show up.
How can I make the items under the HELP menu show up on IE9?
This is a much simplified version of your code with the benefit of working in IE9 as well as FF and Chrome.
You can continue to modify the CSS to change colors, positions, widths, etc., but it could be a re-start for your needs.
Code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Simple Menu </title>
<style type="text/css">
.hide { display:none; }
.show { display:block; width:200px; border:1px solid black; }
a { text-decoration:none; }
.menuLI { display:block; float:left; width:70px; }
#menu li { list-style-type:none; cursor:pointer; }
#menu li:hover { background-color:orange; }
#menu div li { list-style-type:none; display:block; clear:both; }
#menu div li:hover { background-color:orange; }
#Forums div { display:none }
#NSU div { display:none; }
#Email div { display:none;}
</style>
</head>
<body>
<ul id="menu">
<li onclick="showHide('Forums',this,0)" class="menuLI">Forums</li>
<li onclick="showHide('NSU',this,1)" class="menuLI">NSU</li>
<li onclick="showHide('Email',this,2)" class="menuLI">Email</li>
<br style="clear:both" />
<div id="Forums" class="hide">
<li> <a href="http://www.webdeveloper.com">Webdeveloper</a></li>
<li> <a href="http://www.codingforums.com">Coding Forums</a></li>
<li> <a href="http://www.dreamincode.net">Dream-In-Code</a></li>
</div>
<div id="NSU" class="hide">
<li> University </li>
<li> HPD </li>
<li> Optometry </li>
<li> Library </li>
</div>
<div id="Email" class="hide">
<li> Exchange </li>
<li> Gmail </li>
<li> Bellsouth </li>
</div>
</ul>
<script type="text/javascript">
function showHide(IDS,curLI,wide) {
var sel = document.getElementById('menu').getElementsByTagName('div');
var lis = document.getElementById('menu').getElementsByTagName('li');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].className = 'hide'; }
lis[i].style.backgroundColor = "transparent";
}
sel = document.getElementById(IDS);
sel.style.marginLeft = (wide*70)+'px'; // needs to match width value of .menuLI in style section
if ( sel.className == "hide" ) {
sel.className = 'show';
curLI.style.backgroundColor = "orange";
} else {
sel.className = 'hide';
curLI.style.backgroundColor = "transparent";
}
}
</script>
</body>
</html>
If of no use to you, then just ignore the post.
BTW, it is a good idea to put your script between [ code] and [ /code] tags (without the spaces)
to make it easier to read your code as well as retain the formatting structure.
Reply With Quote
Bookmarks