I have a CSS driven simple drop down menu that can appear in double rows on narrower screens.
When I activate the dropdown of one of the top row items the drop down appears at the same "Z" level as the bottom row.
I thought I've set the z-indexes as required but it isn't working in Chrome, Firefox, Safari or iPhone.
Here is a sample: http://jsfiddle.net/bNBp3/ - "Meat" has a dropdown attached.
<ul id="main-navigation">
<li><span>Home</span>
</li>
<li><span>Meat</span>
<ul>
<li><span>Bacon</span></li>
<li><span>Ham</span></li>
<li><span>Pork</span></li>
</ul>
</li>
<li><span>Vegetables</span>
</li>
<li><span>About Us</span>
</li>
<li><span>Contact Us</span>
</li>
<li><span>A-Z</span>
</li>
</ul>
ul#main-navigation {
display:block;
border-bottom:1px solid #ccc;
margin:0 auto 0px auto;
min-height:21px;
padding:0;
width:100%;
z-index:11;
clear:both;
}
ul#main-navigation li {
display:block;
float:left;
list-style:none;
margin:0 5px 0 0;
padding:0;
position:relative;
z-index:12;
min-height:22px;
min-width:30%;
}
ul#main-navigation li a {
color:#000;
display:block;
padding:2px;
text-decoration:none;
z-index:13;
}
ul#main-navigation li a.current, ul#main-navigation li a.section {
color:#fff;
}
ul#main-navigation li ul {
background:#eee;
position:absolute;
left:-1px;
top:21px;
display:none;
overflow:hidden;
padding:0px;
z-index:14;
width:100%;
border:1px solid #ccc;
}
ul#main-navigation li ul li {
display:block;
float:none;
margin:0;
z-index:15;
width:100%;
border-bottom:1px solid #ccc;
}
ul#main-navigation li ul li a {
background:#eee;
display:block;
color:#333;
z-index:16;
zoom:100%;
}
ul#main-navigation li ul li a:hover {
background:#fff;
}
ul#main-navigation li:hover {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
ul#main-navigation li:hover a.current {
background:#eee; color:#000;
}
ul#main-navigation li:hover ul {
display:block;
}
Just get rid of all the z-index values and it works fine:
http://jsfiddle.net/bNBp3/12/
Tested in Chrome and Firefox6.
Edit: It seems I forgot to remove the z-index from ul#main-navigation li ul in the demo and that's what makes it work, so just set it to any value 1 or higher.
Related
I'm trying to create a horizontal menu with the width of the parent div and where the links are arranged in equal distances. Target is to create a navigation bar with a width of 900px. Maybe it is possible to realize it on another way? I'm a newbie in css and don't know how to fix my problem and hope you could help me!
#nav {
background:red;
width:900px;
}
ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}
ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}
ul#nav-bar li:hover>*{
display:block;
}
ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#nav-bar li:hover{
z-index:1;
}
ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}
* html ul#nav-bar li a{
display:inline-block;
}
ul#nav-bar>li{
margin:0;
}
ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}
ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}
ul#nav-bar ul li{
float:none;
margin:0 0 0;
}
ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}
ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}
ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
<div id="nav">
<ul id="nav-bar">
<li>Link1</li>
<li><span>Link2</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link3</li>
<li><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link5</li>
<li>Link6</li>
<li>longxxxxxxxxxxxxxlink</li>
</ul>
</div>
Thanks!
To get the #nav-bar to match the parent, simply add width:100% to your existing ul#nav-bar tag in css. This tells your child to fill up the parent, regardless of child's content.
As for spreading out the links, it has been my experience that the best way to do this is to add margins to the text once the navbar is complete. For your coded example, I would add the following to even them out:
ul#nav-bar->li{
margin:0px 20px 0px 20px;
text-align:center;
}
You can view it here and here is the css code
/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
#nav {
background:#999;
width:900px;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
position: relative;
text-align: center;
padding: 10px 0px;
}
#nav a{
text-decoration: none;
display: block;
color: #f0f0f0;
}
#nav-bar > li{
float: left;
}
#nav-bar ul{
position: absolute;
left: 0;
width: 100%;
top: 100%;
background: #999;
display: none;
}
#nav-bar li:hover{
background: #666;
}
#nav-bar li:hover ul{
display: block;
}
As if you want width to be adjusted to text width in li elements so you need javascript
and here is the code i have updated the jsfiddle
$(document).ready(function(){
total_nav_width = $('#nav').width();
main_link = $('#nav-bar > li > a')
textWidths = [];
totalTextWidth = 0;
main_link.each(function(){
textWidths.push($(this).width())
})
for (var i = 0; i < textWidths.length; i++) {
totalTextWidth += textWidths[i];
}
additionValues = (total_nav_width - totalTextWidth)/main_link.length;
main_link).each(function(){
intialWidth = $(this).width()
$(this).width( intialWidth + additionValues )
})
})
i have a problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?
The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/
I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg
Here is my css:
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(img/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 0px 0px 132px;
display: inline-block;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 0px;
text-align:left;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:180px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
Here is my html code:
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li><a href='promotions.php'><span>Promotions</span></a></li>
<li><a href='outlets.php'><span>Outlets</span></a></li>
<li><a href='feedback.php'><span>Feedback</span></a></li>
<li class='has-sub '><a href='#'><span>Career</span></a>
<ul>
<li><a href='stall.php'><span>Stall Leasing</span></a></li>
<li><a href='career.php'><span>Career Opportunity</span></a></li>
</ul>
</li>
<li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>
</div>
use this decrease your padding of li and line-height also
#cssmenu li{
float:left;
padding:30px;
display: inline-block;
}
Try removing the padding from .border class, row 311 in you blue round.css file
I am using ul li menu drop down for my site.. it displayed in ifrefox and chrome correctly. but in IE its not displayed...
my code like..,
<style type="text/css"> .nav { width:1000px; } .nav ul { }
.nav ul li { list-style: none;}
ul.dropdown { position:relative; width:auto; font:12px Arial, Helvetica, sans-serif; }
ul.dropdown li { float:left; zoom:1; height:30px; padding:6px 2px 0 2px; border-right:1px solid #bacfe4; }
ul.dropdown li li { border-right:1px solid #ccc; border-left:1px solid #ccc; margin-left:9px;}
ul.dropdown a:hover { color:#000; } ul.dropdown a:active { color:#ffa500; }
ul.dropdown li a { display:block; padding:4px 8px; color:#000; text-decoration:none; font:bold 12px Arial, Helvetica, sans-serif; }
ul.dropdown li:last-child a { border-right:none;}
ul.dropdown li:hover { color:#000; position:relative; }
ul.dropdown li.hover a { color:#000; }
ul.dropdown ul { text-align:left; visibility: hidden; position: absolute; left:-10px; top:36px; }
ul.dropdown ul li { border-bottom:1px solid #ccc; float:none; width:120px; height:25px; }
ul.dropdown ul li a { border-right:none; width:100%; display:inline-block; color:#000; }
ul.dropdown ul ul { left:100%; top:0; }
ul.dropdown li:hover > ul { visibility:visible; }
</style>
<script type="text/javascript">
</script>
<div class="nav">
<ul class='dropdown'>
<li><a href=''>one</a></li>
<li><a href=''>two</a></li>
<li> <a href=''> three </a>
<ul class='sub_menu'>
<li><a href=''>one3</a></li>
<li><a href=''>two3</a></li>
</ul>
</li>
</ul>
</div>
I included the jquery.js file two times in my actual page.
Thats why it was not displaying.
what have I done wrong that in IE the menu doesnt work as in other browsers it does work.
In IE the menu buttons are vertical instead of horizontal.
Link to a test subdomain : http://test.beterlopenwinkel.nl/leiderdorp.php
And I cant get rid of that list style in IE neither.
CSS:
#navigation{
width:200px;
background-image: -moz-linear-gradient(left, orange, #f3980b); /* FF3.6 */
background-color:orange;
border-radius:8px;
font-size:16px;
font-weight:bold;
text-align:center;
width:1000px;
height:30px;
}
#navigation ul{
margin:0px;
padding:0px;
}
#navigation ul li{
display:inline;
list-style-type:none ;
padding:5px 10px 5px 10px; //dropmenupadding
margin-left:15px;
position:relative;
}
#navigation li a{
color:#fff;
text-decoration:none;
padding:5px 10px 5px 10px;
display:inline;
}
#navigation li a:hover{
text-decoration:none;
//background-color:orange;
//border-radius:15px;
//border:solid 2px #333;
color:#333;
}
#navigation li ul{ //dropmenu
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:orange;
border-radius:15px;
box-shadow:0px 0px 5px #000;
}
#navigation li:hover ul{
display:block;
width:160px;
}
#navigation li li{
list-style:none;
display:list-item;
}
#navigation li li a{
color:#fff;
text-decoration:none;
padding:10px;
}
#navigation li li a:hover{
text-decoration:none;
}
For starters, you might want to make sure your HTML is valid. Check the W3 Validator here:
http://validator.w3.org/check?uri=http%3A%2F%2Ftest.beterlopenwinkel.nl%2Fleiderdorp.php&charset=%28detect+automatically%29&doctype=Inline&group=0
Invalid markup is the #1 reason why CSS behaves in unexpected manners in different browsers (not just IE)
First, you need to fix the HTML:
<ul>
<li>Solidus</li>
<li>Finn Comfort</li>
<li>Think!</li>
<li>Footnotes</li>
<li>MBT</li>
<li>Vabeene</li>
<li>Meindl</li>
<li>Stadler</li>
<li>Fit Flop</li>
<li>Durea</li>
<li>Van Lier</li>
<li>Schneider</li>
</li> **THE LI SHOULD BE CLOSED AFTER THE UL, LIKE YOU DID FOR OTHER SUBMENUs**
</ul>
uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.