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

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

dmalovichAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tej Pratap Shukla ~DexterServer AdministratorCommented:
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
0
dmalovichAuthor Commented:
Thanks for the response. Do you know what changes need to be made to my css to make it work?
0
Tej Pratap Shukla ~DexterServer AdministratorCommented:
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
0
Determine the Perfect Price for Your 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 with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

dmalovichAuthor 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?
0
dmalovichAuthor 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;
}
0
Tej Pratap Shukla ~DexterServer AdministratorCommented:
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
0
dmalovichAuthor 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.
0
Tej Pratap Shukla ~DexterServer AdministratorCommented:
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
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dmalovichAuthor Commented:
Thank you so much
0
Tej Pratap Shukla ~DexterServer AdministratorCommented:
You're welcome :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.