How to add third level css menu to my existing css/html code

dmalovich
dmalovich used Ask the Experts™
on
I have this html and css menu. I'm trying to add a third level to the menu where 'Add Scores' has 2 menu items that shoot out to the right. What changes need to be made to the css in order for this to work.

The result would be:
'Scores'
'Add Scores' -> Level 3-A-1
                         Level 3-A-2

<div id="menu">
    <ul>
        <li>SCORES
            <ul>
                <li>ADD SCORES
                    <ul>
                        <li>Level 3-A-1</li>
                        <li>Level 3-A-2</li>
                    </ul>
                </li>
                <li>EDIT SCORES</li>
            </ul>
        </li>
        <li>PLAYERS
            <ul>
                <li>ADD PLAYER</li>
                <li>EDIT PLAYERS</li>
            </ul>
        </li>
        <li>COURSES
            <ul>
                <li>ADD COURSE</li>
                <li>EDIT COURSES</li>
            </ul>
        </li>
        <li>ADMIN</li>
    </ul>
</div>

#menu {
    background-color: #66A366;
    padding: 6px 0 6px 20px;
}
#menu ul li a {
    color: #fff;
    text-decoration: none;
    font-family:"Arial Narrow", "Myriad Pro";
}
#menu li {
    color: #fff;
    text-decoration: none;
    font-family:"Arial Narrow", "Myriad Pro";
}
ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
    font: bold 14px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #66A366;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
ul li:hover {
    background: #555;
    color: #fff;
}
ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    z-index:1000;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul li ul li{
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
    background: #666;
}
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Tej Pratap Shukla ~DexterServer Administrator

Commented:
Hi there
I think the following code should help you get an idea.Feel free to revert back if it works.
Thanks
~Dex
new.css
new.html

Author

Commented:
Thanks for the response. Do you know what changes need to be made to my css to make it work?
Tej Pratap Shukla ~DexterServer Administrator

Commented:
Hi there
You need to fir call ul with id="menu" instead of calling the id at div .I think adding
 #menu li:hover > ul{
     display: block;
         visibility:visible;
}
Would make the significant changes.
If you found this helpful then please vote

Thanks
~Dex
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
This link will give you an idea of what the menu looks like. http://jsfiddle.net/qdoan/FeYdA/

When you hover over the 'Scores' menu and show the 'Add Scores' menu item it should then pop out to the right and show the other 2 menu options. How can I change my existing css to make this happen?

Author

Commented:
I have made some changes to the css and I'm getting closer:

#menu {
    background-color: #66A366;
    padding: 6px 0 6px 20px;
}
#menu ul li a {
    color: #fff;
    text-decoration: none;
    font-family:"Arial Narrow", "Myriad Pro";
}
#menu li {
    color: #fff;
    text-decoration: none;
    font-family:"Arial Narrow", "Myriad Pro";
}
ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
    font: bold 14px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: #66A366;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
ul li:hover {
    background: #555;
    color: #fff;
}
ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    z-index:1000;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
ul li ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
    background: #666;
}
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}


ul li ul li:hover li{
    display: block;
    opacity: 1;
    visibility: visible;
}

ul li ul li ul li{
    padding: 15px 20px;
    font: bold 14px/18px sans-serif;
    display: none;    
    position: relative;
    top: -48px;
    left: 154px;
    width: 120px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    opacity: 0;
    z-index:1000;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
Tej Pratap Shukla ~DexterServer Administrator

Commented:
Great !
Good job there.Well i verified your css code and it worked. I think you have achieved what you wanted.You just need to do the following changes and here's an explanation for them.
You mentioned id's which are not in use as the main coding for slider level css is working without "menu " id.So i would suggest you to check out the code as attached below.If you need to segregate multiple menu's then mention the following code with the id or if you insist then i'll update it.

If you need further help, revert back and don't forget to mark this question answered if your query is resolved.

Thanks
~Dex
new.html
new.css

Author

Commented:
It's closer to the behavior that is expected. When I hover over 'Edit' scores the 'Add Scores' sub menus to the right should disappear.
Server Administrator
Commented:
Hi dmalovich
Sorry for the late reply. You just need to collapse the ul pane when you hover edit scores .Just add the following code :
 ul li ul li:hover ul{
    display: block;
    opacity: 1;
    visibility:collapse;
}
I am attaching css as well to make sure you have no confusion. I hope you found your answer, make sure you mark the thread answered for improving community response.

Thanks
~Dex
new.html
new.css

Author

Commented:
Thank you so much
Tej Pratap Shukla ~DexterServer Administrator

Commented:
You're welcome :)

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