I have a drop down menu which has the following html structure:
<ul class="menu">
<li>Menu Item 1
<ul class="sub-menu">
<li>Sub Menu Item 1</li>
</ul>
</li>
</ul>
and I have the following css rules:
.menu {float:left}
.menu > li {position:relative; float:left}
.menu > li > a {display:block}
.sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
I'm using javascript to show the drop down menu.
The issue I have is that the sub-menus are appearing below a slideshow which I have close to the navigation. No matter how high or how low I set the z-index of .sub-menu, nothing changes.
Does anyone know what could possibly trigger z-index to not work at all?
Thanks.
EDIT: The issue is with all browsers. Testing in Firefox, Chrome and Internet Explorer
I think I have found the issue. I was using opacity on the div containing the menu. For some reason this caused z-index to not work on the sub-menu. I am not sure why this is. It works fine now that I've removed the opacity rule.
Check the z-index of the elements it is supposed to appear above. make sure they are lower.
Also make sure that the parent element hasn't got the overflow hidden.
Set the Z-index of the parent and then set the Z-index of the child.
.menu > li {position:relative; float:left; z-index :100}
.sub-menu {display:none; z-index:200; position:absolute; top:40px; width:180px;}
Related
I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
I have having problems getting the ul to sit underneth the li on the support button, any help getting this to play nicely would be appreciated.
<li>
Support
<span class="child-menu-arrow"></span>
<ul class="child-menu">
<li>Contact</li>
<li>Other</li>
</ul>
</li>
http://jsfiddle.net/5GpHZ/2/
You can use margins on the child menu to push it in the direction you want. It is absolutely positioned, so it doesn't affect anything else to do this.
http://jsfiddle.net/5GpHZ/5/
#parent-menu>li>ul.support-menu { margin-top: 10px;
margin-left: -10px; }
By putting the adjustment on its own class, it will not affect the other submenus.
Use position:absolute; and then set it where you want it. Notice that I changed your other menu to "child-menu2".
.child-menu{
position:absolute;
top:55px;
right:145px;
}
UPDATED DEMO
I'm building a website based on 960 grid system (www.960.gs),
and I've encountered a problem.
I want to put drop down menu but with no success. I tried many tutorials
but i only got more confused.
Is there a way to create a menu for this kind of website?
this is the website by the way:
My website
Thank you for you help.
The best way to do this by using just CSS is by using absolute positioning on the contents of your drop-down, and have another unordered list inside each li that needs drop-downs.
So the markup looks like this:
<ul id="nav">
<li><a>Nav Item with dropdown</a>
<ul id="dropDown">
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
<li><a>Dropdown Menu Item</a></li>
</ul>
</li>
</ul>
You will then set #nav li (or #nav li a) to position:relative; and have the #nav li ul set to position:absolute; with it's position off the side of the screen using left:-9999px;
Then set the hover of the element you set to position relative (li or li a), while including the child ul:
#nav li:hover ul {
position:absolute;
left:0;
}
This way, on hover, the child element will come into focus underneath the parent menu item.
See it working here.
I am designing a website and it looks good in basically all browsers except IE7, where I have a problem I haven't been able to correct. I have a menu in HTML like this:
<div id="nav">
<ul>
<li id="cMenu"><a id="cart" href="#">Home</a></li>
<li id="pMenu"><a id="promos" href="#">Promos</a></li>
<li id="aMenu"><a id="anun" href="#">Ads</a></li>
</ul>
</div><!-- /nav -->
Then I have my CSS:
div#nav{width:339px;height:120px;display:block;}
div#nav ul{list-style:none;}
div#nav ul li{display:inline;padding:20px;}
div#nav ul li a{width:30px;height:80px;}
div#nav ul li#cMenu{text-indent:-999999px;}
div#nav ul li a#cart{background:url(../img/menu2.png) 0 50px no-repeat;width:110px;height:120px;display:block;}
div#nav ul li a#cart:hover{background:url(../img/menu2.png) 0 -69px no-repeat;}
The thing here is that when I preview this on IE7 nothing gets displayed, I've tired positioning absolutely and also checking if everything is there by using border="dotted" and I get to see the border of only the div#nav, nothing else shows up. (I didn't placed all of the css of the menu since it's basically the same just different id's).
Does anybody knows what's wrong?
Use
display: block;
for your CSS nav declaration. That should fix it :)
div#nav ul li#cMenu{text-indent:-999999px;}
by this its sending all inside li tag to -9999999 text-indent
try putting text-indent to a tag
i hope it work
which is better for use
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu ul li{
float:left;
width:150px;
height:25px;
background:#F00;
}
or
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu li{
float:left;
width:150px;
height:25px;
background:#F00;
}
which tag is right menu ul li or menu li?
When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?
If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments
.menu > ul > li{
// this matches only list items directly inside a ul directly inside a .menu
}
even better would be this:
#menu > ul > li{
// now you are referencing the menu by id, so you know this is a unique assignment
}
or, if you have multiple menus:
#menubar > .menu > ul > li{
}
because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li id="abc">Menu Item abc</li>
</ul>
</li>
<li>Menu Item 4
<div><div><div><ol><li><div><ul>
<li id="xyz">Menu Item xyz</li>
</ul></div></li></ol></div></div></div>
</li>
</ul>
</div>
(you probably don't want to match items abc or xyz).
It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.
It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.
Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)
Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.
This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?
It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.
Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.