I'm making a basic website with a language switcher dropdown but I'm having a problem that the dropdown items overlap the active dropdown item as shown below. How can I remove this overlap?
The code for this example:
/* Language switcher */
.lang-switch-hidden {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
}
.lang-switch-hidden {
display: none !important;
position: absolute;
}
li#lang-switch-active-lang {
padding: 10px 16px;
}
li#lang-switch-active-lang:hover>.lang-switch-hidden {
display: block !important;
}
li.lang-switch-active-lang,
li.lang-switch-inactive-lang {
display: list-item !important;
}
/* Navigation bar */
#navbar {
color: black;
background-color: #f1f1f1;
margin-top: 1.5em;
}
#navbar ul {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
/* right and left aligned trick http://jsfiddle.net/QfD6J/7/ */
#navbar li {
display: table-cell;
white-space: nowrap;
}
#menuleft-last {
width: 100%;
}
#navbar a {
text-decoration: none;
color: black;
padding: 10px 16px;
}
#navbar b {
text-decoration: none;
color: black;
display: block;
text-align: center;
padding: 10px 16px;
}
#navbar a:hover {
background-color: #dfdfdf;
}
.dropdown {
overflow: hidden;
}
<div id="navbar">
<ul>
<li class="" id="menuleft-last">
Home
</li>
<li><b>Projects:</b></li>
<li class="">
Project 1
</li>
<li class="">
Project 2
</li>
<li id="lang-switch-active-lang"><img src="https://mattiasjohnson.com/flags/English.svg" width="20em" /> <i style=" border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);"></i>
<ul class="lang-switch-hidden">
<li class="lang-switch-inactive-lang"><a title="Italian" href="">
<img src="https://mattiasjohnson.com/flags/Italian.svg" width="20em" />
</a>
</li>
</ul>
</li>
</ul>
</div>
.
.lang-switch-hidden {
display: none !important;
position: absolute;
top: 62px;
right: 2px;
}
Related
updated issue!! I would like my navigation bar to have a drop down effect when hovering over it. I have tried the different methods suggested and my list was hidden behind my section following. So after changing it incorrectly so many time, I have now gotten confused. This is how it is currently. Now the dropdown list is stuck on display. I just want the list to show when hovering. Also the search box is supposed to be on the same line as the nav links but it has now moved below. I can figure out how to fix that if someone can help me with the drop down menu, please.
.navbar {
background: linear-gradient(#9E0A0C,#EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a{
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 1.5vw;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar li{
border-left: solid 2px #000000;
list-style-type: none;
display: inline;
width: 800px;
padding: 0;
/*position: relative;*/
}
/*li a {
display: block;
color: white;
text-align: center;
padding: 5px 94px;
text-decoration: none;
}*/
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 1.5vw;
}
li:first-child {
border-left: none;
}
.dropdown {
display: none;
position: relative;
overflow: hidden;
}
.list {
display:none;
/*opacity: 0;
visibility: hidden;*/
z-index: 100;
min-width: 50px;
max-width: 350px;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
/*transition: 0.3s ease-in-out;*/
}
.list a {
color: #000000;
font-size: 1.25vw;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
column-count: 2;
}
.list a:hover {
background-color: #EEEEEE;
font-size: 1.25vw;
}
.dropdown:hover, .list {
display: block;
/*position: absolute;
left: 0;*/
}
<nav class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list"> NEWS FACILITIES OFFICERS GUEST BOOK </div>
</li>
<li class="dropdown">Events
<div class="list"> CALENDAR BINGO </div>
</li>
<li class="dropdown">Contact Us
<div class="list"> WHO ARE WE? </div>
<div class="list"> BECOME AN ELK </div>
</li>
</ul><form action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</nav>
within your css the line .dropdown:hover, .list { should be .dropdown:hover .list { without the comma
put your form into an <li> element within the <ul>. the float: right should be assigned to the form not the input
html:
...
</li>
<li>
<form class="navbar-search" action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</li>
</ul>
</nav>
css:
.navbar-search {
float: right;
}
update:
I don't know why you would like to have a column-count. is this on purpose?
in the last <li>element are two divs -> one overlays the other
please do you self a favour and reduce the amount of whitspaces as well as putting one html element per line and use comments (html AND css)! this makes debugging a whole lot easier and you will still understand what you did yesterday.
update 2:
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 1.5vw;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar ul:after {
content: "";
display: table;
clear: both;
}
.navbar li {
border-left: solid 2px #000000;
list-style-type: none;
display: inline;
width: 800px;
padding: 0;
/*position: relative;*/
}
/*li a {
display: block;
color: white;
text-align: center;
padding: 5px 94px;
text-decoration: none;
}*/
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 1.5vw;
}
li:first-child {
border-left: none;
}
.dropdown {
display: none;
position: relative;
overflow: hidden;
}
.list {
display: none;
z-index: 100;
min-width: 50px;
max-width: 350px;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
font-size: 1.25vw;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
}
.list a:hover {
background-color: #EEEEEE;
font-size: 1.25vw;
}
.dropdown:hover .list {
display: block;
}
.navbar-search {
float: right;
}
<nav class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
WHO ARE WE?
BECOME AN ELK
</div>
</li>
<li>
<form class="navbar-search"action="search.html">
<input class="search" type="text" placeholder="Search.." name="search">
</form>
</li>
</ul>
</nav>
I want to create a dropdown nav menu with a modal like box appearing on hover.
Here in my example, Products heading needs to open 4 columns of subheadings that align themselves into a bootstrap like grid.
I am close to the result but I am facing a couple of hurdles: my hover does not seem to work. Also, my subheading appears only within the perimeter of my navbar - whereas I want it to appear a little below the navbar, with some padding.
I looked at these 2 examples but they did not help me:
stackoverflow reference 1
stackoverflow reference 2
Please find the code and guide me in the right direction:
.topnav {
background-color: white;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
color: grey;
}
.nav {
list-style: none;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
.nav li:first-child {
margin-right: auto;
}
.nav li {
position: relative;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 560px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 20;
border: 1px solid white;
padding: 80px;
height: 220px;
}
.dropdown-content ul {
display: block;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.noshow {
display: none;
}
.dropdown-content:hover .noshow {
display: block
}
.subheading {
font-weight: 700;
}
<nav class="topnav">
<ul class="nav">
<li><a class="active" href="#title"> Title</a></li>
<li>
Products
<div class="dropdown-content arrow-up noshow">
<ul class="column large-3 each-column">
<li class="subheading">subheading</li>
<li>
subheading1
</li>
<li>
subheading2
</li>
<li>
subheading3
</li>
</ul>
</div>
</li>
<li>link2</li>
<li>link3</li>
<li><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
.left_menu {
float: left;
width: 50%;
}
.right_menu {
float: left;
width: 50%;
}
.right_menu ul {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
/* background-color: red;*/
/*color: white;*/
}
li.dropdown {
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="left_menu">
<ul>
<li>Title</li>
</ul>
</div>
<div class="right_menu" style="float: left; width: 50%">
<ul>
<li class="dropdown">
Product
<div class="dropdown-content">
I've looked through other questions but none seem to explain the problem I'm having. I want to create a drop down menu to an already existing navigation bar, and I think it's a problem with the way I've named the classes.
Here is my HTML code for the nav bar
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
And here is the CSS I have tried to implement:
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
I works otherwise, the menu just doesn't drop down. Can anyone help? Thanks a lot!
Your selector to show the menu on hover is .extendMenuClass:hover .extendedDiv, but .extendedDiv is not a child of .extendMenuClass. Updated that so that it is a child and that selector will work.
Then you need to remove overflow: hidden; from .customMenu since .extendedDiv will bleed below/outside of .customMenu and will be hidden if overflow is hidden.
.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
float: left;
}
.customList a, .extendMenu{
font-family: Sans Serif;
font-size: 23px;
text-decoration: none;
text-align: center;
padding: 16px 17px;
display: block;
color: white;
}
.customList a:hover, .extendMenuClass:hover .extendMenu{
background-color: #00264d;
color: red;
}
.menuActif{
background-color: red;
color: red;
}
.menuActif:hover{
background-color: white;
color: #00264d;
}
.customList.extendMenuClass{
display: inline-block;
}
.extendedDiv{
display: none;
background-color: #00264d;
position: absolute;
min-width: 200px;
box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.extendedDiv a{
display: block;
color: white;
padding: 15px 15px;
}
.extendedDiv a:hover{
color: red;
}
.extendMenuClass:hover .extendedDiv{
display: block;
}
<ul class="customMenu">
<li class="customList"><a class="menuActif" href="#">Home</a></li>
<li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a>
<div class="extendedDiv">
Paris
Lyon
Toulouse
</div></li>
<li class="customList">Phrases</li>
<li class="customList">Bank Accounts</li>
<li class="customList">Important Notes</li>
<li class="customList">CAF</li>
<li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>
Common syntax for navigation is nesting unordered lists inside other unordered lists.
so you'd set it up like:
<ul class="main-nav">
<li>1</li>
<li class="dropdown">2
<ul class="dropdown-list">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</li>
<li>3</li>
</ul>
It's a lot easier to keep parent and child elements in order.
I just set it up a little easier for you to follow and continually add items:
HTML:
<ul class="customMenu">
<li style="background:red;">Home</li>
<li class="extend">Cities
<ul class="dropdown">
<li>Paris</li>
<li>Lyon</li>
<li>Toulouse</li>
</ul>
</li>
<li>Phrases</li>
<li>Bank Accounts</li>
<li>Important Notes</li>
<li>CAF</li>
<li style="background: red; float: right;">Déconnexion</li>
</ul>
CSS:
ul.customMenu {
width: 100%;
background: #00264d;
}
ul.customMenu li {
display: inline-block;
}
ul.customMenu li a {
display: block;
font-size: 23px;
color: #fff;
text-decoration: none;
padding: 16px 17px;
}
ul.customMenu li a:hover {
color: red;
}
ul.customMenu li ul.dropdown {
display: none;
position: absolute;
top: 55px;
left: -5px;
background: red;
overflow: hidden;
}
ul.customMenu li ul.dropdown li a {
display: block;
width: 100%;
padding: 16px 20px;
}
ul.customMenu li ul.dropdown li a:hover {
color: #fff;
background: #cc0000 !important;
}
li.extend {
position: relative;
}
li.extend:hover ul.dropdown {
display: block !important;
}
I'm having difficulty aligning an unordered list inside a div.
As you can see by the picture, my list of icons are being pushed to the right instead of taking up 100% width of the div they are being contained in.
I'm pretty sure this is because I've set list-style-type:none
I'm not sure how to combat this without setting negative margins.
I'll also add the code used yet:
div#mobile-nav {
position: absolute;
width: 100%;
height: auto;
background-color: orange;
padding: 0px;
margin: 80px 0px 0px 0px;
}
ul.responsive {
min-width: 100%;
margin: 0 auto;
list-style-type: none;
}
ul.responsive li {
float: none;
}
ul.responsive li a {
text-align: center;
color: black;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 1px solid black;
height: 56px;
display: block;
width: 100%;
}
ul.topnav li {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
<div id="mobile-nav">
<ul class="responsive">
<li> HOME </li>
<li> ABOUT US </li>
<li> PROJECTS </li>
<li> CONTACT US </li>
</ul>
</div>
Reset the default padding of <ul>:
div#mobile-nav {
position: absolute;
width: 100%;
height: auto;
background-color: orange;
padding: 0px;
margin: 80px 0px 0px 0px;
}
ul.responsive {
min-width: 100%;
margin: 0 auto;
padding: 0; /* Here, reset like this! */
list-style-type: none;
}
ul.responsive li {
float: none;
}
ul.responsive li a {
text-align: center;
color: black;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 1px solid black;
height: 56px;
display: block;
width: 100%;
}
ul.topnav li {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
<div id="mobile-nav">
<ul class="responsive">
<li> HOME </li>
<li> ABOUT US </li>
<li> PROJECTS </li>
<li> CONTACT US </li>
</ul>
</div>
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)