Question

I have a simple CSS-based drop down menu that is working fine. But now I want to add a sub-menu that will display as well. Everything is working fine, except the height on the main menu list is expanding when the sub menu is displayed.

http://jsfiddle.net/GzfFs/

.cascade_content {
/* cascading sub menu */
display: none;
z-index: 103;
position: relative;
background: #FFFFFF;
border: 1px solid #8C8C8C;
padding: 10px 0px 10px 0px;
width: 190px;
left: -192px;
top: -26px;
-moz-box-shadow: 0 2px 6px 0px #8C8C8C;
-webkit-box-shadow: 0 2px 6px 0px #8C8C8C;
box-shadow: 0 2px 6px 0px #8C8C8C;

}

Note: it seems like position:relative in the sub menu is causing this… however, changing that to position:absolute creates the problem of it not appearing in the right place. I’m sure those of you with more CSS experience will identify this as a simple issue – appreciate any help you can offer!

Answer 1

http://jsfiddle.net/GzfFs/1/

.dropdown_content li {position: relative}
.cascade_content {position: absolute}

You may also need to move your ULs inside the LIs to get positioning where you want it.