Solved

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

Posted on 2014-03-04
10
768 Views
Last Modified: 2014-03-17
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

0
Comment
Question by:dmalovich
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39905557
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
 

Author Comment

by:dmalovich
ID: 39906179
Thanks for the response. Do you know what changes need to be made to my css to make it work?
0
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39909098
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dmalovich
ID: 39914003
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
 

Author Comment

by:dmalovich
ID: 39914628
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
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39919835
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
 

Author Comment

by:dmalovich
ID: 39920230
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
 
LVL 11

Accepted Solution

by:
Tej Pratap Shukla ~Dexter earned 500 total points
ID: 39925657
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
 

Author Closing Comment

by:dmalovich
ID: 39926306
Thank you so much
0
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39936111
You're welcome :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question