I am trying to put an image behind my header and menu. I set all of the layers above the background image div including all of the menu elements to position:relative;z-index:10; and the div with the background image to position:relative;z-index:0;
you can see my code here: http://wheresuccessblooms.com/wordpress/
I know it has something to do with the menu because when I delete the call to the menu the background image goes to where it should. Not sure what else I need to set the position and z-index to? PULLING MY HAIR OUT. lol Please help.
HTML:
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
HOME
</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
ABOUT
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
Contact Us
</li>
</ul>
</div>
<div id="top_slider">
<div id="slider">
<div id="slider_wrap">
</div>
</div>
</div>
CSS: JUST THE MENU AND SLIDER CSS
nav{position:relative;z-index:5;}
div.menu-main-menu-container{position:relative;z-index:5;}
ul#menu-main-menu{position:relative;z-index:5;}
li.menu-item{position:relative;z-index:5;}
#page_nav {width:100%; height:53px;background-color:#f27479;position:relative;z-index:10;}
#page_nav ul { float: left; display: block;position:relative;z-index:5;}
#page_nav ul li { float: left; list-style-type: none; margin-top:20px;border-right:1px solid #ca6064;position:relative;z-index:5;}
#page_nav ul li a { color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: 700; text-shadow: 0px 1px 0px rgba(0,0,0,.5); padding-left: 20px;position:relative;z-index:5; }
#page_nav ul li a:hover { color: #a2a2a2; position:relative;z-index:5;}
#page_nav ul li.current a,
#page_nav ul li.current a:hover { color: #ba4040; position:relative;z-index:5;}
#top_slider{overflow:hidden;position:relative;z-index:0;left:0px;height:963px;top:-250px; margin:0px auto;
background:url('http://wheresuccessblooms.com/wordpress/wp-content/themes/WhereSuccessBlooms/images/slide_1.jpg') no-repeat top center;}
Your z-index looks like it's working fine to me. There does seem to be a positioning issue though. Set the top_slider div to position:absolute with width:100%. Or you can set position:fixed if you want it to stay put (also needs a width).
Put this line after your </nav> tag
<div style="clear:both"></div>
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
I want to create an effect, which is as follows: If I hover on my dropdown menu, the hovered link is colored blue. Nice of course, but if I hover any list item in the dropdown menu, the blue link is going back to gray. How can I make the link stay blue, even if something else is hovered?
The link that has to be blue, is gray if I don't hover it or something else. That is fine. If I hover it, it is blue. That is fine too, but if I go to a list item in the menu (so the gray link is the link to a dropdown menu), the link is going back to gray and not staying blue, when it was that color if hovered...
Code:
<div id="main-menu-wrap">
<ul id="menu-headmenu" class="menu-headmenu-container">
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blabla">
About us
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blablbala">
Team
<span class="sub">blablabla</span>
</a>
</li>
<li id="menu-item-145" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<a href="blablabla">
haha
<span class="sub">hahaa</span>
</a>
</li>
</ul>
</li>
<li id="menu-item-407" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor">
CSS:
#menu-headmenu li a:hover {
background: none repeat scroll 0 0 #80806E;
color: white;
}
#menu-headmenu li li a:hover {
background: none repeat scroll 0 0 transparent;
}
#menu-headmenu li:hover .sub-menu {
display: block;
}
#menu-headmenu .sub-menu li {
background: none repeat scroll 0 0 white;
float: none;
font-size: 14px;
margin-bottom: 1px;
padding: 10px;
text-transform: uppercase;
width: 200px;
}
What you want to do can't be done without JavaScript, as there simply is no such thing as an element:hoveredinpast pseudoselector. A quick jQuery example would be something like:
$('#menu-headmenu .sub-menu li').hover({
$(this).addClass('PermaBlue');
});
So long as you have a CSS class called PermaBlue with something like color: blue set, this will do what you want.
Try this one:
`#menu-headmenu .sub-menu li { list-style:none;}` add list-style in this id.
`#menu-headmenu .sub-menu a:hover { color: #E5E5E6 !important;}`
Include this code into your css
When trying to add an box with content inside it on a menu on a hover "drop down menu", it does something like this:
(source: gyazo.com)
I want the drop down to popup when I hover on the categories menu item.
This is the code I used for it:
<div class="secondheader">
<div class="container">
<div class="span12">
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories </li>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}
.nav6 {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6 li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}
I've tried using tutorials but I don't really understand on how to make the same thing for my layout I mean it has different ways and classes.
Do you want something like http://jsfiddle.net/b76Qc/?
Edit:
In your case the submenu is horizontal because you use descendant selectors instead of child selectors:
replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul
See my jsfiddle if you want the complete code.
Edit 2:
If you want each element to have a different background,
<li class="dropdown1">Categories
<ul>
<li style="background:red">Buy</li>
<li style="background:blue">Sell</li>
<li style="background:green">Forums</li>
...
</ul>
</li>
But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can't know what's happening just with images...
Edit 3:
You have to change
.nav6 a {
color: #7D7253;
padding: 20px;
}
into
.nav6>li>a {
padding: 20px;
}
.nav6 a {
color: #7D7253;
}
And
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410F;
text-decoration: none;
}
into
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");
}
Edit 4:
Sorry I didn't explain why I was telling you to use selectors with >, I thought you knew it.
Your html is like this:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</li>
</ul>
If you use .nav6 a, the style will be applied to all <a> inside .nav6. That's a descendant selector.
Then, this will be applied both to menu's links and submenu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu's links). This way we can set which styles we want to apply to all links and which to menu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
Edit 5:
To fix the problem with backgrounds,
change
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
to
.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
color: #53410F;
text-decoration: none;
}
and
.nav6 > li > a:hover
background-image: url("../img/hoverbg.png");
}
to
.nav6>li:hover>a {
background-image: url("../img/hoverbg.png");
}
To show you how little code is actualy required to make this work i set up a small example here: http://jsfiddle.net/fS5WV/
I put the explanations in the css.
The key lies in nesting the menu's properly, and giving the submenus a position absolute to prevent them from pushing the content down.
I hope it makes sense. Feel free to ask if you need further explanation.
I want to create a CSS/JS accordion menu, with HTML like so:
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The nav structure can get N levels deep, and each child menu will be indented from its parent. I want there to be a border that spans 100% of the width between all nav elements including the n-th level child elements. Like this:
alt text http://files.getdropbox.com/u/64548/nested-nav.png
I cannot for the life of me figure out an easy way to do this without using JavaScript, but it feels like something that should be possible. (I will be using JS to expand/collapse the nav tree).
You need to have the border and padding on the <a> which also must be set to display:block. This gives an added bonus as it makes the whole <li> region clickable.
There is no extra markup needed in the ul. Just define the max number of sublists in your css.
Example here
a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two
<ul>
<li>Child Two One</li>
<li>Child Two Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The tiling background image for the divider rows does not contradict resizing (at least should not, with sane CSS renderers).
This is pretty sloppy for my tastes, but basically it requires text-indent instead of padding or margin to achieve the nesting. But then to use a sprite image as the bullet for the <a>, you have to end up taking the current text-indent for the level and bump the sprite image over that many px, minus the sprite image width.
I've changed it to use padding-left on the anchor instead, but then this requires overflow: hidden on the parent div to hide the extra border that gets pushed to the right with each nesting.
And of course, visualize any of the stuff like .two_deep, .expanded, etc. as being done with jQuery, and NOT hardcoded into the CSS. It should be fairly simple to get a ul's depth in the menu.
<html>
<head>
<style>
body {font: normal 11px Arial;}
a:link, a:visited {color: #888; text-decoration: none;}
a:hover, a:active {color: #000; text-decoration: none;}
div {width: 250px; border-top: 1px solid #888; overflow: hidden;}
ul {
width: 100%;
margin: 0; padding: 0;
list-style-type: none;
}
li {
padding: 5px 0;
border-bottom: 1px solid #888;
}
li a {
display: block;
}
.two_deep li a {
padding-left: 25px;
}
.three_deep li a {
padding-left: 50px;
}
.four_deep li a {
padding-left: 75px;
}
.expanded {
display: block;
width: 100%;
border-bottom: 1px solid #888;
margin: -5px 0 5px;
padding: 5px 0;
}
li > ul {margin: -5px 0 -6px;}
</style>
</head>
<body>
<div>
<ul>
<li><a class="expanded" href="#">First Link</a>
<ul class="two_deep">
<li>Child One</li>
<li>
<a class="expanded" href="#">Child Two</a>
<ul class="three_deep">
<li>
<a class="expanded" href="#">Child One of Child Two</a>
<ul class="four_deep">
<li>Child One of . . .</li>
<li>Child Two of . . .</li>
</ul>
</li>
<li>Child Two of Child Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
</div>
</body>
</html>
But honestly, maybe you would rather just use a background image, and have it look ugly/broken when text is resized. The css is a bit 'hack-y' for my tastes, especially all the padding compensation needed due to the anchor and li having to be siblings.
I've tested this in Firefox 3.5, Safari 4, and Opera 9.6. I don't have access to anything else at the moment, so it's probably not even very pretty.
Needless to say it's probably a complete wreck in all IE versions. Sorry… It was just my own little test to see if I was up to the task!
Edit: It DOES work with page zoom and text resize, but again, IE support (?)…