Hello, I made a new CSS Nav Bar, but I am running into a few problems with how it shows up. The bar itself works fine as far as I can tell. It just seems to hide behind the text on the page. So when I mouseover the main bar the flyouts aren't selectable because it jumps to the text on the page. Attached a picture to better explain. I Haven't tried to see if it will ge over top of the images either but im assuming it'll act the same way. Note: I use VSD. My page that I am testing on is http://www.thecollectioncup.com/Page32 . It is just a test page so there are other things that are out of place lol

Zombie –
In VSD, try selecting the menu and then click object > arrange > bring to front (object in the top-most menu). You can also do the same with the text under it, but send it to the back.

I think Eric may have suggested turning the drop down text into advanced text.

Yea I tried the bring to front, but isnt working. Where do I change the text into advanced text? Is it on the stylesheet? or in the HTML somewhere?

If your css is behind something like text and such you'll need to make the text advanced.
Click the text box, then click object at the top of VSD then check Allow Advanced Text in the properties box that opens to the right.

Thanks alot! I had to do that and then go back in and bring it back to the front again for some reason after doing that checkbox but it seems to be working fine now ! Thanks a bunch!

Although now that the first drop down menus are working, when I highlight, for example "dinners" the next flyout menu opens but I cant hover over them without the window going away. Any ideas for that? haha

You'll need to adjust the css to bring the slide out closer to the drop down so there's no gap to jump. You also have some extra body tags and such in some of the html that you pasted into your page. I would clean those up.

I think I found one body tag by the wowslider. I cant find any more with VSD yet. Ill have to open it in html soon and see what else there is. Heres what I have for the Styles sheet for CSS. Im not great with CSS yet so im not sure which tag I need to change to fix the sub-menu's


#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}


#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}

#cssmenu > ul > li > a {
color: rgb(160,160,160);
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }


#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(250,250,250);
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}

#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
color: rgb(50,50,50);
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: rgb(250,250,250);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}


#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(250,250,250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}


#cssmenu ul ul a:hover{
background-color: rgb(205,44,36);
color: rgb(240,240,240);
}

#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}

Try this.
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 180px; visibility: visible;}

Eric your a lifesaver! works like a charm now. Now I can save a ton of space by getting rid of the recent post bar on every page!