Here is my menu test page with all the css:
body {
margin: 0;
}
.z-depth-0 {
box-shadow: none !important
}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper {
height: 100%;
position: relative;
top: 0;
}
.right {
float: right !important
}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a {
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content {
display: none;
}
#nav-mobile li:hover .dropdown-content {
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;
}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
I want the first ul menu to be right aligned on the page and I want the dropdown menu to be displayed with items one under the other when user hovers over Links or User. Instead, the dropdown content gets displayed in line. Can anyone help me fix the menu?
Also I want Links and User to be displayed a little higher
You need to position your items as relative and absolute. Parent items get a position: relative; and children get a position: absolute;
Best of luck!
<!DOCTYPE html>
<html>
<head>
<title>Test Menu</title>
<style>
body {
margin: 0;
}
.z-depth-0{box-shadow:none !important}
nav {
width: 100%;
height: 56px;
color: #fff;
line-height: 56px;
background-color: rgb(238, 110, 115);
}
.dark-blue {
background-color: darkblue;
}
nav .nav-wrapper{
height: 100%;
position: relative;
top: 0;
}
.right {float: right!important}
#nav-mobile li {
display: inline-block;
margin: 0 1.5em 1.5em 1.5em;
}
#nav-mobile li a{
text-decoration: none;
color: white;
}
#nav-mobile li .dropdown-content{
display: none;
}
#nav-mobile li:hover .dropdown-content{
display: block;
}
#nav-mobile .dropdown-button .dropdown-content li a {
display: none;}
#nav-mobile .dropdown-button:hover .dropdown-content li a {
display: block;
}
ul#userdrop {
/* right: 0; */
/*left: 0;*/
margin-left: -100px;
}
#nav-mobile li .dropdown-content {
display: none;
position: absolute;
background: #000000;
}
#nav-mobile li a {
text-decoration: none;
color: white;
position: relative;
}
.right {
float: right!important;
/* position: absolute; */
/* right: 0; */
margin-top: 0px;
}
</style>
</head>
<body>
<nav class="dark-blue z-depth-0">
<div class="nav-wrapper container">
<ul id="nav-mobile" class="right">
<li><a class='dropdown-button' href='#'>Links</a>
<ul id="quicklinkdrop" class="dropdown-content">
<li>Home</li>
<li>Access</li>
<li>Zone</li>
</ul>
</li>
<li><a class='dropdown-button' href='#'><span>User</span></a>
<ul id="userdrop" class="dropdown-content">
<li>My Profile</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Ok to get the options to display top down you want to add
#quicklinkdrop li{
display:list-item;
}
#userdrop li{
display:list-item;
}
This should fix them being inline and put items on top of each other
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
I'm trying to replica the navigation menu from this website. I've managed to it working to a certain extent, but can't make the service link when hovered to stay the same colour and all of the other to change.
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
As you can see I've changed the link colours on hover of the unordered list which is probably not the best way of trying to get this to work. Please, could someone advise me on the best method to fix this?
You're close -- you have to remove the !important from the rule affecting .nav ul:hover a as this is overriding the rule that will ensure the hovered item is a different color than the rest:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource on how !important affects other rules on the page.
I am new to web design. I am trying to create a site where in some menus in menu bar have sub menus. I want on mouse hove it should display submenu which is not happening. This is my code:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown li:hover>ul {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
On mouse hover on 'Drinks' nothing comes up. I want when I move mouse on 'Drikns' sub menus 'Pan Shots' and 'Tea' should be visible and should hide when mouse is not on 'Drinks'.
Your example is kinda messy and there's a lot of unnecessary code, i'm gonna present you with an example that can you work from.
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
ul>li {
flex: 1;
background: dodgerblue;
height: 45px;
text-align: center;
}
ul>li>a {
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
}
ul>li>ul {
display: none;
}
ul>li:hover>ul {
display: block;
}
.dropdown>a:after{
content:'▿';
font-weight:bold;
}
<ul>
<li>Home</li>
<li class="dropdown">Drinks
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Contact Us</li>
</ul>
You are mixing display and visibility. Your selector is wrong as well.
.dropdown li:hover>ul
Means that CSS is looking for an li child element of .dropdown to be hovered before something is done with the > ul
Since CSS properties are inherited your text is still white in a child element. Therefor you don't see the text.
Try the following:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown:hover ul {
visibility: visible;
}
.dropdown ul a {
color: black;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
I want to reposition my navbar. In its current position:
#navbar ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
background-color: #5D2C2C;
/*position: relative;
bottom: 115px;*/
}
#navbar ul li {
float: left;
/*position: relative;
left: 420px;*/
}
#navbar li li {
display: none;
}
#navbar li:hover li {
display: block;
width: inherit;
}
#navbar a {
font-family: "Palatino Linotype";
color: #FFF;
text-decoration: none;
padding: 2px 5px;
}
the dropdown displays correctly
but when I remove the /* comments */ so the bar is correctly positioned, the menu drops down but the two items aren't showing and I cannot find out why
the HTML if needed:
<div id="navbar">
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritme Signals: Letters</li>
<li>Maritme Signals: Numbers </li>
</ul>
</li>
</ul>
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.