I want to add a dropdown menu to my navigation bar but i am not being able to do it properly ? Can anyone help me to properly format it so that that would drop down properly whenever hovered ?
HTML:
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Me</li>
<li>Website</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
background-color: #311310;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
left: 0px;
width: 100%:
}
nav ul li ul li {
background: #311310;
display: block;
}
nav ul{
margin: 0px;
padding: 10px 0px 10px 100px;
}
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
}
nav ul li a {
color: #d9d9d9;
text-decoration: none;
}
nav ul li a:hover{
color: #ffffff;
}
And here is the broken navigation bar Snap :
How can i display the nested one right below about ?
Give position: relative; to the parent:
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
position: relative;
}
And position: absolute; to the menu:
nav ul li ul {
background: #311310;
display: block;
position: absolute;
left: 0;
}
Try this code
add position: relative for nav ul li
Related
In the below snippet I have a CSS menu using nested lists. A problem I have with it is that when you hover over the second list item, it reveals the nested list but in the process, increases the parent list's height pushing everything else down.
I'm aware I can use a position of absolute however that leads to a problem of the nested list not sitting below it's parent element and making it incredibly annoying to style for each nested list I may want.
Is there a simple way I can solve my problem while maintaining the nested loop sitting below it's parent (and by extension, making it possible to access with the :hover)
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: relative;
left: 50px;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
I hope your issue is fixed in below fiddle. Try it.
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: absolute;
left: 50px;
top:100%;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
For this you will need to understand the concept of position...Use position:absolute for the drop-menu and position:relative for its parent li...no need to write css for every drop-menu
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li>ul {
display: none;
position: absolute;
top: 100%;
left: 0px;
border: 1px solid #fff;
min-width: 150px;
}
nav ul li>ul li {
display: block;
color: #fff;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3
<ul>
<li>Item-3A</li>
<li>Item-3B</li>
<li>Item-3C</li>
<li>Item-3D</li>
</ul>
</li>
<li>Item-4</li>
</ul>
</nav>
There is nothing to worry about using absolute position for submenu. just make the parent relative. According to your code
nav ul li {
display: inline-block;
position: relative; // Added
}
and than modify nested ul like this
nav ul li > ul {
display: none;
position: absolute; // Added
left: 0; // Changed
border: 1px solid #fff;
width: 160px; // Change as per your requirement
}
My sub menu is disappearing on hover. When I hover over the menu item it appears but when i try to go to the sub menu item.. it goes away. Any idea why?
I have tried doing this:
.nav ul li:hover ul {
display: block !important;
}
But i still have the same issue. Any help will be appreciated!
HTML:
<div class="nav">
<ul>
<li>
Testing
<ul>
<li>Testing 1</li>
</ul>
</li>
</ul>
</div>
CSS:
.nav ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li {
display: inline-block;
border-right: 1px solid #7d7a7a;
}
.nav ul ul li {
border-right: none;
}
.nav ul li:last-child {
border-right: none;
}
.nav ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 0 10px;
height: 80%;
}
.nav ul li a i {
color: #000;
}
.nav ul ul li:hover ul {
display: block;
}
.nav ul li:hover ul {
display: block !important;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 34px;
padding: 13px 10px;
}
.nav ul li ul li:hover {
background-color: #47a3da;
}
JSFiddle demo
It's happening because there is a gap between the dropdown and the button.
You need to get rid of any margin and top for the dropdown to be right under the button.
Demo
.nav > ul {
letter-spacing: 2px;
margin-top: 10px;
}
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
padding: 13px 10px;
}
Since you parent li and its dropdown menu-item has extra space between them, dropdown ul losses the event of .nav ul li ul li:hover. To make it work,
simply adjust the vertical distance b/w parent and its dropdown child menu-item
.nav ul li ul {
position: absolute;
display: none;
background-color: #333;
height: auto;
top: 18px; /* Works fine on 18px*/
padding: 13px 10px;
}
JSFiddle
I would like a deconnexion button to appear when hovering on the menu "Bonjour Toi".
But it's showed on 2 lines instead of 1.
As "Toi" can be changed according to user name, when the name is longer the menu deconnexion is correctly showed on 1 line.
Here is what i have now:
Here is my html code:
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align:center;
padding:10px;
}
.nav-top nav .logo{
float:left;
}
.nav-top nav .logo{
margin-left:20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li{
display:inline-block;
position:relative;
}
.nav-top nav ul li ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
}
.nav-top nav ul li:hover ul{
max-height:15em;
}
.nav-top nav ul li ul a{
padding:8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img{
vertical-align:middle;
}
.nav-top nav ul li:hover li a{
background-color: #FF307E;
color:white;
text-transform:inherit;
}
<div class="nav-top">
<nav>
<div>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li ><a class="active ">Bonjour {{nameUserConnected}}</a>
<ul>
<li><a (click)="confirmLogout()"><img src="./assets/img/logout.png" width="17px" /> Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
How can I get the deconnexion + icon on the same line ?
You have a few problems here. The ul that is positioned absolute will have the width of the element it's relative to. Which is the li containing Bonjour Toi . That's why when it's longer, it will fit. If the text is smaller , the ul won't fit. You also set overflow:hidden on it , you need to remove that
I changed a bit your code ( the image i've set it like a background-image and padding-left of a is equal to the width of image, change it as you like )
All new/changed code is at the top of the CSS styles
see below
.nav-top nav ul li ul {
position: absolute;
z-index: 1000;
max-height: 0;
left: 0;
top: 100%;
display: none;
}
.nav-top nav ul li ul li a {
padding-left: 30px;
background: url('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico') no-repeat scroll left center #FF307E;
}
.nav-top nav ul li ul {
width: 100%;
display: none;
}
.nav-top nav ul li:hover > ul {
display: block;
overflow: visible;
}
.nav-top {
background-color: #475162;
height: 70px;
width: 100%;
text-align: center;
padding: 10px;
}
.nav-top nav .logo {
float: left;
}
.nav-top nav .logo {
margin-left: 20px;
}
.nav-top nav ul {
padding: 0px;
margin: 0px;
float: right;
}
.nav-top nav ul {
margin-right: 50px;
}
.nav-top nav li {
display: inline;
}
.nav-top nav li a {
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}
.nav-top ul li a.active {
border: solid 1px #FF307E;
}
.nav-top ul li a:hover:not(.active) {
border: solid 1px #FF307E;
}
/* BUTTON DECONNEXION */
.nav-top nav ul li {
display: inline-block;
position: relative;
}
.nav-top nav ul li:hover ul {
max-height: 15em;
}
.nav-top nav ul li ul a {
padding: 8px 5px;
text-decoration: none;
}
.nav-top nav ul li ul a img {
vertical-align: middle;
}
.nav-top nav ul li:hover li a {
background-color: #FF307E;
color: white;
text-transform: inherit;
}
<div class="nav-top">
<nav>
<div>
<a routerLink='./'><img class="logo" src="./assets/img/logo.png" height="70px"></a>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a>SUPPORT</a></li>
<li><a class="active ">Bonjour Toi</a>
<ul>
<li><a (click)="confirmLogout()">Déconnexion</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
I am making a website and my navigation bar's drop down is not lining up with the parent navigation bar when I try and position it into the middle of the page. When I use relative positioning, it does not line up. This is my code:
nav ul ul {
display: none;
margin: 0;
padding: 10px;
list-style-type: none;
text-align: center;
background-color: #A7C5A5;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
text-decoration: none;
padding: 0em;
color: #030;
background-color: #A7C5A5;
font-family: Georgia, "Times New Roman", Times, serif;
list-style: none;
position: relative;
display: inline-table;
top: 60px;
left: 300px;
float: inherit;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
display: inline;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #000;
background-color: #CCC;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background-color: #A7C5A5;
border-radius: 0px;
padding: 0;
position: relative;
top: 60px;
left: 300px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
color: #000;
background-color: #CCC;
}
<body>
<div id="bg-right"></div>
<div id="bg-left"></div>
<div class="img">
<img src="greenlogo.jpg" width="504" height="160">
</div>
<nav>
<ul>
<li> Home</li>
<li>Animals
<ul>
<li>Disney</li>
<li>Farm</li>
<li>Nickolodean
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
I tried to make a fiddle for private and I saw in Chrome-Devconsole that some styles are double used or used where you won't that they are used. I would recommend to use classes for the different ul's
Devlen
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 !!