When I hover over one of my menu items, the menu moves to the left. Why is that?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
float: left;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
color: gray;
font-size: 20px;
}
nav li:hover a {
color: black;
font-size: 22px;
}
As i can see you need to increase the size of the menu link when use hover on it but if you increase font-size this will dislocate the position of the link and thats the reason you link was moving to left.
Use css transform:scale(1.1,1.1) property to increase the size without change in position.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
display:block;
}
nav li:hover a {
color: black;
transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
transform property should be use with prefix to let it support in all browsers.
Please remove nav li:hover a { font-size:22px; } so that it does not move left on hover
Replace float with inline-block for <li>. And you are changing font-size on hover which is creating dancing effect on list items. Better keep same font-size for normal and hover states.
nav {
float: right;
border-radius: 15px;
}
nav ul {
list-style-type: none;
margin-top: 55px;
}
nav li {
display: inline-block;
vertical-align: top;
margin-right: 25px;
position: relative;
}
nav a {
text-decoration: none;
font-size: 20px;
color: gray;
}
nav li:hover a {
color: black;
}
<nav>
<ul>
<li>Home</li>
<li>Geschiedenis</li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
Try playing with flex in css3 to see if that works for growing the text. Also there is an HTML menu tag you may want to have a look at.
Related
My menu items are dropping down when I want to hide them off screen with CSS transitions.
I have attempted using display: none on the list items and leaving the menu text, and then on my hover trying to unset to call it back however the items wouldn't return.
CSS
nav {
padding: 2px;
border-radius: 7px;
background-color: #800020;
transition: margin-left 1s;
margin-left: 90%;
}
nav:hover {
margin-left: 275px;
}
nav > ul li {
color: beige;
display: inline;
list-style-type: none;
}
#menu {
color: black;
padding-right: 25px;
}
HTML
<nav>
<ul>
<li id="menu"><b>MENU</b></li>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</nav>
My goal is to just have the menu text showing and when it's hovered on have it extend out.
You can use white-space:nowrap on the ul to stop the li elements from wrapping.
nav {
padding: 2px;
border-radius: 7px;
background-color: #800020;
transition: margin-left 1s;
margin-left: 90%;
}
nav:hover {
margin-left: 275px;
}
nav > ul {
white-space:nowrap;
}
nav > ul li {
color: beige;
display: inline;
list-style-type: none;
}
#menu {
color: black;
padding-right: 25px;
}
<nav>
<ul>
<li id="menu"><b>MENU</b></li>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</nav>
Hey guys I've been having a weird css quirk happen and I can't seem to find the culprit. I have some li links displayed on top of a image based background and when I hover the links they change colors but all apply a white border around the type which looks horrible.
I added a normalize.css stylesheet to my project hoping it would kill any standard style applying it but that didn't seem to work. Does anyone have any idea why this is happening?
Here is my styles for my navigation
Nav CSS
nav {
width: 100%;
position: fixed;
top: 20;
z-index: 2;
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
Nav HTML
<nav>
<ul>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="menu">Menu</a></li>
<li><a ui-sref="delivery">Delivery Locations</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</nav>
After investigating, I found that the problem was simply... you had duplicate navbar!
Since the navbar has a fixed position, both of them would be at the same exact place. So when you hover a link in the front navbar, it becomes black.. BUT the same link at the back remains white, thus, creating a weird stroke.
Here is a demo that reproduces your problem:
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<!-- stroke you say? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
<!-- who's behind me? -->
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
Solution: just remove the duplicated navbar... simple mistake.
body { background:#111; }
nav {
width: 100%;
position: fixed;
z-index: 2;
top: 20px; /* was missing a unit (px) */
}
nav ul {
float: right;
margin-right: 1em;
list-style: none;
}
nav li {
display: inline-block;
padding: 0 20px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
nav a:hover {
color: black;
}
<nav>
<ul>
<li><a>About</a></li>
<li><a>Menu</a></li>
<li><a>Delivery Locations</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
jsFiddle: https://jsfiddle.net/azizn/bf28e5g9/
Notice how the <app-navbar> appears twice in your code:
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.
I have a drop down menu list made in css and plain HTMl. It works fine but it rolls under my image slider , and I can see on a part of the menu when i hover on any of my menu. I think z-index property is missing somewhere. But I used in my ul li tag but no use.
html
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
css
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
image slider has z-index property from java-script. so it will take high priority.
You need to give z-index to your navigation also.
Is your image slider having jQuery?
Than you have to put z-index in li ul li{z-index:999px;}.
If you add z-index to the following class.
li:hover ul {
display: block;
position: absolute;
z-index:1000;
}
Also make sure that the z-index for the menu is having higher property.