Nested menu issue :S

[KRMwebdesign]

I have a nested menu here [krmwebdesign.ie...]

If you hover over "our life" and go down to "prayer" the menu works fine but if I hover over "fraternal life" and try and hover over one of the sub options it goes straight onto the "prayer" submenu :S

Does anyone have any idea how I can somehow make the submenu more prominent so it goes over "prayer" or does anyone know some way I could make the "prayer" menu move down below the "fraternal life" submenu?

Any help would be much appreciated.

[enigma1]

Yes you need to leave the ul element with the relative and only setup the ul that has the sub-menus.

#nav ul {
background: #fff;
display: none;
margin: 0;
padding: 0;
width: 185px;
/*position: absolute;*/
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
}

This will make the outer ul expand now on hover but needs the absolute property over the ul with the sub-items

.......
<li><a href="#">Our Life</a>
<ul style="position: absolute">
<li><a href="#">Preaching</a></li>
.......

Hovering the first level sub-item will create the space you need and move the parent elements below so you can access them.

In terms of user interface is not great as hovering over the last item moves the list up (as the previous item closes). For this reason consider creating the subsequent drop-downs on the sides.