Solved

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

Posted on 2014-03-04
10
764 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
  • 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create tabs to show divs 9 35
Select case on click 3 20
CSS SASS 4 34
Accessing specific element - DOM PHP HTML 8 35
This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

860 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