Navigation bar css

ASP Free Forums Sponsor:

November 7th, 2005, 07:30 AM

tihonna

Contributing User

Join Date: Jun 2004

Posts: 93

Time spent in forums: 19 h 48 m 19 sec
Reputation Power: 5

Navigation bar css

I have the following code working on the side - but the submenus drop down behind the main menus - is there a way to get them to drop down on top of the main menus?

<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: top;
position: relative;
width: 10em;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 1px solid black;
border-left-width: 0;
background-color: #D8FE89;
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 7em;
background-color: #EEFFCC;
border: 1px solid black;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: red;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>

</head>

<body>
<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Home</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">2nd Menu Item</a></div>
<ul class="submenus" style="width: 14em">
<li><a href="">Sub 2 Item 1. Long text, long menu.</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3.</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">3rd Menu Item</a></div>
<ul class="submenus">
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
</ul>
</li>

</ul>

<div id="clearmenu" style="clear: left">Body</div>

</body>
</html>

Last edited by tihonna : November 7th, 2005 at 10:48 AM. Reason: Not clear enough

November 7th, 2005, 01:32 PM

banker

Charging Rhino Wizard

Join Date: Dec 2004

Location: 127.0.0.1

Posts: 2,053

Time spent in forums: 5 Days 23 h 28 m 28 sec
Reputation Power: 36

have you tried using "z-index"?

__________________
ShepherdWeb :: Charging Rhino Wizard

I know of no more encouraging fact than the unquestionable ability of man to elevate his life by conscious endeavor.
{Henry David Thoreau}

§ shepherdweb.com
§ fariswheel productions
§ reagan administration

Last edited by banker : November 7th, 2005 at 01:33 PM. Reason: add question mark

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: