Do you know of a simple code for multi-layer menu?  I tried the following - it works but it is interfereing with other css and causing them to spill

goodk
goodk used Ask the Experts™
on
#DevMenu, .DevMenu, #DevMenu .DevMenu li
{
    margin: 0px;
    padding: 0px;
}
#DevMenu li
{
    float: left;
    display: inline;
    cursor: pointer;
    list-style: none;
    padding: 0px 10px 0px 10px;
    border: 1px #000 solid;
    position: relative;
    background-color: #C0C0C0;
}
#DevMenu li ul.first
{
    left: -1px;
    top: 100%;
}
li, li a
{
    color: #000;
    text-decoration: none;
    font-family: 'Arial Narrow';
    font-size: medium;
}
#DevMenu .DevMenu li
{
    width: 100%;
    text-indent: 10px;
    line-height: 30px;
    margin-right: 10px;
    border-top: 1px #000 solid;
    border-bottom: 1px #000 solid;
    border-left: none;
    border-right: none;
    background: #fff;
}
#DevMenu li a
{
    display: block;
    width: inherit;
    height: inherit;
}
ul.DevMenu
{
    display: none;
}
#DevMenu li:hover > a, #DevMenu li:hover
{
    color: #fff;
    background: #000;
}
li:hover > .DevMenu
{
    display: block;
    position: absolute;
    width: 400px;
    top: -2px;
    left: 50%;
    z-index: 1000;
    border: 1px #000 solid;
}
li:hover
{
    position: relative;
    z-index: 2000;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
I've found the best menu for this is "suckerfish".
http://www.alistapart.com/articles/dropdowns/

You can also get a more advanced version called "son of suckerfish".
http://www.htmldog.com/articles/suckerfish/dropdowns/

Alternatively you can use this generator for it if you want a graphical interface.
http://purecssmenu.com/
Commented:
no, I was asking what is wrong (if any) with my menu?  

It works and looks fine.  The only problem I am having is that it is messing up other css commands above and below the menu.  It is influencing it outside the menu.

Please help. thanks

I use it like this,

 <ul id="DevMenu">
                        <li><a href="Default.aspx"><img src="Images/home-ico-1.png" />Home</a>
                            <ul class="DevMenu first">
                                <li><a href="#">Appointment</a></li>
                                <li><a href="#">Refer a Patient</a></li>
                                <li><a href="#">Contact Us</a></li>
                                <li><a href="#">Feedback</a></li>
                            </ul>
                        </li>
                        <li><a href="Default.aspx">Cancer Info</a>
                            <ul class="DevMenu first">
                                <li><a href="http://www.cancer.org">Cancer Org</a></li>
                                <li><a href="http://www.nccn.org/index.asp">National Comprehensive Cancer Network</a></li>
                                <li><a href="http://www.asco.org/">American Society Clinical Oncology</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Hematology (Blood) Info</a>
                            <ul class="DevMenu first">
                                <li><a href="http://www.hematology.org">American Socity of Hematology</a></li>
                                <li><a href="http://www.asbmt.org/">American Society of Marrow and Blood Transplantation</a></li>
                            </ul>
                        </li>
                        <li><a href="Default.aspx">About Us</a></li>
                        <li><a href="Default.aspx">Contact Us</a></li>
                    </ul>
Commented:
can you post a link where it is in use so we can test?

Author

Commented:
http://www.aceyourplace.com/Prod/ForSale.aspx

notice how the footer is messed up
Commented:
I may have missed something here, I opened the link in both IE and FF but it seemed to work ok, may be an additional screenshot to pinpoint exactly where it is going wrong

Author

Commented:
Not, sure how, but I got it to work.  There were no errors in the menu but perhaps somewhere else.

Author

Commented:
remove my comment and please close - thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial