We Keep Coding

I'm trying to select a nested ul, tried with css but having trouble

I have a cms rendering the menus for a website I am designing and I need to select the children of the parent menu items. Here is how the code is generated:
<div class="menu">
<ul>
<li></li>
<li><a href="" class="CurrentButton" ... />text</a>
<div>
<ul></ul>
</div>
</li>
</ul>
</div>
I have tried this CSS to try to select it but it's been unsuccessful as of yet aside from the display :none;
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton div {
display: block;
}
can anyone see what I'm doing wrong? Would a jquery function be easier? I'm fairly new to jquery so I'm not sure how to go about writing a function for it.
I am trying to select the div within the li when the anchor within that li has the class CurrentButton, if the anchor within the li doesn't have the class then I want it hidden

Both of the examples you give rely on finding the .menu element, but none exists in your code. it does now.
a.CurrentButton div selects any divs inside of any a.CurrentButtons. However, your divs are not inside the as. Try this:
.menu ul > li > a {
//selects all the as, but non of the divs
}
.menu ul > li > * {
//selects anything inside a 'li', both 'a's and 'div's
}
To select divs that follow a.CurrentButtons, use this:
.menu ul li > a.CurrentButton + div {
//any 'div's that are directly after 'a.CurrentButton'
}

If you really need to be specific, use the adjacent elements operator ( + )
.menu > ul > li > a.CurrentButton + div {
Otherwise, you are targeting a div that is the descendent of CurrentButton and that doesn't exist.
If you don't need to be so specific, use the same selector as before:
.menu > ul > li > div {

Assuming the <ul> above is a child of an element with the class .menu, the <div> above is not a child of a.CurrentButton, so you should select it like this:
.menu > ul > li > div {
display: block;
}
Just so you know > only selects direct children of an element.

Try this:
In your HTML div is a sibling of a.CurrentButton. So, you should use + sign.
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton + div {
display: block;
}

slide bottom border in from left on hover

i have this css for my menu:
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:70px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#000000;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #FFFFFF;
color: #FFFFFF;
text-decoration:none;
text-align: center;
}
#menu li a:hover {
border-color:#000000;
color:#000000;
}
i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover
here is a fiddle: http://jsfiddle.net/2w6NB/

Position your element you want coming from the left to be
left: -200px; //or however much it takes to hide the element completely or partially
Then here is some sample code that you might be able to successfully use to model your functionality:
$( "#item" ).hover(function() {
$( "#item" ).stop().animate({
left: "-1" //shows item
}, 400);}, function() {
$( "#item" ).stop().animate({
left: "-160" //this determines how far back the item goes after hovering
}, 400);
});
Let me know if you have questions or if it works.

I believe this link will help you: Sliding with CSS and Affect Other Element on Hover
The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.
(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.
I hope that helps!

JS Menu keep menu state

I have this HTML Code:
<div id="nav">
<li>Dashboard</li>
<li><a>Contacts</a>
<ul>
<li><strong>Companies</strong></li>
<li>Add Company</li>
<li>View Company</li>
</ul>
</li>
</div>
and this JS:
<script>
$(document).ready(function () {
$('#nav > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
for my vertical menu but i cant work out how to keep the menu state when the page changes.
for example, if the is expanded, how can i keep it expanded if the page changes?
here is the CSS to:
#nav {
float: left;
margin-left:5px;
margin-top:-20px;
top:0;
left:0;
width: 100%;
list-style:none;
}
#nav li a {
display: block;
padding: 8px 10px;
margin-bottom:0;
background: #666666;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
text-decoration: none;
color: #EEEEEE;
width:155px;
}
#nav li a:hover, #nav li a.active {
background: #F36F25;
color: #FFFFFF;
cursor:pointer;
}
#nav li ul {
display: none;
list-style:none;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background: #EEEEEE;
color:#666666;
border:1px solid #EEEEEE;
}
#nav li ul li a:hover {
background: #EEEEEE;
color:#f36f25;
border:1px solid #f36f25;
}

I would suggest using sessionStorage in this scenario. It's a great tool in this case, and it is widely supported, but see http://caniuse.com/namevalue-storage to see if its suitable for your needs. What you can do is use sessionStorage to keep track (client-side) of your currently expanded menu so you can expand the correct menu on a page reload. This answer is not 100% correct in the sense that you can't just plug it in directly into your code (I would have had to guess at several things) but it should give you a fairly idea of where to go. Note that in the code below, I changed link hrefs to point to JSFiddle because that is where I made a working example, but hopefully this will get you on the right track to implement it in your own pages.
One of the main things necessary to change is to give main menu <a> tags an ID (below, they are menuDashboard and menuContacts). These would have to be consistent across your different pages, and also the scripts below would have to be included in all the pages where you want to keep the menu state. Then the basic premise is that on menu click, we store the currently expanded menu <a> ID into sessionStorage so we can access that after a page reload. Then, on page load, we look at sessionStorage to see what was previously selected by retrieving the key "activeMenuItemID", and if we find that is not undefined, we expand that menu item.
Working example: http://jsfiddle.net/VBLS8/2/show/
Note, because of how JSFiddle is built, the previous link is a link directly to JSFiddle Results iframe is. Otherwise, when clicking the links JSFiddle just breaks. The actual JSFiddle is here: http://jsfiddle.net/VBLS8/2/.
<br/>
<div id="nav">
<li>
<a id="menuDashboard">Dashboard</a>
<ul>
<li><strong>Sub Category</strong></li>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
</li>
<li>
<a id="menuContacts">Contacts</a>
<ul>
<li><strong>Companies</strong></li>
<li>Add Company</li>
<li>View Company</li>
</ul>
JavaScript:
$(document).ready(function(){
//Loop through nav items, compare to expanded item ID from sessionStorage so we can expand whichever item was previously expanded
if(sessionStorage.getItem("activeMenuItemID") != undefined){
$("#nav > li > a").each(function(){
if ($(this).attr("id") == sessionStorage.getItem("activeMenuItemID")){
expandMenuItem(this);
}
});
}
$('#nav > li > a').click(function(elem){
expandMenuItem(this);
});
});
function expandMenuItem(elem){
if ($(elem).attr('class') != 'active'){
$('#nav li ul').slideUp();
$('#nav > li > a').removeClass("active");
$(elem).addClass("active");
$(elem).next().slideToggle();
sessionStorage.setItem("activeMenuItemID", $(elem).attr("id"));
}
}

When the page changes, the click handler gets bound, but there is no statement handling the initial state of the menu.
So...
$(document).ready(function() {
//original click handler
//$('#nav a').click
//but also this piece of code, that will display all the lists having an .active link inside
$('#nav ul').has('a.active').show();
});
Regards and good luck!
A quick but a little dirty solution to keep track of your currently active page is to compare the src attribute of your target frame with the href attribute of your links.
Edit: The following fiddle might help you a bit: fiddle

Creating A Dropline Style Menu

I am trying to create a dropline style menu.
Please see my fiddle here - http://jsfiddle.net/oampz/38c6q/
The issue i'm having is, i don't want the brown menu - or for it to drop down/fade in.. I'm trying to get the sub menu items to simply appear in the grey coloured sub DIV.
$('#main-nav > li').hover(function(){
if(!$(this).find('.main-link').hasClass('active')){
$("#main-nav > li a.active").removeClass("active");
$(this).find('.main-link').addClass("active");
if($(this).find('li').length){
//$("#main-nav li a.close").stop().fadeIn();
//There is no .close
var that = this;
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
}
else {
$(this).find(".sub-links").stop().fadeOut( function(){
$(this).css('opacity','1');
$("#sub-link-bar").stop().animate({height: "1px"});
});
}
}
}, function(){
if($(this).find('li').length){
$(this).find(".sub-links").stop().hide( function(){
$(this).css('opacity','1');
});
}
$("#sub-link-bar").stop().animate({height: "1px"});
$(this).find('.main-link').removeClass('active');
});
Any help appreciated.

I've updated the code http://jsfiddle.net/38c6q/1/
replaced this
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
with
$('#sub-menu').html( $(that).find(".sub-links").html() )
To have them float next to each other, you can add this CSS
.sub-menu li{
display:block;
padding:0;
margin:0;
float:left;
}
And to add some colors and backgrounds to links, add some CSS like this
.sub-menu a{
display:block;
margin:0 5px;
padding:5px;
text-decoration:none;
Color:#333;
}
.sub-menu a:hover{
background:#333;
color:#fff;
}
updated Demo at
http://jsfiddle.net/38c6q/4/

Setting link hover property with jQuery

I want to change the background color of a link with jQuery,
the orginal CSS for the link is
#container ul li:hover ul li a{
background: #FF0000
}
I'm trying the following jQuery code, but it does not seem to work.
jQuery('#container ul li:hover ul li a').css('background', '#FF0000');
I can set the css for the normal links, but its only causing problem with the link hover.

try this:
jQuery('#container ul li ul li a').hover(function(){
$(this).css('background', '#FF0000');
})
or this :
jQuery('#container ul li').hover(function(){
$(this).find("ul li a").css('background', '#FF0000');
})

You could try it with the jquery hover function. http://api.jquery.com/hover/
And re-set the color.