I have a dropdown menu which isn't showing in front of the elements below it. I have set the ul and it's container to position: absolute; and position: relative; respectively and applied a z-index of 9999 to the dropdown, however it won't work and the dropdown appears behind the div below it.
Please find the CSS below or both the CSS & HTML in this JSFiddle.
#menu {
overflow: hidden;
padding: 0 0 9px 0;
}
#menu ul {
padding-top: 8px;
}
#menu li {
width: 160px;
float: left;
text-align: center;
position: relative;
}
#menu li:after {
width: 1px;
height: 9px;
background: #9098bf;
position: absolute;
top: 5px;
left: 0;
content: "";
}
#menu li:first-child:after {
display: none;
}
#menu li ul li:after {
display: none;
}
#menu li ul:after {
content: "";
height: 1px;
clear: both;
}
#menu > .container > ul > li > ul {
left: 0;
}
#menu li ul {
position: absolute;
right: -100%;
left: 100%;
z-index: 9999;
background-color: #67b9e8;
}
#menu a {
font-size: 10px;
text-transform: uppercase;
line-height: 12px;
color: #22317f;
font-family: 'FuturaBT-Book';
}
#menu a:hover {
text-decoration: none;
color: #67b9e8;
}
.features {
background: #22317f;
padding-top: 38px;
padding-bottom: 33px;
overflow: hidden;
margin-bottom: 44px;
}
.features .left {
width: 640px;
float: left;
border-right: 1px dotted #fff;
color: #fff;
margin-bottom: -3px;
padding-right: 57px;
text-align: justify;
}
h1 {
font-size: 55px;
line-height: 50px;
margin: 10px 0 29px 0;
text-align: left;
letter-spacing: -3px;
font-family: 'FuturaBT-Book';
color: #193889;
}
ul, li {
list-style: none;
}
Your problem is NOT z-index not working. You have added to your #menu overflow:hidden.
Related
I am trying to create a button when hovered over dispays two dropdown menus with different properties using css.
The problem at the moment is that the dropdown menus' properties do not change when hovered over and it seems as if the button expands instead of just showing two different menus below it. (trying to achieve something similar to demo shown here: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=show-hide-dropdown-on-mouse-hover). Here is the code:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
<button id="nav" class="selected arrow">Communicationsâ–Ľ
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>
Any help please?
This one works, adjusted your css a little, moved the #nav:hover .myClassUl{ rule after the .myClassUl and added a hover rule for the drop down items
#nav {
margin: 0;
text-align: left;
color: #333;
position: relative;
}
#nav ul {
padding: 0;
margin: 2px;
list-style-type: none;
text-align: left;
display: none;
}
#nav ul li{
margin: 0;
padding: 0;
color: black;
line-height: 21px;
position: relative;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 100%;
width: 50px;
}
#nav:hover .myClassUl{
display: block;
}
#letterButton:hover,
#emailButton:hover {
color: #F99;
}
<button id="nav" class="selected arrow">Communicationsâ–Ľ
<ul class="myClassUl">
<li id="emailButton" class="pointerCursor">Email</li>
<li id="letterButton" class="pointerCursor">Letter</li>
</ul>
</button>
you can try this one:
#nav {
margin: 0;
text-align: left;
color: #333;
}
#nav ul {
padding-right: 3.5px;
list-style-type: none;
text-align: left;
display: none;
visibility: hidden;
}
#nav ul li{
margin-left: 0;
padding-left: 0;
color: black;
line-height: 21px;
position: relative;
}
#nav:hover .myClassUl{
visibility: visible;
display: block;
}
.myClassUl {
min-width: 50px;
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
.myClassUl #emailButton:hover
{
background: red;
}
.myClassUl #letterButton:hover
{
background: red;
}
FIDDLE EXAMPLE
When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/
Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/
http://jsfiddle.net/Uqxxh/1/
I have a problem displaying a nav bar with a pic next to it. There is a zoom function in the pic. When mouse over it, an enlarged verion will be displayed.
I have a demo simulating the situation.
I have two requirements:
1. The enlarged tree should be on top of the nav bar.
2. The second level of nav bar shouold be on top of the small tree.
#container
{
width: 700px;
}
#contentLeft
{
width: 220px;
float: left;
z-index: 50;
}
#contentRight
{
width: 450px;
float: right;
z-index: 50;
}
#navBar > li
{
list-style-type: none;
position: relative;
color: #EAC789;
border-bottom: 1px dashed #EAC789;
background: #fff;
width: 200px;
line-height: 24px;
}
#navBar > li a
{
text-decoration: none;
color: #B38C51;
}
#navBar > li ul
{
position: absolute;
left: 200px;
top: 0;
width: 100%;
margin-left: 0;
padding-left: 0;
}
#navBar > li li
{
display: none;
background: #967644;
border-bottom: 1px dashed #fff;
color: #fff;
width: 100%;
line-height: 24px;
}
#navBar > li:hover li
{
display: block;
}
#navBar > li li a
{
color: #fff;
}
#mouseOverDiv
{
position: relative;
}
#mouseOverDiv .enlargePic
{
display: none;
position: absolute;
left: -200px;
top: 0;
}
#mouseOverDiv:hover img
{
border: 1px solid #000;
background: #fff;
}
#mouseOverDiv:hover .enlargePic
{
display: block;
z-index: 9999;
}
Apply z-index to #navBar > li ul should fix the issue
#navBar > li ul
{
position: absolute;
left: 200px;
top: 0;
width: 100%;
margin-left: 0;
padding-left: 0;
z-index:51;
}
FIDDLE
UPDATE
Apply z-index to this class
.rpSlide{
z-index:51;
}
Remove z-index from this class .MainLeft
Remove inline z-index from this main menu div
<div id="ctl00_ctl01_siteMenu" class="RadMenu RadMenu_Yaki" style="z-index: 7000;">
This should fix all of your issues you are having on this page
i am trying to create a drop-down menu with rounded corners and have nearly got there but for a small issue in IE. If you view this link (http://ids-ind.com/koris/dropdown.html) in FF it looks and works fine but in IE the right hand side has a flat top.
Please can you advise what i need to do/change to get it looking like it does in FF?
Below is the CSS i am using
a:link {text-decoration:none;}
/* tabs
*************************/
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0 0 0 1px;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
background:url('../images/menuleft_bg.png') left bottom no-repeat;
line-height:55px;
width:130px;
}
ul.tabs a
{
position: relative;
display: block;
background:url('../images/menuright_bg.jpg') right bottom no-repeat;
}
/* dropdowns
*************************/
ul.dropdown
{
margin: 0;
padding: 0;
display: block;
position: absolute;
z-index: 999;
top: 100%;
width: 130px;
display: none;
left: 0;
}
ul.dropdown ul.dropdown
{
top: 0;
left: 100%;
}
ul.dropdown li
{
margin: 0;
padding: 0;
float: none;
position: relative;
list-style: none;
display: block;
}
ul.dropdown li a
{
display: block;
}
/* menu-specifc
*************************/
#menu
{
position: fixed;
z-index: 5;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
border-bottom: 0px solid #000;
}
#menu ul
{
margin: 0 auto;
}
#menu ul li h4
{
margin: 0;
}
#menu ul li h4 a
{
font-size: 14px;
color: #000;
font-weight: bold;
padding: 0 15px;
}
#menu ul li a
{
color: #fff;
padding-left: 4px;
}
#menu ul li a img
{
vertical-align: middle;
}
#menu ul li a span
{
display: block;
padding: 0 20px;
text-align:center;
}
#menu ul.dropdown
{
padding: 20px 0;
background-image: url('../images/dropdownbg.png');
overflow:hidden;
border-bottom: 0px solid #dc902f;
width: 130px;
z-index:110;
}
#menu ul.dropdown li a
{
border-bottom: 0px solid #e5cd8e;
line-height: 30px;
overflow: hidden;
height: 30px;
background-image: url('../images/dropdownbg2.png');
}
#menu ul.dropdown li.last a
{
border-bottom-width: 0;
}
#menu ul.dropdown li a:hover
{
color:#990000;
}
#menu ul li h4 a:hover
{
background-image: none;
}
remove the position:relative; in below
ul.tabs a{}
Hi Need to center my 1000px width submenu to the page.
I believe my problem lies in:
position: absolute;
top: 23px;
left: 50%;
The website is: http://dev.timson.me (Submenus on "Upcoming" & "Past Productions")
And the CSS is:
#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
padding-top: 8px;
width: 100%;
font-family: Stag;
display:block;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
display:inline-block;
}
.sub-menu {
text-align: center;
}
#menu-default > li {
float: left;
position: relative;
}
.sub-menu > li {
display: inline-block;
}
#access a {
color: #eee;
display: block;
line-height: 25px;
margin-top: -4px;
margin-bottom: -4px;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
display: none;
float: left;
margin-top: 0;
position: absolute;
top: 23px;
left: 50%;
width: 1000px;
z-index: 99999;
margin-left:-500px;
text-align:center;
padding-top:5px;
padding-bottom:10px;
background: red;
}
#access ul ul a {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom:10px;
}
#access ul li:hover > ul {
display: block;
}
Any help is greatly appreciated.
Cheers,
Peter
Try removing position: relative; from your main navigation #menu-default > li and add position: relative; to the main #access ul