I am learning css and I have created a vertical menu, hovering the mouse over the first menu item shows the sub-menu across. But my problem is, as soon as I move the mouse to the sub-menu, it disappears. How can I make it so it stays there until I clicked one of the sub-menu items? Please help.
Already searched through a lot of examples but none similar to this. I'm new to css and I'm not sure if my approach is the correct for this menu setup requirement. Please enlighten.
#charset "utf-8";
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ~ ul{
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>STORY</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT</li>
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
</body>
</html>
Refer this fiddle : http://jsfiddle.net/zt8ffu11/
html:
<section class="mainMid">
<nav class="navLeft">
<ul>
<li class="about">ABOUT
<ul>
<li class="navBeginning">BEGINNING</li>
<li class="navMnv">Mission<br>
<br>
Vision</li>
<li class="navPeople">People</li>
</ul>
</li>
<li class="projects">PROJECTS</li>
<li class="getinvolved">GET<br>
INVOLVED</li>
<li class="records">RECORDS</li>
<li class="donate">DONATE</li>
</ul>
</nav>
</section>
css:
.navLeft {
width: 25%;
margin-top: 0%;
top: auto;
display: inline;
list-style-type: none;
margin-left: 5%;
position: relative;
z-index: 0;
/* [disabled]clear: none; */
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ul{
display: block;
}
and for list structure check is question Proper way to make HTML nested list?
Related
my drop-down menu is not showing up. It's completely invisible or is just not working. Nothing happens when I hover over the "Store" tab which is where the drop-down should occur. When I remove "visibility: hidden" to see where the drop-down menu actually is, the drop-down items appear as the first two tabs which are "Home" and "About". So in the place of the Home and About tabs, the drop-down menu items appear instead. Any help would be appreciated.
nav {
background-color: #373945;
border-top: 6px solid #ABACAF;
width: 100%;
height: auto;
margin: 0 auto;
display: block;
position: relative;
float: left;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
nav ul ul {
padding: 0;
position: absolute;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .25s ease-in;
-o-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-webkit-transition: all .25s ease-in;
}
nav ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
}
nav ul li {
background-color: #373945;
width: 12.5%;
height: 2em;
border-right: 1px solid #ABACAF;
display: inline-block;
float: left;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
/* Firefox */
display: flex;
justify-content: center;
align-items: center;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
vertical-align: middle;
font-weight: normal;
-webkit-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-moz-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-ms-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-o-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav ul li:nth-child(1) { border-left: 1px solid #ABACAF; }
nav ul li:hover { background-color: #544D55; color: white; }
nav ul li a {
color: #ABACAF;
text-decoration: none;
}
nav ul li:hover a { color: white; }
nav li ul li {
font-size: 1.3em !important;
text-align: left;
width: 100%;
display: block;
float: left;
}
nav li ul li:nth-of-type(1) {
width: 96%;
padding: 18px 0 20px 4%;
}
nav li ul li:nth-of-type(2) {
width: 96%;
padding: 18px 0 20px 4%;
}
nav li ul li a {
color: black;
font-size: 2em;
border: none;
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
cursor: pointer;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] { display: none; }
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { display: block; }
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li>Store</li>
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul>
<li>Contact</li>
</ul>
</nav>
It's not pretty but the dropdown works in the below solution. The issue was the dropdown ul was not nested inside the first-level li.
nav {
background-color: #373945;
border-top: 6px solid #ABACAF;
width: 100%;
height: auto;
margin: 0 auto;
display: block;
position: relative;
float: left;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
nav ul ul {
padding: 0;
position: absolute;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .25s ease-in;
-o-transition: all .25s ease-in;
-ms-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-webkit-transition: all .25s ease-in;
}
nav ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
}
nav ul li {
background-color: #373945;
width: 12.5%;
height: 2em;
border-right: 1px solid #ABACAF;
display: inline-block;
float: left;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
/* Firefox */
display: flex;
justify-content: center;
align-items: center;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
vertical-align: middle;
font-weight: normal;
-webkit-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-moz-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-ms-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-o-transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
transition: background-color 200ms ease-in-out 0s, color 200ms ease-in-out 0ms;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav ul li:nth-child(1) { border-left: 1px solid #ABACAF; }
nav ul li:hover { background-color: #544D55; color: white; }
nav ul li a {
color: #ABACAF;
text-decoration: none;
}
nav ul li:hover a { color: white; }
nav li ul li {
font-size: 1.3em !important;
text-align: left;
width: 100%;
display: block;
float: left;
}
nav li ul li:nth-of-type(1) {
width: 96%;
padding: 18px 0 20px 4%;
}
nav li ul li:nth-of-type(2) {
width: 96%;
padding: 18px 0 20px 4%;
}
nav li ul li a {
color: black;
font-size: 2em;
border: none;
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
cursor: pointer;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] { display: none; }
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu { display: block; }
<nav>
<label for="show-menu" class="show-menu"><img src="hamburger-red.png" alt="Hamburger Icon" style="position: relative; top: .25em;"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li>Store
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul></li>
<li>Contact</li>
</ul>
</nav>
To clarify, all I changed was moved the closing </li> tag to wrap around the dropdown ul.
<li>Store
<ul class="drop-nav">
<li>Horse Health Store</li>
<li>People Store</li>
</ul></li>
use this to your hover div overflow to the outside of the body and change your Store li is over after your hover ul complete
nav {
background-color: #373945;
width: 100%;
height: auto;
margin: 0 auto;
display: block;
position: relative;
float: left;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
nav ul ul {
padding: 0;
position: absolute;
z-index: 9999;
opacity: 0;
visibility: hidden;
}
nav ul li.show:hover>ul {
display: block;
visibility: visible;
opacity: 1;
width: 100%;
max-width: 200px;
top: 32px;
}
nav ul li {
background-color: #373945;
width: 12.5%;
height: 2em;
border-right: 1px solid #ABACAF;
display: inline-block;
float: left;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
nav ul li:hover {
background-color: #544D55;
color: white;
}
nav ul li a {
color: #ABACAF;
text-decoration: none;
}
nav ul li:hover a {
color: white;
font-size: 16px;
}
nav li ul li {
font-size: 1.3em !important;
text-align: left;
width: 100%;
display: block;
float: left;
padding: 10px;
}
nav li ul li a {
color: black;
font-size: 2em;
border: none;
display: block;
}
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Why Equine</li>
<li>Our Horses</li>
<li>Benefits</li>
<li class="show">Store
<ul class="drop-nav">
<li>Horse Health Store </li>
<li>People Store</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
i'm trying to make a hover animation that has an underline line appearing when the mouse is over it.
what can i add to achieve that? i tried the pre made ones but it didn't work. it showed an line appearing but not under the navbar text but under the website itself (on the bottom of the screen).
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hover-nav {
background-color: tomato;
}
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
Try this code, I marked my edits on your css code.
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
padding: 40px 16px;
display: table-cell;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/*Edit starts here*/
li {
position:relative;
}
li::after {
content: '';
display: block;
width: 0;
position:absolute;
left:50%;
height: 2px;
background: #0077ff;
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover::after {
width: 80%;
left: 10%;
}
li {
transition: cubic-bezier(.77,0,.18,1) 1s;
}
li:hover {
background-color: tomato;
}
/*Edit ends here*/
#logo {
margin-left: 30px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
</nav>
</body>
</html>
You should apply the transition to the element, not its hover state. With transition you are telling telling the element how to behave if anything changes. In this case all styles (that are susceptible to a transition) for a period of 0.3 seconds with an ease-in-out speed curve.
Then use the :hover selector to indicate what changes need to be made. So in this case change the background color and add an underline to the text.
Also avoid using inline styles when possible.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
text-decoration: underline;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
If you intended to apply an underline to the bottom of the box instead of the text you can use border-bottom and makes sure to use box-sizing: border box so your element will remain the same size when the border gets added.
html, body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
height: 100px;
}
li {
text-align: center;
float: right;
}
li a {
display: block;
color: white;
padding: 40px 16px;
text-decoration: none;
font-size: 17px;
letter-spacing: 2.5px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
box-sizing: border-box;
height: 100px;
}
li a:hover {
background-color: tomato;
border-bottom: 1px solid white;
}
<nav>
<ul>
<li>კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
Add text-decoration:underline to your li:hover code like this...
li a:hover {
text-decoration:underline;
}
HTML Code Invalid you added <a> section in <ul> without <li> tag
<ul>
<img src="img/logo.png" alt="" style="width: 139px;" id="logo">
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
changes to
<ul>
<li><img src="img/logo.png" alt="" style="width: 139px;" id="logo"></li>
<li style="float: right;" class="hover-nav">კონტაქტი</li>
<li style="float: right;">ჩვენს შესახებ</li>
<li style="float: right;">ქეისები</li>
</ul>
Edit in CSS:
ul {
width:100%;
display: flex;
align-items: center;
}
li {
width:100%; // remove padding and add to `li a`.
}
li a{
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover { // instead of .hover-nav
background-color: tomato;
border-bottom:4px solid #fff;
}
// remove #logo margin
Working Demo
html,
body {
margin: 0;
padding: 0;
background-color: grey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
background-color: #333;
height: 100px;
display: flex;
align-items: center;
}
li {
width:100%;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
font-size: 17px;
letter-spacing: 1.5px;
border-bottom:4px solid transparent;
height: 100px !important;
display: flex;
align-items: center;
justify-content: center;
}
li a:hover {
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
li a:hover {
background-color: tomato;
border-bottom:4px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mob-Mob</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><img src="https://dummyimage.com/100x100/52d41e/fff&text=Logo" alt="" style="width:100%;" id="logo"></li>
<li class="hover-nav">კონტაქტი</li>
<li>ჩვენს შესახებ</li>
<li>ქეისები</li>
</ul>
</nav>
</body>
</html>
I am having a ton of trouble. I am trying to create a drop down menu from 'about' and have not been able to center the menu correctly. It is always right of the menu. I believe it to have to do with the size of 'about'.
How can I fix this?
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
background: transparent url(../images/nav-divide.png) no-repeat right center;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul>
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
Andrews:
To solve you problem, you need to indicate the position of your nested list because you are setting it up as "position: absolute" without coordinates.
Add a "left value" to your UL CSS class in order to solve this issue:
.nav-top ul {
display: none;
position: absolute;
left: 0;
}
I am a bit new when it comes to web development.
I have created a menu but its buttons width are different depending on the browser (Firefox or Chrome)
In Firefox, we can see that the end of the last button of the menu is aligned with the div below. We can also appreciate that the width of the button is 136.5px
However, in Chrome the fonts are bolder and the menu end is pushed a bit forward. Here, the width of the button is 139.281px
This is the site, the menu is on the top: http://www.metagame.gg/champions/
This is the HTML and the CSS code for the menu
.navigator {
margin: 0;
padding: 0;
display: flex;
padding-left: 39px;
background: #8C9BAA;
}
.navigator li {
display: inline-block;
position: relative;
z-index:100;
}
.navigator li a {
text-decoration: none;
font-size: 15px;
display: block;
line-height: 50px;
padding: 2px 27.75px 0px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.navigator li a:hover, .navigator li:hover > a {
color:#fff;
background: #7AAFD1;
}
.navigator ul {
display: none;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
}
.navigator ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navigator ul li a {
font-size:12px;
font-weight:bold;
display:block;
color:#797979;
border-left: 3px solid #ffffff;
background: #fff;
line-height: 42px;
transition: 0s;
}
.navigator ul li a:hover, .menu ul li:hover > a {
background:#EFEFEF;
border-left:3px solid #83BEE4;
color: #12303D;
}
.navigator li:hover > ul {
display: block;
}
.navigator ul ul {
left: 149px;
top: 0px;
}
#in {
color:#fff;
background: #7AAFD1;
}
.sub-menu {
border:1px solid #ddd;
border-top:0px;
border-left:0px;
box-shadow: 3px 5px 5px -5px #3B3B3B;
}
.navigatorSecond {
margin: 0;
padding: 0;
display: flex;
padding-left: 39px;
background: #d1d1d1 ;
}
.navigatorSecond li {
display: inline-block;
position: relative;
z-index:80;
}
.navigatorSecond li a {
font-weight:600;
text-decoration:none;
font-size: 13px;
display:block;
color:#4a4a4a;
line-height: 40px;
padding: 0px 35.3px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
#ini {
color:#fff;
background: #7AAFD1;
}
.navigatorSecond li a:hover, .navigatorSecond li:hover > a {
color:#fff;
background: #7AAFD1;
}
.navigatorSecond ul {
display: none;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
}
.navigatorSecond ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navigatorSecond ul li a {
font-size:13px;
font-weight:bold;
display:block;
color:#797979;
border-left: 3px solid #ffffff;
background: #fff;
line-height: 42px;
transition: 0s;
}
<div class="menuWrap">
<ul class="navigator">
<li>HOME</li>
<li>CHAMPIONS</li>
<li>SOLO QUEUE <img class="iconMenu" src="/icon/expandir.png" alt=""/>
<ul class="sub-menu">
<li>Tier List</li>
<li>Basics & Tactics</li>
<li>Psychology</li>
<li>Picks & Bans</li>
<li>Division analysis</li>
</ul>
</li>
<li>PRO SCENE <img class="iconMenu" src="/icon/expandir.png" alt=""/>
<ul class="sub-menu">
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</li>
<li>IN-DEPTH ANALYSIS</li>
<li>STATISTICS</li>
</ul>
</div>
I think it is because the font is a bit bolder in Chrome and that causes the button width to be higher.
Thanks in advance
Update: This is because each browser has its own font rendering engine.
I replicated your results with your current sans-serif font. The case also occurred when I changed the font to monospace.
I believe you're better off using a non-system font. For instance, I wanted to see what would happen with a typical Google font such as Open Sans, and I found that the issue did not exist when using it.
By the way, good work on that website. It looks nice. TSM! TSM! TSM!
*{margin:0; padding:0;}
put this line in top of your css file. It helps me for different browser. Just let me know that it helps you or not.
.navigatorSecond li {
display: inline-block;
position: relative;
z-index:80;
}
instead of display inline-block use float left. that will not be different. or use .navigatorsecond{font-size=0;}
The issue I'm having is that when I add a margin to my hover over drop down navmenu it messes up all the content which was meant to drop down and clusters it all up nearly just above it. Although before adding a margin the navigation menu worked perfectly fine, and yes removing the margin fixes the issue but I need to add a margin.
Here is my CSS, let me know if you need the HTML also. (Note, I am doing this on Notepad++ as HTML >4<)
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
margin: -40px;
}
#navmenucontainer {
margin: 15px;
margin-left: 10px;
width: 230px;
height: auto;
float: left;
}
Here is the Relevent HTML:
<div id="navmenucontainer">
<ul id="navmenu">
<li>
Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>
demo - http://jsfiddle.net/victor_007/fajLeLsy/
it looks like you want to do something like this
don't give -margin for a
#navmenu a {
text-decleration: none;
display: block;
width: 124px;
height: 27px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
}
#navmenucontainer {
margin: 15px;
width: 230px;
height: auto;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li:hover ul {
opacity: 1;
visibility: visible;
}
ul li ul {
opacity: 0;
visibility: hidden;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
<div id="navmenucontainer">
<ul id="navmenu">
<li> Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
</div>