CSS Menu

[Albatross]

I've been trying my first CSS, multi-levelled rollover menu, and it's turning out to be one hell of a headache. The second level (the sub-menu that appears when you roll the mouse over) is proving to be quite hard to get working.

Right now, I've got it working just fine on Safari. On Firefox, the menu drops down fine, but you can only select the first item. If you move the mouse down further, the sub-menu disappears as though you had moved the cursor off of it. I had been having a similar problem in Safari because the menu was dropping down behind the div below it, but raising the z-index fixed it. In Firefox though the menu appears on top of the div below, as it should.

On IE6, the problem is worse. When you roll over a menu which should have sub-menus, nothing happens. I don't really know where to go from here.

The basic structure of the site is pretty simple. In pseudo-CSS:

<div mainbody>
<div menubar>
<end menubar>

<div leftside>
<end leftside>

<div rightside>
<end rightside>

<end mainbody>

The page is at http://www.waveformsoftware.com/design/index.htm and the CSS file is at http://www.waveformsoftware.com/design/design.css. The CSS file is commented to make it a bit easier to read. Any help would be greatly appreciated.

 

[harjitsingh]

Try this CSS, it should work

This Part goes in the Head

<style type="text/css">
body {font-size:1%; color:#fff;}.menu {display:none;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
p { color:#000; font-size:16px;}
</style>


This is goes in the body part

<div class="menu">
<a class="outer" href="page1.html">MENU 1
<table><tr><td>
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</td></tr></table>
</a>

<a class="outer" href="page1.html">MENU 2
<table><tr><td>
<a class="inner" href="page2a.html">Page 2a</a>
<a class="inner" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</td></tr></table>
</a>
</div>

<div class="holder">
MENU 1<br />
<a class="inner" href="page1a.html">Page 1a</a>
<a class="inner" href="page1b.html">Page 1b</a>
<a class="inner" href="page1c.html">Page 1c</a>
<a class="inner" href="page1d.html">Page 1d</a>
<a class="inner" href="page1e.html">Page 1e</a>
</div>
<div class="holder">
MENU 2<br />
<a class="inner" href="page2a.html">Page 2a</a>
<a class="in聮er" href="page2b.html">Page 2b</a>
<a class="inner" href="page2c.html">Page 2c</a>
<a class="inner" href="page2d.html">Page 2d</a>
</div>

Hope this works for you
HarRy

 

[Albatross]

Unfortunately, that made it so that every time a second-level menu dropped down, it pushed down the rest of the page. If it flipped back up, the page moved back up, so the effect is a little distracting.