I have a navbar with typical things like home, contact, general, etc. The color of "general" is white and background-color transparent. When I hover on it, it is #333 and the background-color becomes white. "General" has a dropdown menu. When I hover on the dropdown-content, "general" will change back to white color, but I want that it remains the color #333, when i hover on the dropdown-content. I have tried to put it in a div and other things but i didnt work. What must I change in my code?
This is my code:
<ul class="top-level-menu">
<li>Contact</li>
<li>Gallery</li>
<li>Travel</li>
<li>
General
<ul class="second-level-menu">
<li>People</li>
<li>Defense</li>
<li>
Cities
<ul class="third-level-menu">
<li>Moscow</li>
<li>Vladivostok</li>
<li>Kazan</li>
<li>Sochi</li>
</ul>
</li>
<li>History</li>
<li>Demographics</li>
<li>Geographics</li>
<li>Culture</li>
</ul>
</li>
<li>Home</li>
</ul>
And css:
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #fff;
}
.third-level-menu>li:hover {
background: #f1f1f1;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 30px;
background: #fff;
}
.second-level-menu>li a {
color: #333;
float: left;
padding-left: 23px;
}
.second-level-menu>li:hover {
background: #f1f1f1;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: right;
height: 30px;
width: 100px;
background: transparent;
margin-top: 20px;
text-align: center;
font-size: 14px;
}
.top-level-menu>li:hover {
background: #fff;
}
.top-level-menu li:hover>ul {
display: inline;
}
.top-level-menu a
{
color: #fff;
text-decoration: none;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #333;
}
body {
background: rgb(15, 14, 14);
}
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #fff;
}
.third-level-menu > li:hover {
background: #f1f1f1;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #fff;
}
.second-level-menu > li a {
color: #333;
float: left;
padding-left: 23px;
}
.second-level-menu > li:hover {
background: #f1f1f1;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li {
position: relative;
float: right;
height: 30px;
width: 100px;
background: transparent;
margin-top: 20px;
text-align: center;
font-size: 14px;
}
.top-level-menu > li:hover {
background: #fff;
}
.top-level-menu li:hover > ul {
display: inline;
}
.top-level-menu a {
color: #fff;
text-decoration: none;
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #333;
}
/* class style add */
.dropdown:hover a {
color: #333;
}
/* end */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul class="top-level-menu">
<li>Contact</li>
<li>Gallery</li>
<li>Travel</li>
<!-- dropdown class added -->
<li class="dropdown">
<!-- end -->
General
<ul class="second-level-menu dropdown-content">
<li>People</li>
<li>Defense</li>
<li>
Cities
<ul class="third-level-menu">
<li>Moscow</li>
<li>Vladivostok</li>
<li>Kazan</li>
<li>Sochi</li>
</ul>
</li>
<li>History</li>
<li>Demographics</li>
<li>Geographics</li>
<li>Culture</li>
</ul>
</li>
<li>Home</li>
</ul>
</body>
</html>
Related
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
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;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I have this code, and it doesn't work.
The sub-menu is not displaying when I hover over the main-menu.
The color changing seems to work but the second list is not showing under main menu on hover.
I can't find the problem...
Please help
<html>
<head>
<title>test</title>
<style type="text/css">
#navigationbar {
position: relative;
padding: 0;
margin: 0;
height: 30px;
width: 90%;
}
#navigationbar ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}
#navigationbar ul>li {
display: block;
float: left;
height: auto;
width: 130px;
}
#navigationbar li>a {
display: block;
height: 100%;
padding: 0 0 0 10px;
width: 115px;
border-right: 1px black solid;
font-size: 17px;
font-family: sans-serif;
background-color: #eeeeee;
color: #5d5636;
line-height: 30px;
text-decoration: none;
}
#navigationbar ul ul {
margin-top: 2px;
display: none;
width: 160px;
height: auto;
background-color: #dddddd;
position: static;
border: 1px #666666 solid;
}
#navigationbar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}
#navigationbar ul ul li>a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size 12px;
font-style: normal;
}
#navigationbar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationbar li:hover > ul {
display: block;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<nav id="navigationbar">
<ul>
<li>Home</li>
<li>A</li>
<ul>
<li><a href=/a.html>aaaaa</a></li>
<li><a href=/b.html>bbbbb</a></li>
<li><a href=/c.html>ccccc</a></li>
</ul>
<li>B</li>
<ul>
<li><a href=/aa.html>AAAA</a></li>
<li><a href=/bb.html>BBBBB</a></li>
<li><a href=/cc.html>CCCCC</a></li>
</ul>
</ul>
</nav>
</body>
</html>
Thanks.
You had the closing tag for the li in the wrong place
<html>
<head>
<title>test</title>
<style type="text/css">
#navigationbar {
position: relative;
padding: 0;
margin: 0;
height: 30px;
width: 90%;
}
#navigationbar ul {
position: absolute;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}
#navigationbar ul>li {
display: block;
float: left;
height: auto;
width: 130px;
}
#navigationbar li>a {
display: block;
height: 100%;
padding: 0 0 0 10px;
width: 115px;
border-right: 1px black solid;
font-size: 17px;
font-family: sans-serif;
background-color: #eeeeee;
color: #5d5636;
line-height: 30px;
text-decoration: none;
}
#navigationbar ul ul {
margin-top: 2px;
display: none;
width: 160px;
height: auto;
background-color: #dddddd;
border: 1px #666666 solid;
}
#navigationbar ul ul li {
position: relative;
float: none;
display: block;
height: 28px;
width: 100%;
border: none;
}
#navigationbar ul ul li>a {
height: 100%;
width: 96%;
padding: 0 0 0 4%;
line-height: 28px;
background-color: transparent;
border: none;
color: #000000;
font-size 12px;
font-style: normal;
}
#navigationbar li:hover > a {
color: #220000;
background-color: #eeeabe;
}
#navigationbar li:hover > ul {
display: block;
}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<nav id="navigationbar">
<ul>
<li>Home
</li>
<li>A
<ul>
<li><a href=/a.html>aaaaa</a>
</li>
<li><a href=/b.html>bbbbb</a>
</li>
<li><a href=/c.html>ccccc</a>
</li>
</ul>
</li>
<li>B
<ul>
<li><a href=/aa.html>AAAA</a>
</li>
<li><a href=/bb.html>BBBBB</a>
</li>
<li><a href=/cc.html>CCCCC</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I have created a simple navigation that seem to work ok. There is one thing that is really bugging me though. On the last dropdown item i would like some space after the border but cant quite work out how to get it. I have tried putting some bottom padding on the dropdown li but it doesnt seem to work.
Really appreciate any advice to where i am going wrong.
https://jsfiddle.net/rufusbear/hv8gwwg9/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fennes Clay</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="https://use.fontawesome.com/9c815a24d9.js"></script>
<style>
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
</body>
</html>
Is this what you're after?
.dropdown li:last-child a {
margin-bottom: 10px;
}
You can add
background-color: #718373;
padding-bottom: 20px;
to .dropdown element.
To prevent links from shaiking on hover replace
.dropdown li a:hover {
border: 2px solid white;
}
with
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
.nav-wrap {
max-width: 700px;
margin: 0 auto;
background-color: #718373;
height: 80px;
text-transform: uppercase;
}
.dropdown {
display: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #718373;
padding-bottom: 20px;
}
.dropdown li a {
width: 110px;
height: 40px;
line-height: 40px;
margin: 0 auto;
padding: 5px 10px;
}
.nav-list {
margin: 0;
padding: 0;
}
.nav-list li {
position: relative;
list-style: none;
float: left;
width: 150px;
line-height: 80px;
text-align: center;
background-color: #718373;
}
.nav-list li a {
text-decoration: none;
color: white;
display: block;
}
.nav-list li:hover>.dropdown {
display: block;
}
.dropdown li a:hover {
outline: 2px solid white;
outline-offset: -2px;
}
<nav>
<div class="nav-wrap">
<ul class="nav-list">
<li>about
<ul class="dropdown">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</li>
<li>about</li>
<li>about</li>
</ul>
</div>
</nav>
Add this rule:
.nav-list li ul li:last-child {
padding-bottom: 15px;
}
It adds padding-bottom only to the last li of each nested ul inside the .nav-list (Adjust the px amount as you need it)
Here it is in a fiddle: https://jsfiddle.net/8w67f9y7/2/
check with this one
https://jsfiddle.net/rufusbear/hv8gwwg9/
margin-top: 30px;
How can I decrease the size of a <nav> tag in CSS? I cannot seem to figure it out. I have provided all of the code from my project below. My code did have PHP, but I have removed it due to it being unnecessary. Here is a JSFiddle, if you wish to preview the code there.
HTML and CSS:
#top-menu {
top: 0;
position: fixed;
}
nav {
position: relative;
/*float: left;*/
width: 100%;
background: #1E1E1E;
/* display: table; */
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
/*--------------------------------------------*/
#menu {
background-color: #1E1E1E;
text-align: center;
padding-bottom: 0px;
}
body {
margin: 0px;
}
.clearfloat {
clear: both;
margin: 0;
padding: 0;
}
/*--------------------------------------------*/
#bottom {
float: left;
width: 100%;
background: #1E1E1E;
/*display: table; */
margin: 0;
text-align: center;
min-height: 25px;
height: 25px;
border-width: 0px;
margin-top: 0px;
padding-top: 0px;
bottom: 0px;
position: fixed;
}
#bottom ul ul {
display: none;
}
#bottom ul li:hover > ul {
display: block;
}
#bottom ul {
background: #1E1E1E;
color: white;
padding: 0 0;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
}
#bottom ul:after {
content: "";
clear: both;
display: block;
}
#bottom ul li {
float: left;
}
#bottom ul li:hover:nth-child(1) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover {
background: #1E1E1E;
color: white;
text-decoration: underline;
}
#bottom ul li:hover a {
color: #fff;
}
#bottom ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
#bottom ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width: auto;
}
#bottom ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#bottom ul ul li a {
padding: 15px 40px;
color: #fff;
}
#bottom ul ul li a:hover {
background: #4b545f;
}
#bottom ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
/*--------------------------------------------*/
.bottommenuitem {
vertical-align: middle;
padding: 25px 40px;
color: #757575;
}
<!DOCTYPE html5>
<html>
<head>
<title>Firma A/S</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>
<body>
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
<!-- PHP was here -->
</nav>
</nav>
<div style="margin-top: 410; margin-bottom: 115">
<!-- More PHP was here -->
</div>
<nav id="bottom">
<ul>
<li class="bottommenuitem">Firma A/S</li>
<li class="bottommenuitem">phone No</li>
<li>xxx#xxx.xx
</li>
</ul>
</nav>
</body>
</html>
Any help is appreciated, thank you.
Please try this:
nav ul {
background: #1e1e1e none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: white;
display: inline-table;
list-style: outside none none;
margin: 0;
padding: 10px;
position: relative;
}
nav {
float: left;
width: 100%;
background: #1E1E1E;
display: table;
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
</nav>
</nav>
If you are talking about the fixed nav id=top-menu, just add a height to the CSS for the id selector. It works for me. If you have problems with it being overridden, make sure that it is placed lower in the CSS file or add !important
after the rule.
#top-menu {
height: 6px;
}
#top-menu {
height: 6px !important;
}
I am trying to design a website with a horizantal navigation bar and with a side bar. The problem started when I added a div (content) which is obstructing the submenu
I am adding the code for your reference. Please help me out
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
z-index:999;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
You simply need to increase the z-index of the submenu, by e.g. adding
.nav ul ul{
z-index:99;
}
The z-index property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Although a value of 99 is likely excessive in this case, z-index effectively dictates the layering precedence of the element in question. note that in order to apply, the element will also need a position set (which your sub menu's already have)
Add
.content{
z-index: -100;
}
The content was like becoming an overlay on your dropdown menu item. So the cursor active scope was getting lost.
or add z-index in positive value for the menu