Bootstrap horizontal navigation bar with vertical dropdown CSS - javascript

I have just started playing with twitter bootstrap and am attempting to build a site from scrap with it. I am having trouble creating a horizontal nav bar with vertical dropdowns with each <li> as a new row. (My current dropdown has all <li> in the same row).
Can someone please teach me how?
Navbar HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="NIS.html">NIS<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="TNU.html">TNU</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="NIC.html">NIC</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="trial.html">trial</a></li>
<li><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
CSS:
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}

This is the answer I gave that solved a very similar problem for myself and someone else. Maybe it'll work for you.
I had a similar problem. I narrowed it down to the "display: table-cell;" entry. Through looking around and 'playing' I managed to find a fix for my situation
First:
.navbar .nav li .dropdown-menu li { display: block; width: auto; }
to set the list items under the dropdown to display as a block (with max width of the dropdown menu holder).
Secondly:
.dropdown-menu { left:auto; }
to place the dropdown under the correct menu-item.

Related

Bootstrap 5 dropdown without bootstrap js

in my Angular app I have a header with icons/pics which I want to use as dropdowns. Code snippet looks as follows:
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img
src="../../assets/images/icon_user_menu.png"
width="18px"
height="18px"
/>
Username
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
So... for a burger-menu I know (and I do) just add a typescript-method in the component.ts which changes the "open-class".
But I really didn't find anything related to the dropdown stuff from bootstrap 5.
Is there a way to just apply a similar solution too? Maybe I over read sth. somewhere but I really cant find a solution for this to work.
Thanks in advance anyone!
This is a way to make dropdowns using pure CSS
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
user-select:none;
background-color: #4CAF50;
color: white;
padding: 1rem;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: .3rem
}
.dropbtn:focus{box-shadow: 0 0 0 .3rem #4CAF50AA;}
.dropbtn:active{
box-shadow: 0 0 0 .4rem #4CAF50aa;
}
.dropdown {
position: relative;
display: inline-block;
border_radius: .3rem;
}
.dropdown-content {
display: none;
position: absolute;
top: 3.5rem;
left: 1rem
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 0 .1rem 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:focus-within .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>

How to override inline style which is set in javascript with CSS Hover?

I'm using some font awesome icons in an element inside a href. The color of these has to be set in javascript, based on some conditions. Which works fine, BUT on :hover only the href text changes color, even though the color is set to !important in CSS.
If I remove the inline color set in JS for the icons it works fine with :hover.
Shouldn't !important override the inline style set in js?
My element where iconcolor is the issue:
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
Removing the elem.iconcolor and not setting any color in JS works, but then again I won't be able to add color on conditions.
And my CSS:
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
/*color: inherit;*/
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white !important;
}
I'm using bootstrap 2.3.2 on top of this.
Full html structure:
/*
#embeda013f208-3363-a68f-3b07-1a1824410343_0 ul.nav li.dropdown > ul.dropdown-menu
set to display:block when editing in browser, to see changes instantly.
*/
#navigationDiv {
/*margin-top: 46px;*/
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
font-family: inherit;
font-weight: 300;
}
.navbar-inner {
box-shadow: none;
border-radius: 0px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown > ul.dropdown-menu {
display: none;
}
navbar sticky-top navbar-light bg-light {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 46px;
}
/*#novobarcontainer{
position:absolute;
top:0px;
left:0px;
}*/
.navbar {
margin-bottom: 20px;
overflow: visible;
position: fixed;
top: 46px;
left: 0px;
width: 100%;
z-index: 1;
}
.dropdown-menu > li > a {
border-bottom: none;
padding: 7px 20px;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
padding: 0px 0px 0px 0px;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-submenu:focus > a, .dropdown-submenu:hover > a {
color: inherit;
text-decoration: none;
background-color: rgba(0,122,255,255); /*Color on nav items on hover */
background-image: none;
color: white;
}
.dropdown-submenu > .dropdown-menu {
border-radius: 0;
margin-top: 0px;
margin-left: 1px;
}
/*This is the color on the small arrow on the submenu*/
.dropdown-submenu > a:after {
border-left-color: black;
}
.dropdown-submenu > a:after:hover {
border-left-color: white;
}
/* change color on hover root element*/
.navbar .nav > li > a {
color: black;
text-shadow: none;
}
.navbar .nav > li > a:hover {
color: white;
background-color: rgba(0,122,255,255);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/regular.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<div id="navigationDiv" class="navbar-inner"><ul class="nav navbar-nav" id="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#undergrad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>UnderGrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#art.undergrad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#classic.art.undergrad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>classic.art.undergrad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hey"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>hey </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:red;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>Grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:#3CB371;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown-submenu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:blue;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
<ul class="submenu dropdown-menu" role="menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#music.grad.com"><i style="height:20px; width:20px; color:green;" class="fas fa-ban" id="jsonicon"></i>music.grad </a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#science.grad.com"><i style="height:20px; width:20px; color:black;" class="fas fa-ban" id="jsonicon"></i>science.grad </a>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>
:hover will always overwrite element styling. Setting a:hover { color: inherit; }; in css to overwrite font-awesomes css should do the trick.

How to style fullscreen menu under default bootstrap toggler?

I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui.com/fullscreen-overlay-navigation-menu/
When I click on menu toggle, it looks like this: https://imgur.com/6czS25f
My website link: https://kreatika.bss.design/
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: https://i.stack.imgur.com/c5Dnp.jpg
https://i.imgur.com/Nunc77r.png
If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.
I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.
But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.
After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].
Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.
See my codeply example link below using Bootstrap 4... (using SASS).
https://www.codeply.com/go/GXRF6aA5Du
.navbar {
.navbar-toggler {
z-index: 1000;
}
.navbar-collapse {
#include media-breakpoint-down(md) {
background: rgba(#000,.85);
opacity: 0;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
&.collapse {
opacity: 0;
pointer-events: none;
display: flex;
}
&.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important;
}
&.collapsing {
opacity: 0;
height: 100vh;
}
&.collapse.show {
opacity: 1;
pointer-events: auto;
}
.navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto;
}
}
}
}
#include media-breakpoint-down(md) {
.navbar-nav {
margin-left: initial !important;
}
}
This is the CSS output below if your not using SASS.
If you drop the below CSS into the DOM on your site it looks like this...
https://i.imgur.com/Nunc77r.png
.navbar .navbar-toggler{
z-index:1000
}
#media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(0,0,0,0.85);
opacity:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
transition:opacity 0.35s ease;
display:flex;
flex-direction:column;
align-content:center;
text-align:center !important
}
.navbar .navbar-collapse.collapse{
display:flex;
opacity:0;
pointer-events:none
}
.navbar .navbar-collapse.collapsing[style*="height"]{
opacity:1;
height:100vh !important
}
.navbar .navbar-collapse.collapsing{
opacity:0;
height:100vh
}
.navbar .navbar-collapse.collapse.show{
opacity:1;
pointer-events:auto
}
.navbar .navbar-collapse .navbar-nav{
margin-right:initial !important;
margin-top:auto;
margin-bottom:auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
And a stackoverflow demo too using the CSS (not the sass)...
MAIN {
padding-top: 30px;
padding-bottom: 30px;
margin-top: 56px;
height: 3000px
}
.navbar .navbar-toggler {
z-index: 1000
}
#media (max-width: 991.98px) {
.navbar .navbar-collapse {
background: rgba(0, 0, 0, 0.85);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
overflow-y: scroll;
overflow-x: hidden
}
.navbar .navbar-collapse.collapse {
display: flex;
opacity: 0;
pointer-events: none
}
.navbar .navbar-collapse.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important
}
.navbar .navbar-collapse.collapsing {
opacity: 0;
height: 100vh
}
.navbar .navbar-collapse.collapse.show {
opacity: 1;
pointer-events: auto
}
.navbar .navbar-collapse .navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
</div>
</main>

Dropdown Menu doesn't work inside navigation bar but works outside

I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/

Bootstrap 3 can't use dropdown menu

I use bootstrap 3 and i have menu. But I have problem with dropdown menu.
I can't use dropdown menu because it disappears so fast. Also it shows on hover very fast without animations
my html
<ul class="nav navbar-nav">
<li class="menu-item dropdown"><a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>
css:
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
how to solve this problem?
Add class="dropdown-toggle" data-toggle="dropdown" to your Sample Page <a>
.nav>li {
float: left;
}
.nav>li>a {
position: relative;
font-size: 17px;
}
.nav li a {
display: block;
}
.nav li.dropdown ul {
margin-top: 20px;
position: absolute;
top: 100%;
//display: none;
z-index: 2000;
padding: 5px 0;
border-left: none;
border-right: none;
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="menu-item dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
<li class="menu-item"><a title="Front Page" href="#">Front Page</a></li>
</ul>
</li>
</ul>

Categories