I have created a nested menu with the ul/li tags and I would like to horizontally align the second and the third sub-submenu to the first submenu.
Visually, I have this: http://i.imgur.com/vGtPtft.png
and I want this: http://i.imgur.com/wcqw3TA.png
CSS/HTML:
body {
background-color: #000;
font-size: 1.6vw;
color: #FFF;
}
div#header {
width: 65vw;
margin-left: auto;
margin-right: auto;
}
#nav {
font-size: 1.4em;
white-space: nowrap;
position: absolute;
}
#nav ul {
display: inline-table;
list-style-type: none;
margin: 0px;
border-style: none;
padding: 0px;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 5px;
border-left-style: solid;
border-left-width: 7px;
border-color: #FFF;
color: #FFF;
text-decoration: none;
}
#nav ul li .active {
color: #F00;
border-left-color: #F00;
}
#nav ul li a:hover {
color: #F00;
border-color: #F00;
}
#nav ul li ul {
position: absolute;
display: none;
}
#nav ul li:hover ul {
display: block;
margin: 0px;
padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
display: none;
}
#nav ul li:hover ul li:hover ul {
display: block;
margin: 0px;
padding: 5px 0px 0px;
font-size: 0.85em
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Submenu 1
<ul>
<li>Subsubmenu 1
</li>
<li>Subsubmenu 2
</li>
</ul>
</li>
<li>Submenu 2
<ul id="sub2">
<li>Subsubmenu 3
</li>
<li>Subsubmenu 4
</li>
<li>Subsubmenu 5
</li>
<li>Subsubmenu 6
</li>
<li>Subsubmenu 7
</li>
</ul>
</li>
<li>Submenu 3
<ul id="sub3">
<li>Subsubmenu 8
</li>
<li>Subsubmenu 9
</li>
<li>Subsubmenu 10
</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
</ul>
</div>
</div>
</body>
</html>
The only idea I came up with is to manually move the margin to the left by adding this:
#nav ul li:hover ul li:hover ul#sub2 {
margin-left: -10.8vw
}
#nav ul li:hover ul li:hover ul#sub3 {
margin-left: -21.5vw
}
I thought that using "vw" as unit is a good idea because I have a 16:9 monitor (resolution: 1366x768) and I assumed it would scale on other 16:9 monitors but tests on other resolutions show that the sub-submenu's are either more to the left or still a bit to the right of the first submenu. Is it possible to handle this problem with minor modifications or would I have to rewrite the whole thing by using, for example fixed sizes in pixels ?
You can simply try adding this:
#nav ul li ul li ul {
left: 0;
}
Demo - http://jsfiddle.net/d8hrcxmr/2/
If you ever need all the sub menus appear to the very left check out this demo - http://jsfiddle.net/d8hrcxmr/1/
#nav ul li ul {
left: 0;
}
I think this is better for solving the problem of sub menus get cut off on the right (Imagine you have long sub menus on Menu6).
You have do use left to move sub menu to left edge of its containing element.
Here is the working example of your desired result
body {
background-color: #000;
background-position: center;
background-repeat: repeat;
font-family: 'Open Sans Condensed', Calibri, sans-serif;
font-size: 1.6vw;
color: #FFF;
}
div#header {
width: 65vw;
margin-left: auto;
margin-right: auto;
}
#nav {
font-size: 1.4em;
white-space: nowrap;
position: absolute;
}
#nav ul {
display: inline-table;
list-style-type: none;
margin: 0px;
border-style: none;
padding: 0px;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 5px;
border-left-style: solid;
border-left-width: 7px;
border-color: #FFF;
color: #FFF;
text-decoration: none;
}
#nav ul li .active {
color: #F00;
border-left-color: #F00;
}
#nav ul li a:hover {
color: #F00;
border-color: #F00;
}
#nav ul li ul {
position: absolute;
display: none;
}
#nav ul li:hover ul {
display: block;
margin: 0px;
padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
display: none;
}
#nav ul li:hover ul li:hover ul {
display: block;
left: 0;
margin: 0px;
padding: 5px 0px 0px;
font-size: 0.85em
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div id="nav">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Submenu 1
<ul>
<li>Subsubmenu 1
</li>
<li>Subsubmenu 2
</li>
</ul>
</li>
<li>Submenu 2
<ul id="sub2">
<li>Subsubmenu 3
</li>
<li>Subsubmenu 4
</li>
<li>Subsubmenu 5
</li>
<li>Subsubmenu 6
</li>
<li>Subsubmenu 7
</li>
</ul>
</li>
<li>Submenu 3
<ul id="sub3">
<li>Subsubmenu 8
</li>
<li>Subsubmenu 9
</li>
<li>Subsubmenu 10
</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
</ul>
</div>
</div>
</body>
</html>
it's pretty simple.just add the
#nav ul li ul li ul {
left: 0;
} to your css code.
body {
background-color: #000;
font-size: 1.6vw;
color: #FFF;
}
div#header {
width: 65vw;
margin-left: auto;
margin-right: auto;
}
#nav {
font-size: 1.4em;
white-space: nowrap;
position: absolute;
}
#nav ul {
display: inline-table;
list-style-type: none;
margin: 0px;
border-style: none;
padding: 0px;
}
#nav ul li {
display: table-cell;
}
#nav ul li a {
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 5px;
border-left-style: solid;
border-left-width: 7px;
border-color: #FFF;
color: #FFF;
text-decoration: none;
}
#nav ul li .active {
color: #F00;
border-left-color: #F00;
}
#nav ul li a:hover {
color: #F00;
border-color: #F00;
}
#nav ul li ul {
position: absolute;
display: none;
}
#nav ul li:hover ul {
display: block;
margin: 0px;
padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
display: none;
}
#nav ul li:hover ul li:hover ul {
display: block;
margin: 0px;
padding: 5px 0px 0px;
font-size: 0.85em
}
#nav ul li ul li ul {
left: 0;
}
Related
I'm a beginner when it comes to html and css, I have to make a website as a school project. I want to add the search bar in the navbar using css, I'v been searching but I couldn't find the answer.
Here's my code:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
</ul>
<div>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
<li>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</li>
</ul>
<div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to create a horizontal two level menu navigation. I copied some code on Internet and work fine. Below is the original CSS style and HTML
<style>
/*Style for horizontal CSS menu*/
ul {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul li:hover a {
background: #FFC062;
}
ul li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul li ul {
display: none;
}
ul li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
</style>
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
Since the CSS is on the standard ul and li element so I want to add a class selector so that it only affect the horizontal menu. So I append .menu to each ul style. However the submeun will become off the position of the main menu. Any idea which style go wrong?
<style>
/*Style for horizontal CSS menu*/
ul.menu {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul.menu li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul.menu li:hover a {
background: #FFC062;
}
ul.menu li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul.menu li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul.menu li ul {
display: none;
}
ul.menu li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul.menu li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul.menu li a:hover + .sub-menu, .sub-menu:hover {
display: block;
}
</style>
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
Check this out- you have missed some styles that need to be applied to sub-menu also. Guess you can figure it out now. Thanks!
/*Style for horizontal CSS menu*/
ul.menu, ul.sub-menu {
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
}
ul.menu li, ul.sub-menu li {
float: left;
margin-right: 1px;
display: inline-block;
}
ul.menu li a, ul.sub-menu li a {
display: block;
text-decoration: none;
height: 18px;
min-width: 120px;
text-align: center;
line-height: 18px;
font-family: Arial, "Times New Roman", Georgia;
color: #ffffff;
background: #004080;
font-size: 12px;
}
ul.menu li:hover a, ul.sub-menu li:hover a {
background: #FFC062;
}
ul.menu li:hover ul a {
background: #d9efff;
color: #2f3036;
line-height: 18px;
height: 18px;
}
ul.menu li:hover ul a:hover {
background: #7db0db;
color: #ffffff;
}
ul.menu li ul {
display: none;
}
ul.menu li ul li {
display: block;
float: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
ul.menu li ul li:first-child {
display: block;
float: none;
border-top: 1px solid #000;
}
ul.menu li ul li a {
width: auto;
min-width: 120px;
padding: 0 15px;
text-align: left;
color: #000;
}
ul.menu li a:hover + .sub-menu,
.sub-menu:hover {
display: block;
}
<ul id="hor-menu" class="menu">
<li style="width:142px">
Home
<ul class="sub-menu">
<li>Country 1
</li>
<li>Country 1
</li>
<li>Country 1
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
<li style="width:130px">
Main Menu 2
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
I am creating some websites and I am always using the same dropdown method for them. However i am stuck with my dropdown menu. When I hover on it it always replaces my main navigation and well lets say that not so customer friendly.
The problem probably lies within the position values I give in my css code but I fail to find how to make the right values for my needs.
So in proper words, my navigation is fine till you hover over one with a dropdown menu then it replaces himself.
I included a JSFIDDLE to show you what i mean. There is a dropdown menu under the second link in the main navigation.
HTML:
<div id="header">
<div class="blueborder">
</div>
<section class="nav">
<div class="row">
<ul class="main-nav" id="drop-nav">
<li class="home-active">Home</li>
<li> / </li>
<div class="dropdown">
<li>Over Ons</li>
<div class="dropdown-content">
<li>Betuigenissen</li>
</div>
</div>
<li> / </li>
<li>Schilderwerken</li>
<li> / </li>
<li>Behangwerken</li>
<li> / </li>
<li>Raamdecoratie</li>
<li> / </li>
<li>Realisaties</li>
<li> / </li>
<li>Contacteer ons</li>
</ul>
</div>
</section>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
margin-top: 40px;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li a {
color: #000;
border-bottom: 0px solid #ed5d00;
}
.dropdown-content li {
padding: 10px 10px;
}
.dropdown-content li a:hover {
color: #fff;
padding-bottom: 0px;
border-bottom: 0px solid #ed5d00;
}
/* Main Navi */
.main-nav {
float: left;
list-style: none;
margin-top: 0px;
padding-top: 0px;
color: #000;
font-size: 110%;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.main-nav li {
display: inline-block;
margin-left: 1px;
color: #fff;
}
.main-nav li a {
padding: 8px 0;
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 0;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #8dcee6;
}
Change to position: absolute; on the .dropdown-content and remove the top-margin, works for me:
CSS:
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
}
https://jsfiddle.net/r3gra7ta/2/
i think Your Navigation is a little bit confused.
One of simplest method is to set the submenu within the OVER ONS
<li name="OVER ONS" ><li SUBITEM1 ></li><li SUBITEM2 ></li></li>
Here a Basic Example .
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<h1>LOGO</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">HOME</li>
<li>OVERONS
<ul>
<li>Betuigenissen</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Schilderwerken</li>
<li>Behangwerken</li>
<li>Raamdecoratie</li>
<li>Realisaties</li>
<li>Contacteer ons</li>
</ul>
</nav>
just change the postion to "fixed" and remove margin-top in dropdown-content then it will work fine.
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!