Why z-index isn't working in this menu? - css

I'm using position:relative; for parent ul and position:absolute; for child ul(.submenu) but still z-index isn't working for me. What's wrong with my css?
I want .submenu to hide behind main menu(.mynav).
HTML
<div class="mynav">
<ul>
<li><span>About</span></li>
<li><span>Contact</span></li>
<li>
<span>Home</span>
<ul class="submenu">
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
<li><span>Menu Item</span></li>
</ul>
</li>
<li><span>Social</span></li>
<li><span>Promote</span></li>
</ul>
</div>
<div class="content">
Lorem ipsum
</div>
CSS:
.mynav{
background: #202020;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
width: 100%;
text-align:center;
z-index:9999;
}
a{
text-decoration:none;
color: #f91d65;
color: #fff;
padding: 15px 30px;
display:block;
}
.mynav ul{
z-index:999;
}
.mynav ul li{
border-left: 1px solid rgba(255, 255, 255, 0.50);
display: inline-block;
margin-right: -4px;
position: relative;
}
.mynav ul li a span{
display: block;
}
.mynav .submenu{
position: absolute;
white-space: nowrap;
left:0;
top:50%;
z-index:99;
}
.mynav .submenu > li{
display: inline-block;
background: #999;
}
.mynav .submenu > li a span{
display: block;
}
Demo:
http://codepen.io/sonu/pen/gbpmbj

You can make the submenu appear under the main one by adding the following code:
.mynav .submenu{
z-index:-1;
}

If you add this:
.mynav ul li a {
position: relative;
z-index:999;
background: black;
}
And a lower z-index on .mynav .submenu > li a

Related

How to create drop menu from every li?

I have a problem with dropmenu. I created dropmenu from li:YOU and I want to create dropmenu from li: VIEW and HELP, but every dropmenu is below YOU. I don't know what I should to do that every dropmenu was below YOU, VIEW and HELP. I tried many ways but everything failed. And I have ask, I want to pubblish my question but show information that I have to add more detail.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
nav{
height:100px;
display:flex;
font-size:15px;
align-items:center;
justify-content:center;
text-transform:uppercase;
background-color:blue;
width:100%;
position:relative;
}
nav ul{
display:flex;
}
nav ul li{
list-style:none;
}
nav ul li a{
text-decoration:none;
color:black;
position:relative;
letter-spacing:2px;
padding:20px 20px;
margin:20px 0;
font-weight:bold;
background-color:green;
}
.dropOut .triangle{
width:0;
height:0;
position:absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid red;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain{
width:160px;
position:absolute;
margin-top:20px;
left:50%;
margin-left: -80px;
}
.dropOut{
width:160px;
background-color:yellow;
position:relative;
opacity:0;
}
.dropOut ul {
text-align:center;
padding: 10px 0;
display:block;
}
.dropOut ul li {
text-align: center;
width:160px;
padding: 12px 0 10px 0;
margin: 0px ;
color: red;
}
.dropOut ul li:hover {
background: #0D74FB;
}
nav ul li a:hover{
color:white;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
<nav>
<ul>
<li>View</li>
<li>You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Gallery</li>
<li>Contact</li>
<li>f1</li>
</ul>
</div>
</div>
</li>
<li>Help <div class="dropdownContain1">
<div class="dropOut">
<div class="tringle"></div>
<ul>
<li>Plan</li>
<li>Service</li>
<li>Contact</li>
<li>gallery</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>

My Drop Down Menu goes sideways in ie

I have a drop menu that works fine in Firefox and Chrome but not in ie. The sub menu appears underneath the main menu, but it displays sideways. How do I fix it?
The site url www.umvaonline.org
code for menu
<li class='top'><a href='blog/'>News/Blog</a>
<ul class='item'>
<li><a href='/blog/category/news/exhibition-listings/'>Exhibition Listings</a></li>
<li><a href='/blog/category/news/opportunities/'>Opportunities for Artists</a></li>
<li><a href='/blog/category/news/workshops-classes/'>Workshops & Classes</a></li>
</ul>
</li>
<li class='top'><a href='index.php?page=journal'>Quarterly Journal</a>
<ul class='item'>
<li><a href='index.php?page=submission'>Submission Guidelines</a></li>
<li><a href='/blog/category/archived-journals/'>Archived Journals</a></li>
</ul>
</li>
css
div.topnav { height:40px;margin-left:30px;margin-bottom:20px;}
div.topnav ul {z-index:10000;padding: 0 1px;
list-style: none;
position: relative;
top:0;
display: inline-table;}
div.topnav ul:after {
content: ""; clear: both; display: block;
}
div.topnav ul li {
height: 100%;
float: left;
font-family: arial, verdana, helvetica;
font-size: 95%;}
div.topnav a {
float: left;
height: 40px;
line-height: 40px;
text-align:center;
background-image: url('umva_images/umva_button.png');
padding-left:12px;
padding-right:12px;
background-repeat: repeat-x;
color: silver;
font-weight:bold;
text-shadow: 1px 1px black;
transition:color .25s ease;
text-transform:uppercase;
text-decoration:none
}
div.topnav ul.item{display:none}
div.topnav li.top:hover ul.item {display:block}
div.topnav a.left {border-top-left-radius:5px;border-bottom-left-radius:5px}
div.topnav a.right {border-top-right-radius:5px;border-bottom-right-radius:5px}
div.topnav a:hover { background-image: url('umva_images/umva_button_hover.png');color:white}
div.topnav a.current { background-image: url('umva_images/umva_button_hover.png');color:white}
div.topnav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
box-shadow:2px 2px 5px black
}
div.topnav ul ul li {
float: none;
position: relative;
}
div.topnav ul ul li a {
background: #5f6975;
color: #fff;
font-size:90%;
width:auto;
height:25px;
line-height:25px;
text-align:left;
}
div.topnav ul ul li a:hover {
background: #5f6975;
text-decoration:underline;
}
div.topnav ul ul li a {
}
div.topnav ul li.left {border-top-left-radius:5px; border-bottom-left-radius:5px}
div.topnav ul li.right {border-top-right-radius:5px; border-bottom-right-radius:5px}
You have to check out if this is working for you - add float:none; to div.topnav ul ul li a.
Just tested in IE10 and Firefox and works for me. Though there is no float set for this element, it inherits float: left from div.topnav a.

Different alignment of Top menu and submenu

Hi I am trying to keep my top navigation menu centered while left aligning the submenus that come out. What do i have to change in order to accomplish this? THanks!
<div id="container">
<ul id="nav">
<li>Home</li>
<li>Services <img src="images/tri2.gif">
<ul>
<li>Massages</li>
<li>Body Treatments</li>
<li>Facials & Waxing</li>
<li>Hair & Nails</li>
</ul>
</li>
<li>Packages <img src="images/tri2.gif">
<ul>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
<li>Linky</li>
</ul>
</li>
<li>Specials</li>
<li>Contacts</li>
</ul>
</div>
Here is the CSS:
#container {
width: 740px;
margin: -16px auto;
padding: 0 0 0 0px;
font: 100% Helvetica, Arial sans-serif;
font-size:14px;
}
ul#nav {
line-height: 23px;
padding: 0;
}
ul#nav li {
float: left;
position: relative;
list-style: none;
background: #006666;
}
ul#nav li a {
width: 146px;
display: block;
border: 1px solid #000;
text-align: center;
text-decoration: none;
color: #fff;
}
ul#nav li:hover {background: #990000;}
ul#nav ul {
position: absolute;
padding: 0;
left: 0;
top: 23px;
visibility: hidden;
}
ul#nav li:hover ul {visibility: visible;}
ul#nav a:hover {color: yellow;}
http://jsfiddle.net/chuckie365/5LuCA/
what you need here is an additional CSS targeting that a elements:
ul#nav ul li a {
text-align:left;
}
Heres is the demo http://jsfiddle.net/5LuCA/10/

Make single item in menu exceed it's parent's height

I'm required to do design in which there is top page divided into 3 sections. First is header, under the header is border and under this border is menu. Problem is that part of border above highlighted menu should change color.
Now, i spent whole day on this little thing and I don't have any more ideas how can I make this work. I know I can make it work if I put there background image which have all these layers in it, but I don't think this is best way. This example is of course much simpler then real design. Do you have better ideas?
To be clear, here are images of how menu looks now when hovered and how it should look like:
HTML:
<div class="header"></div>
<div class="head_menu">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
CSS:
.header {
background-color: #AC3123;
height: 70px;
}
.head_menu {
background-color: #972B1E;
border-bottom: 7px solid #E8E8E8;
position: relative;
height: 55px;
}
.menu {
position: absolute;
width: 100%;
bottom: 0;
background: #4d5057
}
.menu ul {
overflow: hidden;
max-width: 300px;
margin: auto;
padding: 0;
}
.menu ul li {
float: left;
list-style: none;
}
.menu ul li a {
display: block;
padding: 15px 12px 14px 12px;
color: #fff;
}
.menu ul li a:hover {
color: #000;
background: #e8e8e8;
}
There are a lot of things you can do to resolve this issue.
One simple thing would be to not use border's for your dark-red strip. Instead, you could use a pseudo-element, and layer it underneath your li's using a correct z-index. Here's a jsFiddle: http://jsfiddle.net/rgthree/4BWNB/
HTML:
<div class="header"></div>
<div class="head_menu">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</div>
CSS:
.header {
background-color: #AC3123;
height: 70px;
}
.menu ul {
position:relative;
background: #4d5057;
border-bottom: 7px solid #E8E8E8;
text-align:center;
list-style: none;
padding:0px;
margin:0px;
}
.menu ul:before {
content:''; display:block; font-size:0px;
position:absolute; left:0px; top:0px; right:0px; height:7px; z-index:1;
background:#972B1E;
}
.menu ul li {
position:relative; z-index:2;
display:inline-block;
padding:0px;
margin:0x;
}
.menu ul li a {
display: block;
padding: 22px 12px 14px 12px;
color: #fff;
}
.menu ul li a:hover {
color: #000;
background: #e8e8e8;
}
I doubt this is the right way, but i got it to work using only css
I added a span into your list items
<ul>
<li><span></span>Menu 1
</li>
<li><span></span>Menu 2
</li>
<li><span></span>Menu 3
</li>
</ul>
and added this css
.menu ul li:hover span {
color: #000;
background: #e8e8e8;
}
.menu ul li span:hover {
background: #972B1E;
}
.menu li span {
position: absolute;
top: -8px;
height: 8px;
width: 73px;
}
http://jsfiddle.net/JR3xR/2/

The nth-child pseudo-class fails to select every 5th element

I'm trying to use the pseudo class ( img:nth-child) in this project but I can't make it work (it's the last line in the css-part). Right now I'm just using the a simple function just to see how it works. The plan is to implement this pseudo class to add a right-border every 5th item. You can see the working code here: jsFiddle
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class"main">
<ul class="nav">
<li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png" />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
<ul >
<li class="borders"><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></li>
<li> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane </p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane cabriolet</p></li>
<li> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></li>
</ul>
</li>
<li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
<li><a class="mainNav" id="security" href="#"><p>security </p></a>
</li>
<li><a class="mainNav" id="services" href="#"><p>service</p></a>
</li>
<li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
</li>
<li><a class="mainNav" id="more" href="#"><p>more<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
</li>
</ul> <!-- ends #nav -->
</div> <!-- ends main -->
</body>
</html>
-------------------------------------
body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* =============================================================================
main
========================================================================== */
.main img{ margin: 0;}
.main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
.nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC; }
.nav li a, .nav li{ float: left;}
.nav li{ position:relative; list-style: none;}
.nav li p{ margin-top: 12px; }
.nav li a{ text-decoration: none; background: #2a2a2a; color: #FFF; }
/*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black; }*/
/*=====================================================================*/
.main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase; line-height:25px; overflow:hidden; float: left;}
.nav #car_1{ width: 190px; margin-left: 0px; }
.nav #car_2{ width: 190px; }
.nav #car_3{ width: 106px; color: #1f8b95; }
.nav #security{ width: 147px; }
.nav #services{ width: 69px; }
.nav #aboutRenault{ width: 100px; }
.nav #more{ width: 92px; border-right: none; background:#f7b100; }
.nav li .arrowMargin { margin-left: 5px;}
/*main menu images/cars*/
.nav li p .mainMenuImg{ margin-right: 12px; }
/*centering text on images*/
.main .nav .centerText p{ position: absolute; top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}
/*main a-tags*/
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
a.mainNav:hover {color:#000; background:#fff;}
a #more:hover{color:#000; background:#f7b100;}
/*==================UNDER LEVELS======================================*/
.nav li ul{ display: none;/** switch: on/off to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
.nav li:hover ul{ display: block;}
.main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }
.nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important; } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */
/*==================styling images (li-elements)===========================*/
Right now, your selector is selecting the fifth img inside the .nav li ul li .centerText element. There is only one image in each, so this won't select anything at all. You need to change it to .nav li ul li:nth-child(5n+1) .centerText img. This will select every fifth li in that nav menu, and then add your border to the image within it.

Resources