I have a top menu aside in the main menu. This top menu have submenus, but this submenu doesn't behave properly. I can hover only the first submenu, the rest are not. How to fix this?
Here is my code:
.top-menuv2 ul {
list-style-type: none;
margin: 10px 20px 0 700px;
font-size: 0.80em;
float: none;
}
.top-menuv2 ul li {
display: inline;
margin-right: 20px;
font-family: 'Open Sans Bold', sans-serif;
line-height: 1.8;
}
.top-menuv2 a {
color: black;
}
.top-menuv2 .top-navigation {
text-align: center;
}
.top-menuv2 ul li>a:hover {
color: #555;
text-decoration: underline;
}
.top-menuv2 li:hover>ul {
display: block;
}
.top-menuv2 ul li>a:active {
color: #d31716;
}
.top-menuv2 li {
display: inline-block;
position: relative;
}
.top-menuv2 li>ul {
position: absolute;
right: -50%;
top: 20%;
width: auto;
display: none;
white-space: nowrap;
}
.top-menuv2>li>ul {
top: auto;
right: -50%;
width: 100%;
}
.top-menuv2 li>a:after {
margin-left: 5px;
content: '\f107';
font-family: FontAwesome;
}
.top-menuv2>li>a:after {
margin-left: 5px;
content: '\f107';
font-family: FontAwesome;
}
.top-menuv2 li>a:only-child:after {
margin-left: 0;
content: '';
}
.top-menuv2 li>ul>li {
display: block;
}
<div class="top-navigation top-menuv2">
<ul>
<li class="cs cc"> Customer Service 02 753 57 11</li>
<li>Contacts</li>
<li>Our Partners
<ul>
<li>Tangible benefits for retailers</li>
<li>Retailer Registration Process</li>
</ul>
</li>
<li>Careers
<ul>
<li>A Career with Home Credit</li>
<li>Recruitment Process</li>
<li>Vacancies</li>
<li>Corporate Culture</li>
</ul>
</li>
</ul>
</div>
You have to change the z-index of .top-menuv2 li > ul. Add z-index: 99; to your .top-menuv2 li > ul. Because by default #site-navigation .menu > ul > li go over top menu li.
Related
I have a problem. I don't know what wrong with the code as when I hover the mouse over 'About us', the submenu didn't show up. I did make the submenu display:none and then when hover, it display: block but nothing happen. Thanks for your help
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
display: none;
position: absolute;
top: 100%;
list-style: none;
}
#nav_menu #sub_menu:hover{
display: block;
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
My method is a little different and shorter with the animation opening and closing for the submenu, I used the scale instead of display for animation;
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
position: relative;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
position: absolute;
top: 100%;
list-style: none;
padding: 0;
transform : scaleY(0);
transform-origin: top;
transition: all 0.4s;
}
#nav_menu li:hover #sub_menu{
transform: scaleY(1);
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
To display a submenu when hovering, you need to write like this:
#nav_menu li:hover #sub_menu {
display: block;
}
Because you are accessing the #sub_menu selector. Also, you need to add position: relative the selector #nav_menu li is relevant for the correctness of your position: absolute of the selector #nav_menu #sub_menu. And add padding: 0 for the selector of the same selector #nav_menu #sub_menu, in order to align it under the main menu.
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#nav_menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu li{
float: left;
position: relative;
}
#nav_menu li a{
display: block;
width: 160px;
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
background-color: #800000;
color: white;
font-weight: bold;
text-align: center;
}
#nav_menu .current{
color: yellow;
}
#nav_menu #sub_menu{
display: none;
position: absolute;
top: 100%;
list-style: none;
padding: 0;
}
/*#nav_menu #sub_menu:hover{
display: block;
}*/
#nav_menu li:hover #sub_menu{
display: block;
}
#nav_menu #sub_menu li a{
float: right;
}
<ul id="nav_menu">
<li>Home</li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul id="sub_menu">
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
I am trying to build a dropdown menu. My problem is that hovering the content also shows the dropdown menu. I am currently using this code:
/* actual dropdown menu */
#menu-hauptmenue {
height: 45px;
}
.sub-menu {
opacity: 0;
background: #4d4d4d;
display: block;
z-index: 200;
width: 250px;
position: absolute;
margin-top: 23px;
}
.sub-menu li {
display: block;
width: 250px;
line-height: 2.7;
padding: 10px 15px 10px 15px;
z-index: 220;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
}
.sub-menu li a {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
.sub-menu li:hover {
background-color: #333333;
cursor: pointer;
}
.sub-menu a:hover {
border-bottom: none;
}
#menu-hauptmenue li:hover .sub-menu {
opacity: 1;
}
#billboard img {
z-index: 1;
}
li {
z-index: 20;
}
.clearfix:after {
display: block;
clear: both;
}
nav>ul>li {
position: relative;
}
nav.open .sub-menu {
padding-top: 0px;
display: none;
}
/* styling of the nav */
nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
nav ul li a:hover {
border-bottom: 1px solid #4D4D4D;
}
<nav>
<ul id="menu-hauptmenue">
<li>Parent 1
<ul class="sub-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li>Parent 2</li>
<li>Parent 3</li>
</ul>
</nav>
As you can see, hovering the content below the navigation also displays the dropdown menu. It would be better to only display the navigation when hovering the parent li element, in this case 'Parent 1'. How can I achieve this the best way? Thank you for your advice.
It's because your element is present with 0 opacity so you are able to interact with it. You may try using display:none/block like this:
/* actual dropdown menu */
#menu-hauptmenue {
height: 45px;
}
.sub-menu {
opacity: 0;
background: #4d4d4d;
display: none;
width: 250px;
position: absolute;
margin-top: 23px;
}
.sub-menu li {
display: block;
width: 250px;
line-height: 2.7;
padding: 10px 15px 10px 15px;
z-index: 220;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
}
.sub-menu li a {
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
.sub-menu li:hover {
background-color: #333333;
cursor: pointer;
}
.sub-menu a:hover {
border-bottom: none;
}
#menu-hauptmenue li:hover .sub-menu {
opacity: 1;
display:block;
}
#billboard img {
z-index: 1;
}
li {
z-index: 20;
}
.clearfix:after {
display: block;
clear: both;
}
nav>ul>li {
position: relative;
}
nav.open .sub-menu {
padding-top: 0px;
display: none;
}
/* styling of the nav */
nav ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-decoration: none;
}
nav ul li a:hover {
border-bottom: 1px solid #4D4D4D;
}
<nav>
<ul id="menu-hauptmenue">
<li>Parent 1
<ul class="sub-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li>Parent 2</li>
<li>Parent 3</li>
</ul>
</nav>
I can't figure out why the hover state in my css does not work. I've been successful in hiding the sub navigation, but can't get it to reappear on rollover. I Any help would be appreciated. Thanks.
Here's the html:
<nav>
<ul>
<li>writings</li>
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
<li>fundraising</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
and the css:
.nav {
position: relative;
margin-left: 200px;
margin-top: -50px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav > ul > li {
float: left;
font-size: 30px;
}
.nav ul::after {
content:'';
display: block;
clear: both;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
float: left;
display: block;
position: absolute;
top: 90%;
display: none;
line-height: 5px;
}
nav ul li a {
display: inline-block;
color: rgb(92,178,227);
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
text-decoration: none;
}
You need the sub nav inside of the list item:
<li>writings
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
</li>
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE