I made a menu bar, and custom effect on hover. I wanted the link text to be on top layer. Problem is that when I hover the link in menu, the triangle overlays the text as shown in example, even though I set the z-index of a link to 999.
<div id="menu">
<ul>
<li>yyyyyy</li>
<li>ppppppp</li>
<li>ggggggg</li>
<li>jjjjjjjj</li>
</ul>
Jsfiddle:
https://jsfiddle.net/z5zLL1kn/
#menu{
height:50px;
background-color:#fff8dc;
border-bottom:1px #ff8888;}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
height:50px;
background-color: #fff8dc;
width:450px;
}
li { float: left; }
li a {
font-family: 'Quicksand', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 44px;
display: block;
color: #ff1636;
text-align: center;
border-bottom:1px #ff8888;
text-decoration: none;
height:49px;
position: relative;
padding-left:15px;
padding-right:15px;
z-index:100;
}
li a:hover:after {
content: "";
display: block;
border: 10px solid #fff8dc;
border-bottom-color: #ff8888;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -10px;
margin-bottom:1px;
}
Your problem is that the ::after pseudo element is considered a part of the a element, and so changing the z-index of the anchor, will also apply to the pseudo element.
A quick solution would be to move the arrow pseudo element to the list item instead of the link.
Working jsFiddle
li {
position: relative;
}
li a {
position: relative;
z-index:2;
}
li:hover::after {
position: absolute;
}
Another solution:
As Roko C. Buljan mentioned in the comments, a more straight-forward solution can be to build the arrow pseudo element properly (the second border color needs to be transparent, instead of the background's color:
li a:hover:after {
border: 10px solid transparent;
border-bottom-color: #ff8888;
}
Working jsFiddle
Related
I can't figure it out how to center float:left object vertically.
I imagine that I could set the position of this menu bar vertically (The height of Y-axis) I think that would be the answer
// html part
<div class="menu_simple">
<ul>
<li>One</li>
<li>Two</li>
</ul>
//css
.menu_simple ul {
float:left;
margin: 0;
padding: 0;
width:100px;
list-style-type: none;
box-shadow: 5px 8px 5px #888888;
}
.menu_simple ul li a {
border: 1px solid #0066cc;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #3b3b3b;
display:block;
}
.menu_simple ul li a:visited {
color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
color: white;
background-color: #5FD367;
}
Fiddle example
First you set position: absolute for the menu div, then set top to 50% and the transform option to -50%.
Source: https://css-tricks.com/centering-css-complete-guide/
Hope this helps
Use the CSS position property.
Set the page hold, in your case the <body> to position: relative; and the part you wish to move, in your case; .menu_simple to the following:
.menu_simple {
position: absolute;
top: 50%;
left: 0;
}
Flexbox works nicely for this type of thing:
http://codepen.io/simply-simpy/pen/rVwXyz
menu_simple {
display:flex;
justify-content: flex-start;
align-items: center;
height: 500px;
border: 1px solid red;
}
So I know almost exactly what I need to do, but I don't know how I need to do it.
I have a drop down menu that opens when you hover over it. The child is causing the width of the parent to increase when you hover over it and that is not what I want. I know I need to set the child to position absolutely... but when I do it the child no longer shows up and it appears the hover on the parent no longer functions. Can anyone help figure out where exactly the absolute position part needs to go in? You can see I have something that I commented out.
I'd like the child to be aligned at the bottom right of the "Action" drop down.
I also have a problem where if I set the padding / margin on the parent. It extends to child. I believe I can solve that either with the absolute positioning, or after that is solved.
Here is my HTML:
<br />
<div style="width: 90%; margin:auto; background-color:#CCC; height:36px;">
<div id="actions">
<ul>
<li class="action_arrow_down">Actions
<ul>
<li>Action</li>
<li>Another Action</li>
<li>Something else here</li>
<li class = "separated_action">Separated Link</li>
</ul>
</li>
</ul>
</div>
And my CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#actions {
float: right;
display: block;
background-color: #4d90fe;
color: #FFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#actions ul{
padding: 0px;
margin: 0px;
display: block;
position: relative;
overflow: hidden;
}
#actions li ul {
display: none;
background-color: #ffffff;
border: #CCC 1px solid;
/*position:absolute;
top:100%;
left:0;*/
}
#actions li ul li {
display: block;
background-color: #ffffff;
color: #000000;
overflow: hidden;
}
#actions li ul li:hover, #actions li ul li a:hover {
background-color: #eeeeee;
}
#actions li ul li a {
color: #000000;
}
#actions li{
line-height: 36px;
list-style: none;
font-size: 14px;
text-indent: 15px;
}
#actions li:not(ul li){
background-color: #4d90fe;
}
#actions li:not(ul li):hover {
background-color: #0362fd;
}
#actions li:hover > ul {
display: block;
}
#actions li a {
text-decoration: none;
color: #ffffff;
display:block;
}
#actions li ul li {
display: block;
}
.separated_action {
border-top: #CCC 1px solid;
}
/*.action_arrow_down {
background-image: url('images/action_arrow_down.png');
background-repeat: no-repeat;
background-position: right center;
}*/
The code is probably very convoluted and could use some cleaning up. I'll remove redundant parts once I get the sub menu working how I want.
Here is a jsfiddle.
You already had it. That you "loose" your submenu when you position it absolute, is because you position the parent relatively.
Solution is to remove that line:
#actions ul{
padding: 0px;
margin: 0px;
display: block;
/*position: relative; <-- delete this line */
overflow: hidden;
}
#actions li ul {
display: none;
background-color: #ffffff;
border: #CCC 1px solid;
position:absolute;
margin-left: -80px;
}
Check your updated Fiddle.
Adjust the margin-left to shift the submenu left or right. By default the left side of the parent is the left side of the child. If you'd give the child a fix width, you could use a negative margin-left to align the right sides.
Check your 2nd updated Fiddle.
I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.
My CSS code:
.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
z-index: 2000;
}
.main-menu ul {
width: 50%;
background-color: #333;
display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}
.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Jsfiddle is: http://jsfiddle.net/9BdTK/
Method 1
You can simply move the <a></a> outside of <li>.
E.G:
<li>Home</li>
DEMO HERE
Note: I have only done this for the first two links.
Method 2
A better way to do this is the following:
HTML:
<div id="con">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
CSS:
#con {
width: 100%;
background: #eee;
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 80px;
height: 50px;
outline: 1px solid #000;
}
a {
display: block;
height: 100%;
width: 100%;
}
Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.
Demo of div link - DEMO HERE
Demo with hover - DEMO HERE
Hope this helps.
I have this on my site, but I also managed to do so from this site.
have a look :
Don't put padding in the 'li' item. Instead set the anchor tag to
display:inline-block; and apply padding to it.By Stussa
As said on : Make whole area clickable
Goodluck
http://jsfiddle.net/zcfqu/
Been playing around with this piece of code for a while and am confused a bit.
How do I:
Change the color of the each submenu?
Make the submenu the same width as the main button?
HTML
<ul id="menu">
<li>This is the button
<ul class="submenu">
<li>Button one
</li>
<li>Button two
</li>
<li>Button three
</li>
</ul>
</li>
</ul>
Remove all floats and position:absolute
Check this demo
I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)
Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.
#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }
.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }
EDIT 1
Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O)
EDIT 2
CSS shorthands - MDN
font shorthand - W3C
background shorthand - W3C (scroll to the very bottomo of the page)
Change the color of the each submenu
ul.submenu a:hover {
background-color: red !important;
}
This changes on hover. If you want it always the same color remove :hover
Make the submenu the same width as the main button
ul.submenu, ul.submenu>li {
width: 100%;
}
This way you don't need to apply a fixed width. The browser will calculate it using parents adapted width.
Demo
Here is the correct approach in tackling your issues
DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/
// be more specific when targeting
ul#menu ul.submenu li a:hover {
background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
width: 100%;
}
// assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
background: red;
}
ul#menu .submenu li.btn2 a {
background: yellow;
}
ul#menu .submenu li.btn3 a {
background: blue;
}
Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle
ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;
ul#menu li a for the background
I've set each li as 150px width. This has fixed the issue.
http://jsfiddle.net/andaywells/zcfqu/34/
ul#menu ul.submenu li {width: 150px;}
You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
font-family: Helvetica;
background-color: #57AD68;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
font-size: 12px;
font-style: normal;
font-weight: 400;
height: 40px;
line-height: 39px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: bottom;
border-radius: 3px 3px 3px 3px;
border-style: none none solid;
border-width: 0 0 1px;
cursor: pointer;
display: inline-block;
float: center;
list-style-type: none;
text-decoration: none;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
/* Main Button */
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 0 20px;
background: ; /*Remove the color here to avoid overlapped*/
float:right;
border-radius: 2px 2px 2px 2px;
font-family: Helvetica;
}
ul.submenu a:hover {
background: red;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:right;
background-color:green; /*Adjust the color of sub menu.*/
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: ;
}
ul#menu li:hover li a:hover {
opacity:0.9;
}
After following a couple of tutorials I have managed to build up a CSS-only vertical drop-down menu. However, the widths and absolute offsets are hardcoded and I cannot get them to adjust automatically according to their contents. I wish to avoid hardcoding these because I wish to integrate it into a CMS where I don't know the actual lengths of the menu items.
I have created a JSFiddle here showing the menu working: http://jsfiddle.net/nhfHw/2/
The top level items are currently hardcoded to a width of 100px (I wish to make this adjust according to the longest item at that level.) When I tried to remove that, it just expanded the next sub-level all over the screen.
#navigation
{
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
width: 100px; /* I wish to remove this */
margin-top: 30px;
}
The x offset of the sub-levels is also hard-coded. I wish them to just adjust according to their parent's width. Their width is also hardcoded to 200px.
li:hover .sub-level
{
background: #D0D0D0;
display: block;
position: absolute;
left: 100px; /* I wish to remove this */
top: 0px;
}
li:hover .sub-level .sub-level
{
left: 210px; /* I wish to remove this */
top: 0px;
}
ul.sub-level li
{
border: none;
float:left;
width: 200px; /* I wish to remove this */
}
I wish to avoid Javascript if possible.
A combination of display: inline-block and white-space: nowrap I believe gets you what you're looking for: http://jsfiddle.net/nhfHw/14/
#nav {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
margin-top: 30px;
}
#nav ul li {
padding: 1px 5px;
list-style: none;
white-space: nowrap;
display: block;
position: relative;
}
#nav ul li:hover {
background: #E0E0E0;
}
#nav ul li a {
text-decoration: none;
color: #707070;
display: block;
}
#nav ul ul {
display: none;
border-left: 1px solid #ccc;
position: absolute;
left: 100%;
top: 0px;
}
#nav ul li:hover > ul {
display: block;
}
Here just what the answer above me did, but without bugs...
http://jsfiddle.net/techsin/UBgZf/2/ Updated
*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
display:none;
position:absolute;
left:100%;
margin-top:-30px;
}
.main>li>ul{
background-color:#BDBDBD;
}
ul {
white-space: nowrap;
color:white;
background-color:gray;
float:left;
}
li{
height:20px;
list-style-type:none;
padding:10px;
clear:both;
}
li:hover>ul{
background-color:black;
display:block;
}
Tricks include:
White Space No wrap
float
absolute positioning so it always refer to first element that has been positioned either absolute or relative.