i got this css stylesheet code
#nav li ul {
position: absolute;
visibility: hidden;
float: none;
top: 42px;
left: 0px;
width: 150px;
margin: 0;
padding: 5px 10px 6px 10px;
z-index: 10000;
border: 1px solid #C0ACB2;
border-bottom-width: 2px;
border-bottom-color: #AF9DA3;
border-top: 0;
background-color: #fff;
opacity: 0.97;
}
#nav li:hover ul,
#nav li.iehover ul {
visibility: visible;
}
i want to make every #nav to be hidden and then displayed when cursor hover around it. But the problem is everytime is show, it's overlapped by other div. it's seem z-index is not working to make the #nav li ul becoming the front container.
i'm testing it in firefox and flock.
Can you post up some HTML to go with that? Maybe the mistake is in your markup. Also, try using display:none; and display:block; instead of visibility. uls and lis are by definition block elements, but for hovering, this should work.
Related
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
I am brand new at coding and am working on the final project for my class. It's like web page 101: the very basics in HTML5 and a little CSS. The demos we built for class look like they're from the 90s. Simple is fine, but I really want to challenge myself so I am attempting something more complicated.
TL;DR I have zero skills and my code is probably messy, please bear with me!
I ran into some trouble with the navigation menu I'm making. Maybe one of you can help me out :)
When I mouse over each item in the textured metal bar, blood splatter/paint/ketchup shows up. "CONTENTS" has a drop down menu that changes color when hovering over a list item in it.
But...
1) The text links are gone. I don't know what happened to them, but I do know that they had vanished BEFORE I added the Multiply opacity to the background-color. I think maybe it was after I had the BG color change on hover. I need the links to be solid white.
2) Is there any way to have "CONTENTS" show as red-splattered while I am hovering over the drop down list items? (as opposed to only when I am hovering over "CONTENTS" itself?)
Here is my code, and here is the sprite image
in case you need it.
EDIT: Here is the JSfiddle
http://jsfiddle.net/dkxovdj1/
Thanks so much!
> ul#nav {
margin:0 0 0 0;
padding:0;
list-style:none;
clear: both;
}
ul#nav ul.dd li a {text-decoration: none;
color: white;}
#nav li {
text-indent:-9999px;
display:inline;
float:left;
width: 495px;
position: relative;
}
#nav li a {
background:url(navbar_main2.jpg) no-repeat;
width: 495px;
height: 101px;
display:block;
}
#nav li.nav-1 {width:144px; height:154px;}
#nav li.nav-1 a:hover{background-position:0px -101px;}
#nav li.nav-1 a{background-position:0px 0px;}
#nav li.nav-2 {width:151px; height:154px;}
#nav li.nav-2 a:hover{background-position:-144px -101px;}
#nav li.nav-2 a{background-position:-144px 0px;}
#nav li.nav-3 {width:308px; height:154px;}
#nav li.nav-3 a:hover{background-position:-295px -101px;}
#nav li.nav-3 a{background-position:-295px 0px;}
#nav li ul.dd {
display: none;
position: absolute;
top: 101px;
left: 0px;
width: 100px;
height: 175px;
background-color: #524f4a;
mix-blend-mode: multiply;
line-height: 25px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
opacity: 0.7;
text-align: center;
}
#nav li:hover ul.dd{
display: block;
}
}
#nav li ul.dd li{
text-align: center;
position: relative;
margin: 0 px;
text-indent: 0;
width: 115px;
height: 25px;
}
#nav li ul.dd li a{
top: 7px;
background: none;
display: block;
width: 105px;
height: 25px;
background-color: black;
text-align: center;
border: 1px solid #CCC;
border-radius: 7px;
margin: 2px;
}
#nav ul.dd li:hover a:hover {background-color: #ffde43;}
ul.dd li {position: absolute; right: 24px; top: 8px;}
The issue with the text not showing up is a typo. You have the following in your fiddle:
#nav li:hover ul.dd {
display: block;
} /* <-- should not be here */
}
The hover state can be amended to be #nav li.nav-1:hover a instead of #nav li.nav-1 a:hover. That should get the red to display when hovering over the submenu
Demo: http://jsfiddle.net/w0hq3L06/
Edit:
Per the comment here,
background-color: #524f4a;
mix-blend-mode: multiply;
should be
background-color: rgba(82, 79, 74, 0.7);
background-blend-mode: multiply;
and the opacity on the #nav li ul.dd style should be dropped entirely.
Demo: http://jsfiddle.net/w0hq3L06/2/
I have been trying to design a dropdown menu like following for my wordpress theme using CSS.
I have manged to create the dropdown but I cannot figure out how to create the curve using CSS and make the background color look transparent like in the image above.
To make it look transparent I tried opacity:0.4; filter:alpha(opacity=40); but it doesn't look near the dropdown menu above.
Could you please tell me how to make my dropdown look like the one in the image and make it responsive too?
Thanks
Here's my Code:
You can also check my code live here http://jsfiddle.net/MdpPd/
HTML
<nav>
<ul id="menu">
<li>Homepage</li>
<li>Google
<ul class="sub-menu">
<li>About Us</li>
<li>Programs</li>
</ul>
</li>
</ul>
</nav>
CSS
#menu {
display: block;
float: left;
margin: 0 auto 0;
width: 100%;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: #108BB6;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu a {
display: block;
line-height: 2.4em;
padding: 0 13px;
text-decoration: none;
}
#menu ul li {
display:block;
clear: both;
width: 265px;
}
#menu ul li:hover {
display: inline-block;
}
#menu li:not(:hover) ul {
display: none;
}
#menu ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#menu ul ul ul {
left: 100%;
top: 0;
}
#menu ul ul a {
background: #dedede;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#menu a:link {color:black;}
#menu a:visited {color:black;}
#menu a:focus {color:black; background: #ebdb00;}
#menu a:hover {color:white; background: #0C6481;}
#menu a:active {color:black; background: #ebdb00;}
I created the effect on the submenu using :before and :after.
Take a look at the demo.
It isn't the cleanest solution, but it works.
It needs some adjusting from your side, but I hope this helps you on the way.
For giving curve to the Border you can use the
"border-radius" property in css.
like
border-radius: 5px; you can also use the border-(left,right,top,bottom) variations.
For giving the opacity to items
try giving color as "background-color: rgba(Redvalue, greenvalue, bluevalue, opacity value)".
like
background-color:rgba(0, 255, 0, 0.8)
for the class=submenu use the below code to brig the skew
.submenu
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
the submenu would also use opaicity setting as you had already put ,to brig about the color just use background color you would like as in
.submenu{
opacity:0.4; filter:alpha(opacity=40);
background:blue;
}
to bring about responsive layout simply use common frameworks eg twitter bootstrap,project zurb
For the skew 'the curve' see http://www.w3schools.com/css3/css3_2dtransforms.asp skew function
For the transparency: the example is less transparent (more like 0.9) and a lighter blue. You could try asking the artist/designer as they probably know this
#menu ul {
list-style: none;
margin: 0;
padding-left: 0;
position: absolute;
background: 10aBd6;
opacity: 0.9;
transform: skew(30deg,0deg);
-webkit-transform: skew(30deg,0deg);
-ms-transform: skew(30deg,0deg);
}
should get you going, you'll need to 'unskew' the Text inside
#menu ul li {
display: block;
clear: both;
width: 265px;
transform: skew(-30deg,0deg);
-webkit-transform: skew(-30deg,0deg);
-ms-transform: skew(-30deg,0deg);
}
I'm designing a Homepage like this: https://dl.dropboxusercontent.com/u/178536659/new/Document.htm and I'm currently working on the dropdown menu. My problem is that my dropdown menu is not fully displayed. I tried so many ways such as using "float: left" (what what I'm using now) or using "dislay:inline" for the ul li, it still doesn't work.
try this
in this class #nav li ul z-index give then menu show properly,
#nav li ul {
background-color: black;
display: none;
left: -60px;
margin: 0;
padding: 0;
position: absolute;
width: 257px;
z-index: 1;
}
#nav ul li ul li {
border-bottom: 2px solid #2185C5;
padding: 14px;
width: 89%;
}
Add the following to remove the extra blue border:
#nav ul li ul li {
padding: 14px 25px 14px 14px;
border-bottom: 2px solid #2185C5;
width: 100%;
margin-left: -40px;
}
#aftercolor {
position: absolute;
top: 99px;
height: 8px;
width: 960px;
background-color: #2185C5;
}
also add margin:0 to your body to make your site good looking.
body{
margin: 0;
}
I have the following markup for a CSS dropdown menu:
<ul>
<li><a>FieldOne LevelOne</a></li>
<li><a>FieldTwo LevelOne</a></li>
<li><a>FieldThree LevelOne</a>
<ul>
<li><a>FieldOne LevelTwo</a>
<ul>
<li><a>FieldOne LevelThree</a></li>
<li><a>FieldTwo LevelThree</a></li>
</ul>
</li>
<li><a>FieldTwo LevelTwo</a>
<ul>
<li><a>FieldOne LevelOn</a></li>
</ul>
</li>
</ul>
</ul>
And the following CSS:
ul ul {
display: none;
}
ul li {
list-style: none;
}
ul li:hover > ul {
display: block;
}
ul
{
background: #76b800;
padding: 0 20px;
margin-left: 5px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
min-width: 140px;
text-align: center;
vertical-align: bottom;
}
ul li:hover {
background-color: #4478B7;
}
ul li a
{
display: block;
padding: 10px 40px 10px 40px;
color: #fff;
text-decoration: none;
font-size: 18px;
}
ul ul {
background: #4478B7;
padding: 0;
position: absolute;
top: 100%;
z-index: 5;
margin: 0;
}
ul ul li
{
float: none;
border-top: 1px solid;
border-bottom: 1px solid;
position: relative;
border-style: solid;
border-width: 1px;
border-color: #88AAD2 white #335B8C white;
}
ul ul li:hover
{
background-color: #396599;
background-image: none;
}
ul ul li a {
color: #fff;
min-width: 140px !important;
padding: 10px 40px 10px 40px !important;
font-size: 16px !important;
}
ul ul li a:hover {
background: #233F61;
}
ul ul ul {
position: absolute;
left: 100%;
top:0;
}
The problem: When you go to the second level and you hover over a LI, the third level list appears. If you go from one LI to another in the second level, the third level list nested inside the first LI disappears and the one nested inside the second appears (if it has one).
BUT
If instead you leave the second-level list altogether without making the third-level menu disappear by navigating inside the second-level menu, once you re-list the second-level menu the third-level one that was last showed appears there next to its LI, but without content (no text from As). The lists appear with the style as though as they weren't being hovered.
You can check the effect here: http://jsfiddle.net/JE8ZM/. If you run it on IE9 or Chrome, it works. But if you run it on IE7, try going to FieldOne LevelTwo, hover over it and then leave on its left, without entering the third-level menu that showed up. Then hover over FieldThree LevelOne and see what I mean.
Thanks.
Nested sub nav menus are notoriously difficult to get working cross browser without the aid of Javascript or jQuery. Here is the best 'pure CSS' resource I know of which will solve your problem!
http://www.cssplay.co.uk/menus/final_drop2.html