I am creating a practice navbar using bootstrap cdn. Everything is cake except by default there is this underline that I either wish to remove or customize, but I didn't put it there so I am not sure how to identify it in my css selectors.
Using chrome dev tools I found an item display: table that when I disable it the bar jumps above the tabs. But the table would likely relate to what is behind the tabs, not the actual line itself.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mockup NavBar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
body {
background-color: gray;
}
#home {
padding: 11px;
background-color: #64a3dd;
color: white;
border-radius: 3px;
}
.divider {
width: 80%;
}
a {
color: #ffffff;
}
.dropdown {
margin-right: 1px;
margin-left: 1px;
border-radius: 3px;
background-color: #64a3dd;
}
</style>
</head>
<body>
<div class="menu-mockup" style="center">
<ul class="nav nav-tabs">
<li class="active">
<div id="home">
<i class="fa fa-home"></i>
</div>
</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Recent Activity</li>
<li class="divider"></li>
<li>Member Forum</li>
<li class="divider"></li>
<li>Member List</li>
<li class="divider"></li>
<li>Member Groups</li>
</ul>
</li>
<li class="dropdown">
Pet Help
<ul class="dropdown-menu">
<li>Pets for Dummies</li>
<li class="divider"></li>
<li>Expected Costs</li>
<li class="divider"></li>
<li>Breeds</li>
<li class="divider"></li>
<li>Pet Quiz</li>
</ul>
</li>
<li class="dropdown">
Pets for Sale
<ul class="dropdown-menu">
<li>Buying Guide</li>
<li class="divider"></li>
<li>Search by Location</li>
<li class="divider"></li>
<li>Search by Species</li>
<li class="divider"></li>
<li>Pet Accessories</li>
</ul>
</li>
<li class="dropdown">
Pet Services
<ul class="dropdown-menu">
<li>Veterinarians</li>
<li class="divider"></li>
<li>Grooming</li>
<li class="divider"></li>
<li>Training</li>
<li class="divider"></li>
<li>Pet Clubs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
All you need to do is add this to your CSS:
.menu-mockup .nav-tabs {
border-bottom: 0;
}
Working code snippet:
body {
background-color: gray;
}
#home {
padding: 11px;
background-color: #64a3dd;
color: white;
border-radius: 3px;
}
.divider {
width: 80%;
}
a {
color: #ffffff;
}
.dropdown {
margin-right: 1px;
margin-left: 1px;
border-radius: 3px;
background-color: #64a3dd;
}
.menu-mockup .nav-tabs {
border-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
<div class="menu-mockup" style="center">
<ul class="nav nav-tabs">
<li class="active">
<div id="home">
<i class="fa fa-home"></i>
</div>
</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Recent Activity
</li>
<li class="divider"></li>
<li>Member Forum
</li>
<li class="divider"></li>
<li>Member List
</li>
<li class="divider"></li>
<li>Member Groups
</li>
</ul>
</li>
<li class="dropdown">
Pet Help
<ul class="dropdown-menu">
<li>Pets for Dummies
</li>
<li class="divider"></li>
<li>Expected Costs
</li>
<li class="divider"></li>
<li>Breeds
</li>
<li class="divider"></li>
<li>Pet Quiz
</li>
</ul>
</li>
<li class="dropdown">
Pets for Sale
<ul class="dropdown-menu">
<li>Buying Guide
</li>
<li class="divider"></li>
<li>Search by Location
</li>
<li class="divider"></li>
<li>Search by Species
</li>
<li class="divider"></li>
<li>Pet Accessories
</li>
</ul>
</li>
<li class="dropdown">
Pet Services
<ul class="dropdown-menu">
<li>Veterinarians
</li>
<li class="divider"></li>
<li>Grooming
</li>
<li class="divider"></li>
<li>Training
</li>
<li class="divider"></li>
<li>Pet Clubs
</li>
</ul>
</li>
</ul>
</div>
</body>
You have to add another css rule. The property affecting the line is "nav tabs" and its located in the bootstrap.min.css file.
Related
I have menu with sub menus. When i hover an li it works fine and show me the sub menu and hide. But if i click in menu it shows the sub menu but doesn't hide. I don't want allow to click on menu. Just show sub menu with hover.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">menu</a>
<ul class="dropdown-menu">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
<li>submenu 4</li>
</ul>
</li>
How can i solve that?
Thank you
Please add below css in your css file
.open > .dropdown-menu{display:none;}
li.dropdown:hover .dropdown-menu {display: block;}
Here is the working solution:
body {
padding-top: 60px;
padding-bottom: 40px;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
For the responsive you can find demo from here
I'm using slickNav and its not properly reading my nested list.
This page is a repository for NPCS for a Table top RPG.
The top level is general information and organizes NPCs by location.
The second level organizes NPCs by rarity level
and the third level is the NPC's themselves.
Now interestingly, slickNav displays levels 1 and 2 just fine, but level 3 opens up to invisible text. I say invisible text because the amount of space that is revealed by the dropdown is correct.
This GIF shows what i'm talking about.
Observe how I click on Domestic animals, according the code below you can this is a long list of NPCs. The space SlickNav drops down is large.
Then observe how I click under Eol, this part of the site is undeveloped still, and so its only list item is " coming soon". Accordingly slickNav only drops down a little to make enough space for that.
According to http://slicknav.com/, it seems ive correctly nested my structure and labeled the menu as class="menu".
Its worth noting that on other parts of the site this menu works fine, but the menu's on those parts of the site are maximum of two levels deep.
Here is my HTML: Warning this is a big menu
<div class ="menu_wrap">
<nav id = "navMenu">
<ul class = "menu clearfix">
<li>Home
<ul class='subMenu1'>
<li id="instr">Instructions</li>
</ul>
</li>
<li>General
<ul class="subMenu1" >
<li>Domestic Animals
<ul class="subMenu2">
<li id="da1">Camel</li>
<li id="da2">War Camel</li>
<li id="da3">Druldon</li>
<li id="da4">Donkey</li>
<li id="da5">Pony</li>
<li id="da6">Draft Horse</li>
<li id="da7">Saddle Horse</li>
<li id="da8">Light War Horse</li>
<li id="da9">Heavy War Horse</li>
<li id="da10">Chariot Horse</li>
<li id="da11">Voran War Horse</li>
<li id="da12">Elven Narathi</li>
<li id="da13">Mountain Ram</li>
<li id="da14">War Elephant</li>
<li id="da15">War Mammoth</li>
<li id="da16">Dovashi Mastiff</li>
</ul>
</li>
<li>Common NPCs
<ul class="subMenu2">
<li id="guard1">Guard: Dovashi</li>
<li id="guard2">Guard: Dwarven</li>
<li id="guard3">Guard: Elven</li>
<li id="guard4">Guard: Gamoran</li>
<li id="guard5">Guard: Salatai</li>
<li id="guard6">Guard: Voran</li>
<li id="guard7">Guard: Dark Elf</li>
<li id="c5">Gnoll</li>
<li id="c6">Grimlock</li>
<li id="c11">Roper</li>
<li id="c12">Skeleton</li>
<li id="c13">Giant Spider</li>
<li id="c15">Zombie</li>
</ul>
<li>Uncommon NPCs
<ul class= "subMenu2">
<li id="uc5">Fire Child</li>
<li id="uc6">Ghoul</li>
<li id="uc11">Rakasa</li>
</ul>
</li>
<li>Rare NPCs
<ul class= "subMenu2">
<li id="r1">Adherer</li>
<li id="uc24">Arcane</li>
<li id="r3">Bane Dead</li>
<li id="r5">Fire Lord</li>
<li id="eleGen">Generic Elementalist</li>
<li id="necGen">Generic Necromancer</li>
<li id="illGen">Generic Illusionist</li>
<li id="cleGen">Generic Cleric</li>
<li id="r8">Radasai Warrior</li>
<li id="r9">Elemental(Fire)</li>
<li id="r10">Elemental(Water)</li>
<li id="r11">Elemental(Earth)</li>
<li id="r12">Elemental(Air)</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr1">Arch Shadow</li>
<li id="vr3">Gorgon</li>
<li id="vr4">Illithid</li>
<li id="new3">Vampire</li>
<li id="new4">Were Wolf</li>
</ul>
</li>
</ul>
</li>
<li id ="world_drop"> Wol
<ul class ="subMenu1" >
<li>Common NPCs
<ul class="subMenu2">
<li id="c1">Cave Bear</li>
<li id="c2">Dire Wolf</li>
<li id="c3">Echuyan</li>
<li id="c4">Goblin</li>
<li id="c7">Voran Raider</li>
<li id="c8">Dovashi Ronin</li>
<li id="c9">Naga</li>
<li id="c10">Orc</li>
<li id="c14">Umber Hulk</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc1">Ant (Giant)</li>
<li id="uc2">Alaghi</li>
<li id="uc3">Centaur</li>
<li id="uc4">Dire Boar</li>
<li id="uc7">Ogre</li>
<li id="uc8">Orc(Black)</li>
<li id="uc9">Orc (Shaman)</li>
<li id="uc10">Owl Bear</li>
<li id="uc12">Rastipede</li>
<li id="uc13">Troll</li>
<li id="new1">Young Black Wyvern</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r2">Ant Lion( giant)</li>
<li id="new2">Adult Black Wyvern</li>
<li id="r4">Basilisk</li>
<li id="r6">Hill Giant</li>
<li id="r7">Naga Elite</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr2">Dray</li>
<li id="vr5">kalin</li>
<li id="vr6">Naga Queen</li>
<li id="vr7">Minotaur</li>
</ul>
</li>
</ul>
</li>
<li> Nol
<ul class="subMenu1">
<li>Common NPCs
<ul class="subMenu2">
<li id="c16">Abrian</li>
<li id="c17">Cave Bear (Polar)</li>
<li id="c18">Dwarven Bandits</li>
<li id="c19">Ettin</li>
<li id="c20">Frost Orc</li>
<li id="c21">Tus'Khul</li>
<li id="c22">Icemaw Raiders</li>
<li id="c23">Kenku</li>
<li id="c24">Kobold</li>
<li id="c25">Tundra Stag</li>
<li id="c26">Wight</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc14">Bainligor</li>
<li id="uc15">Ettin (Mage)</li>
<li id="uc16">Blue Orc</li>
<li id="uc17">Goatmen</li>
<li id="uc18">Ice Golem</li>
<li id="uc19">Rogue ClockWork</li>
<li id="uc20">Snow Serpent</li>
<li id="uc21">Ice Wyvern(Young)</li>
<li id="uc22">Voldun</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r13">Aviarag</li>
<li id="r14">Crystal Hydra</li>
<li id="r15">Dark Hood</li>
<li id="r16">Derro Warrior</li>
<li id="r17">Frost Giant</li>
<li id="r18">Gargoyle</li>
<li id="r19">Ice Wyvern(Adult)</li>
<li id="r20">Mammoth</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr8">White Dragon</li>
<li id="vr9">Pit Horror</li>
<li id="vr10">Frozen Men</li>
<li id="vr11">Vaporighu</li>
</ul>
</li>
</ul>
<li id ="indie_drop"> Sol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSubMenu2">
<li id="c27">Cistern Fiend</li>
<li id="c28">Dire Crocodile</li>
<li id="c29">Dire Lion</li>
<li id="c30">Gamoran Exiles</li>
<li id="c31">Giant Scorpion</li>
<li id="c32">Myconid</li>
<li id="c33">Sand Bones</li>
<li id="c34">Salatai Bandits</li>
<li id="c35">Shissai half Breed</li>
<li id="c36">Tus-Kowah</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSubMenu2">
<li id="uc23">Amiq-Rasol</li>
<li id="uc25">Beholder-Kin</li>
<li id="uc26">Gremlin</li>
<li id="uc27">Lesser Salamander</li>
<li id="uc28">Mummy</li>
<li id="uc29">Scrab</li>
<li id="uc30">Spell-Sword Merc.</li>
<li id="uc31">Shissai Pure Blood</li>
<li id="uc32">Will-O-Wisp</li>
</ul>
</li>
<li>Rare NPCs
<ul class="leftSubMenu2">
<li id="r21">Assimar</li>
<li id="r22">Elephant</li>
<li id="r23">Hattori</li>
<li id="r24">Roc</li>
<li id="r25">Sand-Men</li>
<li id="r26">Skordi</li>
<li id="r27">Tortle</li>
<li id="r28">Winged Snake</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li id="vr12">Beholder</li>
<li id="vr13">Black Dragon</li>
<li id="vr15">Djinn</li>
<li id="vr14">Mummy Lord</li>
<li id="vr16">Sand Hydra</li>
</ul>
</li>
</ul>
</li>
<li> Eol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
This is all the CSS associated with the Menu.
Note: This is a simple CSS menu, the submenus are set to display:none and on hover the display is set to block.
All my menus work the same way on other parts of the site. But display being set to none is the only thing I can think of.
#navMenu{
margin:0;
padding: 0;
position: absolute;
line-height: 2em;
top: 28%;
left: 5.1%;
width: 100%;
font-size: 1.2vw;
font-family: verdana,arial,serif;
cursor: pointer;
z-index: 3;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 2vw;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
padding:.5em;
}
#navMenu ul li {
text-align: center;
text-decoration: none;
height: 1.875em;
width:13.5vw;
display: block;
color: #e0e0da;
background: black;
border-color: #99cdde;
border: 1px solid #99cdde;
}
.subMenu1,.subMenu2{
position: absolute;
display: none;
top: 100%;
left: -.25%; /*this fixes a menu alignment problem */
cursor: pointer;
}
.subMenu2{
position: absolute;
left: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
}
.leftSubMenu2{
position: absolute;
right: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
display: none;
}
#navMenu ul li:hover>ul {
display: block;
}
#navMenu ul li:hover{
transition:all linear .15s;
color: #99cdde;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I would like to add a column to academic affairs so I can have two groups of four links adjacent to each other but I have failed at every attempt. Any help will be greatly appreciated.
</button><div class="navbar navbar-inverse">
<div class="navbar-header">
<button
IBHE
</div><!--enf of navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home">Home</li>
<li>Executive Director's Corner
<ul class="dropdown-menu">
<li>Meet Dr. James Applegate</li>
<li>Blog</li>
<li>Media</li>
</ul>
</li>
<li> Academic Affairs
<ul class="dropdown-menu">
<li>IBHE Approval & Review</li>
<li>Academic Degree Programs</li>
<li>Colleges & Universities </li>
<li>SARA</li>
<li class="divider"></li>
<li>Enrollment & Degrees</li>
<li>Transfer of Academic Credits</li>
<li>P-20 Education Pipeline</li>
<li>Underrepresented Groups</li>
<li>Distance Education</li>
I am guessing you are using bootstrap, here is what i recomend below will give you an example of a few different Column layouts in dropdown part of the menu.
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #999;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
One Column <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Two Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here that's extra long so we can see how it looks
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
Three Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Link
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
External resources being used:
Important:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
I have the following HTML code and I've structured it to how I think it should be achieved based on the mark-up in the Bootstrap docs.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Hospital<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown">
Consultants <span class="caret"></span>
<ul class="dropdown-menu">
<li>Adult cardiac surgery</li>
<li>Bariatric surgery</li>
<li>Colorectal surgery</li>
<li>Endocrine and thyroid surgery</li>
<li>Head and neck cancer surgery</li>
<li>Interventional cardiology</li>
<li>Lung Cancer</li>
<li>Neurosurgery</li>
<li>Orthopaedic surgery</li>
<li>Upper gastro-intestinal surgery</li>
<li>Urological surgery</li>
<li>Vascular surgery</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
However, this isn't working, it gives me this:
When I click on the Consultants, it simply gets rid of the dropdown. Can multilevel drop-downs be achieved with Bootstrap CSS/JS alone? Or must we write custom CSS for it?
Any easy solutions that would work similar to how a single nest level work, and are responsive and touch-friendly (for tablets and phones)?
Thanks
I don't recall any default example from bootstrap 3 having 3 level drop down nav menu, but you can do like this, little bit of customization and java-script and it's fully responsive.
HTML
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"> Home
</li>
<li class="dropdown">Hospital<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Consultants
<ul class="dropdown-menu">
<li>Adult cardiac surgery
</li>
<li>Bariatric surgery
</li>
<li>Colorectal surgery
</li>
<li>Endocrine and thyroid surgery
</li>
<li>Head and neck cancer surgery
</li>
<li>Interventional cardiology
</li>
<li>Lung Cancer
</li>
<li>Neurosurgery
</li>
<li>Orthopaedic surgery
</li>
<li>Upper gastro-intestinal surgery
</li>
<li>Urological surgery
</li>
<li>Vascular surgery
</li>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
CSS
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#555;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
JS
(function ($) {
$(document).ready(function () {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
Working Example
I need to make drop down for one <li> element
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
<li class="pull-right">More options
<ul class="dropdown-menu">
<li>one</li>
<li>two</li>
</ul>
</li>
<li class="pull-right">logout</li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
using Bootstrap v3.1.1
NOTE : even adding after jquery also doesn't works
You have to use
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
In your code, you miss class "dropdown" for li tag.
For correct dropdown, you have to use this sintax:
<li class="dropdown">
Item Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
The issue is causing by the missing of data-toggle="dropdown" in tag a
Maybe you search this solution: JSBin
For example:
You need add the content: attr(data-hover); on your before element.
HTML:
<li class="HOVER">More options
CSS:
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
You're missing the the following attributes:
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
Sample markup below:
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Edit
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)