I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appe
This may not be the answer you are looking for but it's what I would do in your case.
I use sometimes bootstrap but, as good as it is, in my humble opinion, people are very often thinking it's a miraculous code that can make you do whatever you want, and lately I am finding people spent more time trying to modified bootstrap css's than making the whole css's from scratch (if you know a bit of basic css), not to say so many webs "looking" so simillar.
For what you want to do I would basically clearing ALL classes in the html and just sniping the elements from the container I could do a menu as you show in the image (well, it needs some extra style like adding the arrow icons, shadows and such, but the point is to show you another way to do it).
html:
-
Client Advice
- Pre-advice
- Strategy & Technical
- Research
-
APL & Products
-
Approved Product List
- Platforms
- Managed Funds
- Wealth Protection
- Listed Securities
- Wealth Protection
- Listed Securities
- Listed Securities
- Model Portfolios
- Non-approved Products
- Implementation
- Review
- Execution Only
- Personal Development
- Practice
- News
And just this css (please notice that when I call directly a tag you may need to call it a different way:
html, body {
margin:0;
padding:0;
height:100%;
}
* {box-sizing: border-box;}
.container {
height:100%;
}
a {
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
padding:0px 0px 20px 0px;
width:100%;
display:block;
height:100%;
}
li {
padding:20px 20px 0 20px;
width:100%;
color:#fff;
}
.container ul {height:100%;}
.container > ul {
width:250px;
background-color:#224490;
position:relative;
overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#18316a;
}
.container > ul > li:hover > ul {
display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
padding:20px;
}
And I have just kept the classes that activate the script so keep it untouched.
FIDDLE
I hope this can be usefull for you. Feel free to ask any question or if you want something you want to modified (and you can't after, of course, trying) I will try my best to help you.