This question already has answers here:
My z-index property is not getting set [closed]
(2 answers)
Z-index Won't Work
(3 answers)
Closed 8 years ago.
I have a list that I made is slightly overlapping each element due to the line-height chosen. I would like to have it so that when I hover over each item, the hover animation overlays everything else cover it. I put the z-index on the hover but the hover still stays below some parts.
.sidebar ul {
margin: 0;
list-style-type: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height:20px;
}
a:hover {
color: #424242;
text-decoration: none;
background-color:#424242;
z-index: 100; !important
}
It is tricky, because when you tie the items close to each other you will lose the ability to hover them. Anyway, try this css below. Check this fiddle
Using the property position with fixed or absolute values will stack the items, which I believe is not your intentions to do so. That is why relative is your best friend here
ul {
margin: 0;
list-style-type: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
line-height: 11px;
}
ul a {
z-index: -10;
position: relative;
}
li:hover a {
color: #424242;
text-decoration: none;
background-color: #424242;
z-index: 100 !important;
}
w3schools zIndex property description:
The zIndex property sets or returns the stack order of a positioned element.
Tip: A positioned element is an element with the position property set to: relative, absolute, or fixed.
You will need to set position to either "relative", "absolute" or "fixed" for your a:hover
Related
This question already has answers here:
Border-radius in percentage (%) and pixels (px) or em
(3 answers)
Closed last month.
I want my button to have a shape like it has on stack overflow Products button.enter image description here
I tried border radius but it wasn't big enough. I tried to search for another options but I didn't found any or didn't understand.
This is my CSS
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
border-radius: 40%;
}
li > a {
color: inherit;
text-decoration: none;
}
nav > ul {
display: inline-block;
vertical-align: middle;
padding: 0.2%;
margin: 0.7%;
What I got from the code
You need to add padding and border-radius as shown below and remove border radius which you have given on :hover
nav > ul > li {
border-radius: 50px;
padding: 10px 15px;
}
Recently I have noticed that when you are styling menu item on:hover, some properties like text-shadow, color, background and and many others are applied to the menu item that is currently be hovered over.
However, it seems that the padding property is applied to all the menu items, not just the menu item being hovered over.
Here's an example: http://codepen.io/Bizzet/pen/LEvopq
.main-navigation a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.1em;
transition: 1s;
margin-bottom: -7px;
}
.main-navigation a:hover {
margin-bottom: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
As you can see in Codepen, the text-shadow is applied to a single menu item while the padding is applied to all the elements.
What can I do to prevent this?
I only want one menu item to hover at once.
The padding is not being applied to all menu items. What's happening is that the height of the parent container is being expanded by the hover effect, and since the other menu items are top-aligned, they raise as well.
Try this:
.main-navigation a:hover {
...
margin-bottom: 0;
margin-top: -7px;
}
Demo
Problem
Your ul li a's have a negative margin-bottom initially.
When you hover over an a, though, you reset the margin-bottom to 0. This causes the box to grow in size and push the whole nav-bar upwards.
Insight
The padding is not being applied to all list items. One of the links in your nav boxes is pushing the whole navigation bar up, which gives the appearance of applying the padding to all list items.
Demo
Run this snippet for a demo. The menu-items are black.
header {
min-height: 10em;
background: rgba(0, 0, 0, 0.25);
position: relative;
}
h1 {
text-align: center;
}
.container {
background: green;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
bottom: 0;
}
.container:after {
display: block;
content: '';
clear: both;
}
li {
float: left;
margin-right: 0.5em;
display: inline-block;
background: black;
position: relative;
}
span {
color: red;
margin-bottom: -0.75em;
display: block;
transition: all 3s;
}
span:hover {
margin-bottom: 0;
}
<header>
<h1>Title</h1>
<ul class="container">
<li class="item">
<span>Hello</span>
</li>
<li class="item">
<span>there</span>
</li>
<li class="item">
<span>friend</span>
</li>
</ul>
</header>
Solution
It should be noted that negative margins are usually not encouraged, unless you want element overlap. If it is necessary, it can be better to set a negative margin on 1 parent element than each individual child.
To hack this particular problem together, just replace this:
a:hover { margin: 0; }
with this:
a:hover { transform: translateY(-70%); }
Keep in mind that you might have to add -browser- prefixes to the transform rule. Browser support here
So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .
Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle
Use
.cssmenu {
overflow: hidden;
}
Demo here
Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}
I've got an id #navigation with position: relative; and inside of it a class .submenu with position:absolute;. The sub-menu contains texts (<a> tag links more specifically), which have lost their cursor: pointer; property and ability to be selected on the account of them now being behind other elements on the page.
I'm not sure what I can do, short of declaring #navigation and all it's children at the bottom of the page in order to bring .submenu "to the front".
I've already tried setting z-index: 1; on .submenu, and that didn't work.
Any more suggestions/answers would be greatly appreciated ;)!
Replace #navigation .submenu with this:
#navigation .submenu {
z-index: 1;
background-color: #fff;
position: absolute;
top: 50px;
left: 445px;
padding: 0px 20px;
text-align: center;
border: 1px solid #ddd;
}
Tested and working. Add the z-index and create a background color so that the other elements arent bleeding through—Nick B
I added this code using inline-styling to the div of class submenu
style="z-index: 999"
and it worked
This question already has answers here:
Removing ul indentation with CSS
(3 answers)
Closed 4 years ago.
Do you know why I can't remove the margin from my <li> elements? The browser always adds the specific margin for my list, even when I write the code a specific margin. Here is the CSS and HTML code:
#NavLeftList {
height: 57 % ;
width: 15 % ;
position: absolute;
top: 23 % ;
border-style: none;
background: url(images / heaven.jpg);
margin: 0px
}
#NavLeftList ul {
margin-left: 11 % ;
}
#NavLeftList ul li {
text-align: center;
width: 170px;
list-style-type: none;
text-decoration: none;
margin: 10px 0px 0px 0px;
padding: 1px;
}
#NavLeftList li a {
height: 35px;
padding: 10px 0px 0px 0px;
text-decoration: none;
color: #fff;
background: url(images / tabright.gif);
display: block
}
#NavLeftList li a span {
padding: 0px
}
#NavLeftList li a: hover {
color: #7EC0EE;
}
I haven't pasted the HTML code here since it was appearing strangely.
What you’re seeing isn’t a margin on the lis, it’s padding on the ul.
Zero out the ul’s padding.
try list-style-position:inside; on the li. It's probably leaving space that would be filled by the bullet even though you've set list-style-type:none;
Try setting
body{margin: 0;}
or find the containing element for NavLeftList and set that element's margin to 0 as well.
Try following CSS for UL
ul { list-style: none; }
Try making use of a reset.css file which will reset all "default" (and thus different) implementations of paddings and margins in the different browsers.
Example: CSS Reset