I'm trying to make Hover dropdown menu and I want to margin-top dropdown content, but when I'm making so it does not work, because when I'm trying to go to dropdown links it disappears as I'm off hover.
See snippet from w3school below. In dropdown-content I have style margin-top:20px.
How can I manage this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" style="margin-top:20px;">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
You can wrap your links inside the drop down in another div and use margin-top:20px; for that to bring it down, also you will have to move your background-color and box-shadow to the new div. See the snippet below, hope this helps you
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content div {
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" style="">
<div style="margin-top:20px;">
Link 1
Link 2
Link 3
</div>
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
</body>
</html>
Related
i want to add multi level dropdown to that w3schools menu.
https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
it looks like
original w3schools menu
i tried to make it multi level as you can see.
multi level drop down photo 1
multi level drop down photo 2
My problem is as you can see in the photos; multi level does not close when you are another level. can you fix that ?
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
`/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #04AA6D;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
i changed it like this;
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-submenu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 0;
left: 100%
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content:hover .dropdown-submenu {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
<div class="dropdown-submenu">
Link 2</div>
Link 3
</div>
</div>
About
☰
</div>
your issue seems to be with the .dropdown-content:hover .dropdown-submenu { display: block; } part, when you're hovering over 'Link 3', you're still hovering over .dropdown-content
I some how managed to but an additional menu on all of my pages but the Home page. Now I cannot figure out how to get rid of it. It is not even appearing under menus. Not sure how I did it :)
https://www.talismantherapeuticriding.org/rider-cup/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
add the color in swiper might help
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
This is my first time trying to build a website from scratch, so my apologies if I've done everything wrong; I am open to any advice, though. My main issue right now is that the navigation bar is scrolling within itself instead of down in front of the background image. It used to look perfect until I added the floating/fixed attribute.
It's not a huge deal, but it would also be nice if the dropdown boxes were centered instead in line with the left side of the box. This is what I want it to look like: http://www.palousebicycle.org/ and here is the code for what I have now:
<header>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
</style>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
I'm very appreciative of your time! Thank you for any response or suggestions.
EDIT: Also updated this demo to center the dropdown menus (positional and text) per your example, and made comments in the CSS so you can see where the changes were made.
Remove overflow: auto on #nav to let the dropdowns extend outside of the nav bar. Live demo:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
/* center dropdowns */
position: relative;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
li.dropdown:hover .dropdown-content {
/* show dropdown */
display: block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* center dropdowns */
left: 50%;
transform: translateX(-50%);
/* hide dropdown */
display: none;
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
/* center dropdowns */
text-align: center;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
<nav align="center">
<ul id="nav">
<li>Home
</li>
<li class="dropdown"> Services
<div class="dropdown-content"> Memberships Repairs
</div>
<li>Our Work
</li>
<li class="dropdown"> About Us
<div class="dropdown-content"> Our Team Board of Directors
</div>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</nav>
Don't use overflow: auto property on #nav. This is responsible for internal scrolling. Instead give these additional styles:
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
}
.dropdown:hover > .dropdown-content {
display: block;
}
Have a look at the working snippet below:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
text-align: center;
}
.dropdown:hover > .dropdown-content {
display: block;
}
body {
margin: 0;
}
<header>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
</li>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
Hope this helps!
Hello i have the following live example http://jsfiddle.net/vfubN/4/ where you can see a navigation in action if you check out docs you will see that the submenu isn't working right. Can someone help me out fixing it ? Seems that i can't see the solution even if it's in front of my eyes.
HTML
<header role="banner">
<div class="navbar fixed-top navbar-theme-aizio-background">
<div class="inner-navbar"> Test<sub>name</sub>
<div class="container">
<nav id="menu" class="nav" role="navigation">
<ul class="inactive-responsive" id="inactive-responsive">
<li>
<span><i aria-hidden="true" class="icon-home"></i></span>Home
</li>
<li class="inactive-dropdown" id="dropdownToggle"> <span><i aria-hidden="true" class="icon-signal"></i></span>Docs
<ul class="inactive-dropdown vertical-navigation" id="inactive-dropdown">
<li> <span><i aria-hidden="true" class="icon-code"></i></span>ssss
</li>
<li> <span><i aria-hidden="true" class="icon-qrcode"></i></span>Portfolio
</li>
<li> <span><i aria-hidden="true" class="icon-print"></i></span>Blog
</li>
<li> <span><i aria-hidden="true" class="icon-heart"></i></span>The team
</li>
<li><span><i aria-hidden="true" class="icon-envelope"></span></i>google.ro
</li>
</ul>
</li>
<li><span><i aria-hidden="true" class="icon-cog"></i></span>Portfolio
</li>
<li><span><i aria-hidden="true" class="icon-cloud"></i></span>Blog
</li>
<li><span><i aria-hidden="true" class="icon-heart"></i></span>The team
</li>
<li><span><i aria-hidden="true" class="icon-envelope"></span></i>Contact
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS
.navbar [class^="icon-"],
[class*=" icon-"] {
display: block;
font-size: 32px;
font-size: 2rem;
vertical-align: middle;
background-repeat: no-repeat;
}
.navbar {
background: #4d4d4d;
width: 100%;
-webkit-box-shadow: 0 0 0.9em #555555;
box-shadow: 0 0 0.9em #555555;
}
.navbar-inner {
width: 100%;
}
/*
Navbar Brand Styles
*/
.inner-navbar .brand {
color: #ffffff;
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
padding-right: 24px;
padding-right: 1.5rem;
display: block;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
.inner-navbar .brand sub,
sup {
padding-left: 5px;
padding-left: 0.3rem;
font-size: 14px;
font-size: 0.9rem;
}
.inner-navbar .brand:hover {
color: #004b67 /*#383838 */;
text-decoration: none;
}
.inner-navbar nav {
display: block;
font-size: 14px;
font-size: 0.9rem;
font-family: Arial, sans-serif;
z-index: 1000;
}
.inner-navbar nav button#responsiveToggle {
display: none;
}
.inner-navbar nav ul {
padding: 0;
margin: 0 auto;
text-align: center;
}
.inner-navbar nav ul li {
display: block;
float: left;
width: auto;
min-width: 130px;
min-width: 8.1rem;
}
.inner-navbar nav li:first-child a,
li:last-child a {
border-left: 0;
}
.inner-navbar nav ul li a {
display: block;
text-align: center;
text-decoration: none;
line-height: 1.5;
}
.inner-navbar nav a:hover {
color: #004b67;
}
.inactive-dropdown {
display: none;
}
.active-dropdown {
position: absolute;
background-color: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.active-dropdown li {
float: left;
clear: both;
line-height: 1.5;
vertical-align: middle;
/* nice blue color background-color: #2aa4cf; */
}
.active-dropdown li a {
display: block;
width: auto;
text-align: left;
line-height: 1.5;
}
.vertical-navigation {
float: none;
}
.vertical-navigation i {
float: left;
line-height: 1.5;
}
/*
Themes
*/
.navbar-theme-blue-marina {
background: #2aa4cf;
}
.navbar-theme-aizio-background,
.active-dropdown li {
background: #004b67;
}
.navbar-theme-aizio-background a {
color: #fff;
}
.navbar-theme-aizio-background ul li a:hover {
color: #b2e558;
}
.navbar-theme-aizio-background .brand:hover {
color: #b2e558;
}
/* ------------------------------ RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
#media screen and (max-width: 768px) {
.active-dropdown {
position: relative;
display: block;
}
.active-dropdown li a {
text-align: center;
}
.inner-navbar nav li {
width: 50%;
float: left;
position: relative;
border-left: 0 solid #666;
}
.inner-navbar nav li a {
border-left: 0;
padding: 10px 0;
background: #383838;
}
.inner-navbar nav li a:hover {
background: #636363;
}
.inner-navbar nav a {
text-align: center;
width: 100%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
.inner-navbar nav {
border-bottom: 0;
}
.inner-navbar nav li {
width: 100%;
float: none;
position: relative;
border-left: 0 solid #666;
}
.inner-navbar nav li a {
border-bottom: 1px solid #0c0a0d;
}
.inner-navbar nav button#responsiveToggle {
display: block;
width: 100%;
}
.inner-navbar nav button#responsiveToggle {
zoom: 1;
}
.inner-navbar nav button#responsiveToggle:before {
content: '';
/* 1 */
display: block;
/* 2 */
}
.inner-navbar nav button#responsiveToggle:after {
content: '';
display: table;
clear: both;
}
/* When JavaScript is enabled, we hide the menu */
.js .inner-navbar nav .inactive-responsive {
display: none;
}
/* Displaying the menu when the user has clicked on the button */
.active-responsive a:hover {
font-size: 2em;
opacity: .5;
}
.active-responsive a:hover i {
display: none;
}
.fixed-top {
position: relative;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
.active-dropdown li {
display: block;
float: none;
width: 100%;
}
.inner-navbar nav li {
display: block;
float: none;
width: 100%;
}
.inner-navbar nav li a {
border-bottom: 1px solid #0c0a0d;
}
}
/* RETINA */
/* ------------------------------ RESPONSIVE STYLES ----------------------------------------------------*/
/*Styles for screen 768px and lower*/
#media screen and (max-width: 768px) {
.inner-navbar .brand {
display: none;
}
}
/*Styles for screen 515px and lower*/
/*Smartphone*/
#media only screen and (max-width: 320px) {
.inner-navbar .brand {
display: block;
}
.inner-navbar .pull-left {
float: none;
}
.inner-navbar .pull-right {
float: none;
}
}
/* RETINA */
You have a few problems because styles for the horizontal menu are affecting the vertical one, i made this changes in your CSS:
.inner-navbar nav .vertical-navigation li a{
text-align:left;
}
.vertical-navigation i {
float:none;
line-height: 1.5;
}
.vertical-navigation li [class^="icon-"] {
display: inline-block;
padding: 0 10px;
}
View the demo http://jsfiddle.net/vfubN/13/
I have the same menu and it works. I give you the CSS. You still have more for you to rename.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Index</title>
<style type="text/css">
#menu, #menu ul {
padding:0;
margin:0;
list-style: none;
}
#menu li {
display:inline-block;
width:150px;
text-align: center;
background: #999;
}
#menu ul {
position:absolute;
left:-999em;
}
#menu li:hover ul {
left:auto;
}
#menu a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li id='accueil'>accueil</li><!--
--><li><a href="" class='catalogue'>CATALOGUE</a></li><!--
--><li><a class='fonction' href="">FONCTIONNEMENT</a>
<ul>
<li><a href='toto'>toto</a></li><!--
--><li><a href='toto'>tutu</a></li><!--
--><li><a href='toto'>titi</a></li><!--
--><li><a href='toto'>tata</a></li>
</ul>
</li><!--
--><li><a class='service' href="">LES SERVICES</a></li><!--
--><li><a class='commande' href="">COMMANDE</a></li><!--
--><li><a class='contact' href="">CONTACT</a></li>
</ul>
</body>
</html>