Solved

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

Posted on 2014-03-04
10
740 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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery Time Off Event 20 42
Detecting robots? 5 34
css question 1 32
Modify Table Width 6 13
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

705 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now