Develop Reference

Nav sub menu not staying visible when hovered over in firefox browser?

My nav is positioned at the bottom of the page, and the sub menu appears above the nav.
I also have a bit of jquery which fades out the content when the nav is hovered on. However I think this query is interfering with the sub menu, as it doesn't stay when one hovers over it, this seems only in firefox browser?
please have a look here on a firefox browser http://intelligen.info/index.html
$("#nav").hover(
function () {
$(".index-content").fadeTo(700,0.3);
},
function () {
$(".index-content").fadeTo(700,1);
}
);

Your gap is set way to high, using bottom leaves whitespace between the hover and the element you are hovering over. Also, I wouldnt use jQuery for adding CSS elements such as fading. You can use transitions to do that.
#nav li:hover nav {
bottom: 12px; /** Change to 12 to fix **/
display: block;
left: 0;
position: absolute;
}

Possible to highlight path in many-nested css menu?

I've created a four-layer menu using CSS (ul and li) combined with PHP which pulls the options out of a database. It's not for navigation but to allow the user to filter up to a certain level of detail
Example: http://jsfiddle.net/7LFT5/
If you take the path "part of building" > "exterior" > "garage / car port" > "garage door", you'll see that the user would easily get confused about what path they've taken.
I'd like to highlight the path they took in a different colour. It would be ideal to do this in CSS - which feels like it should be possible, since the path is generating the visibility of menu items. I've been playing around with the css below, hoping :hover or :active would work - but no luck yet.
nav.filter li ul li ul li:hover ul {
display: block;
width: 150px;
padding: 0px;
left: 170px;
top: 0px;
/* margin: 0px; */
z-index: 3;
}
Has anyone done this before?

You need to change this selector:
nav.filter ul li a:hover {
Because you need to keep the highlight on the a tag when hover the entire content of the li
To this:
nav.filter ul li:hover > a {
Check this Demo http://jsfiddle.net/7LFT5/1/
Now combining the two selectors you can have one color for the active and one on the hover item like this :
http://jsfiddle.net/7LFT5/3/

sliding up/down form in bootstrap

I am creating a from with sliding up/down animation in a bootstrap template.
Here is the code : http://bootply.com/94382
When You click on the add button, the form will slide down and when You will click it again, it will slide up.
But if i am adding new elements on the page after the buttons, the new elements are not moving down instead the form is coming over the elements.
i want to achieve that the new elements will slide down and then form will come. But this is not happening now. Please help me out.

First of all remove position:absolute, position:fixed from your css where it actually not required. Also, use spans or ul li list with proper styles to render the icons, buttons, images in <div id="bottom-header">. Then remove position:absolute from your form and give proper margins width etc. so that you will get what you expected.

Replace your #sliding_form CSS properties to :
#sliding-form {
display: none;
background-color: #eee;
width: 45%;
margin-top: 60px;
overflow: hidden;
}
Updated Bootply

CSS Tab Control - How do I show only the first div?

Okay...I know there are already loads of Pure CSS Tab Controls out there...
Here is my HTML
<div class="tabs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="tabPage1">
<p>
Hello World
</p>
</div>
<div id="tabPage2">
<p>
Goodbye World
</p>
</div>
<div id="tabPage3">
<p>
Another World, somewhere far, far away!
</p>
</div>
</div>
Here is my CSS
.tabs > div {
display: none;
}
.tabs > div:target {
display: block;
}
There's no styling for this example as I'm only concerned with the behavior.
You can try it here...http://jsfiddle.net/rcrdC/
How do I get it to display the first div until an anchor is clicked?
How do I get it to leave the displayed div...displayed, even when I change the anchor to something else (i.e. #tabPage4)...if that makes sense?

from here , you can make the last one be display at the beginning with like this (working example)
.tabs > div:target ~ div:last-child,
.tabs > div{
display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
display: block;
}
Just move the first tabpage to be the last.

This is an interesting challenge. Unfortunately, I don't believe the intended result can be achieved (purely) with CSS.
We can show the first div easily enough using:
div:first-of-type { display: block; }
But I don't know of a way to select our previously :targeted divs without using JavaScript.
Here I've set up some jQuery to apply class .active on any div with an id that equals that of a clicked anchor href. From there we can override display: none; on divs of that class with some simple CSS:
$('li a').each(function () {
$(this).click(function () {
var active = $(this).attr('href');
$(active).addClass('active');
});
});
And here's the related CSS:
div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }
And a working example: http://jsfiddle.net/fjKUw/1/

showing the first tab on load should not be that hard. You can use the :first-of-type pseudo class. Something like this:
.tabs > div{
display: none;
}
.tabs > div:first-of-type,
.tabs > div:target {
display: block;
}
The second question is a bit harder. The first tab will be shown again as soon as your target moves to an anchor outside the tabs. http://jsfiddle.net/rcrdC/4/ You need some way to preserve state. The 'real life' solution would be to add a few lines of javascript to achieve this, as suggested already by #StuartKershaw.
If you insist on going fully css, you could use a (hidden) radio button to preserve the state. It is a bit hacky (inputs are not meant for that) and you would have to change your markup a bit, but it should be feasible.
An example of what I mean can be found here: http://jsfiddle.net/rcrdC/5/
Note that I placed some hidden radio buttons between the tabs. I replaced the links to the tabs by labels that reference those radio's. Then I use a combination of the :checked and the + selector to make things work. And the tab that is visible on load is the one with checked attribute.
Again, this is not the way I would recommend. You are adding to your markup, with the sole purpose of achieving a certain layout, which should be the task of your css. Also the stuff you need to add is far from semantically correct...

Changing css on span click

I have a 3 spans I use to navigate to 3 different pages, they basically act like buttons for me, only a plugin I use require them to be spans (why I cant use buttons, so dont tell me to use buttons instead).
What I want to do is change background color on the clicked span, so if I am on page 3, span 3 is green for instance, and when I click on another span, that one changes and the previous green span goes back to normal.
Any idea on how to do this either in js,html or css?

This is easily achieved with jQuery.
jQuery
$('span').on('click', function() {
$('span').removeClass('active');
$(this).addClass('active');
});
CSS
span {
background: #c1c1c1;
display: block;
width: 100px;
height: 25px;
float: left;
}
span.active {
background: green;
}
html
<span class="active">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
This just adds the class active to the clicked element while removing any active before.
JSFIDDLE