CSS Style drop down menu (contribute 3.11)

Hi,
I am having a problem viewing any styles in the styles drop
down menu at the top of my page when editing.
I am the administrator of the site and I set up the options
like this:
Administrator settings > Styles and fonts >
Document level CSS (pull down)
First 3 checkboxes checked, and show only CSS styles included
in this CSS file (browsed and selected a css file with a single
style).
Checked the remainding 3 checkboxes
No matter what I do I have not been successful in ever seeing
a style of my own within this list.
I have tried...
1) Not using a secure site
2) Allowing a different user on a different PC to attempt to
create a new page
3) Locating the stylesheet in many different locations
4) Hardcoding the styles into the template
5) Show all styles (which wouldn't work anyway since the
pages are PHP based)
6) Banging head violently against wall.
I should mention that I am using a PHP based template which
works fine apart from this styles drop down menu.
Please please please help (asap)!
Thanks,
Dan.

dotcom012 wrote:
> I have a web site that uses a javascript and a style
script to
> control some drop down menus at the top, each page has
to have this
> in the <head> area. Is there a way to make say a
CSS so that i can
> say update that one page if say a link needs to be
changed or added
> so i don't have to go to each of the 120 pages to change
the menu! So
> far right now, i have to go to each page, go into the
javascript code
> and update the link or whatever. Is there an easier way?
You may want to read this article, it shows how to use
external files (CSS,
SS-Includes, JS, etc):
http://www.tjkdesign.com/articles/maintenance.asp
HTH,
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

Similar Messages

CSS Horizontal Drop-down Menues

Hi,
I'm looking for help on how to create horizontal drop down
menu bars using Un-Ordered lists with changing backgrounds but not
using Java Script, but that work on multiple browsers.
Thanks
Brett

Can't do it wirhout some javascript.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Theminks" <[email protected]> wrote in
message
news:fgc2dd$aue$[email protected]..
> Hi,
>
> I'm looking for help on how to create horizontal drop
down menu bars using
> Un-Ordered lists with changing backgrounds but not using
Java Script, but
> that
> work on multiple browsers.
>
> Thanks
> Brett
>

Seeking: Drop Down Menu Tutorial for DreamWeaver CC (Pure CSS)

Hey all.
I'm relatively new to Dreamweaver, and web design in general. I took on a project to create a small-business website for my buddy.
I'll start by saying that I've googled, and have found several copy / paste solutions, as well as several plugin-style solutions. For various reasons, I'm not interested in other methods of creating a menu (jQuery). Project 7, before you post (like you seem to do in EVERY thread I've read about this topic...), I may purchase your tool later, but I want to learn the process first.
I'd like to know if anyone knows of a video or a walkthrough of how to create a CSS-only drop down menu for DreamWeaver CC. An in-depth tutorial will help me better understand CSS and HTML in general, as well as help me navigate the changes in DreamWeaver (namely, the CSS designer).
Any ideas?

http://www.w3schools.com/css/css_navbar.asp
http://cssmenumaker.com/blog/tutorials
http://www.siteground.com/tutorials/menu/css.htm
http://ntt.cc/2010/11/24/30-pure-css-menu-tutorials-for-web-developers.html
Try one of these sites, should have what your are looking for.

Double horizontal spry drop down menu bar problems

Hello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                    css spry drop down menu 1
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
                   css spry drop down menu 2
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.adminbarh li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.com

Hello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
                    css spry drop down menu 1
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
                   css spry drop down menu 2
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.adminbarh li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.com

Drop down menu in CSS

After someone suggested the P7 link (
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm[i
), I was able to reverse engineer it and figure out how it works
(obviously not a feat of genius, but I'm new at this). Anyway, I
got it working, made some changes to and and had a functioning
horizontal drop down menu bar to pop into my own site.
So I renamed everything, linked the .js to the HTML page in
the <head>, put the CSS into the attached style sheet, etc.
Everything was going great until I previewed it and realized that
the drop downs were happening behind the "bottom_half_wrapper"
elements rather than on top of them all.
So then I played with the z-index and put the nav bar on the
2nd level. No dice.
Also, you cannot scroll down the drop down menus without them
disappearing.
How should I be approaching this? I think that what is
especially hindering me is my lack of javascript knowledge. I am
under the gun at work and learning all of this on the fly. I have
attached the relevent code, but cannot publish the site since I am
at a large educational institution and do not have permission to
publish it to our server yet.
Thanks!

I don't think there is a correct answer to your questions, just opinions and options that all have a place in design decisions. Not all people will allow javascript or Flash content, so sticking with a CSS/html approach will help maximize the potential audience. But CSS/html-only solutions can end up lacking interesting functional/interactive elements. So the choice really comes down to using what works best to make the site performance what it needs to be.

Help needed with CSS drop down menu

Hi guys,
I'm trying to build a drop down menu for my site but, despite seeing a few tutorials and examples, I've had no luck yet!
I'm pretty sure my HTML is correct...
Code:
    <ul id="nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Drop Down 1</a></li>
                <li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
            </ul>
        </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>
My CSS looks like this at the moment...
Code:
ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;}
ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav li a {border-right:1px solid #000; color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}
* html #nav li {display:inline; float:left; } /* for IE 6 */
* + html #nav li {display:inline; float:left; } /* for IE 7 */
ul#nav li ul {left:-9999px; position:absolute; list-style:none;}
ul#nav li:hover ul {left:0; position:absolute;}
ul#nav li ul li {}
ul#nav li ul li a {width:230px; background-color:#efefef; color:#2e2e2e; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; border-bottom:solid 1px #FFF; padding:7px; margin:0;}
ul#nav li ul li a:hover {background-color:#028efd; background-image:none; color:#FFF;}
I'm really struggling with this. Does anyone know how I can get Menu 3 to display the four drop down items beneath it - not the same width as the Menu 3 button but just inline with it.
Thank you very much and I hope to hear from you.
SM

Try this. It's been adapted from a menu I previously made on another site.
#menu {width:920px; height:35px; padding:0; margin:0; background:url(navBg.jpg) repeat-x; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c;}
ul#nav a {font: 700 11px 'OpenSansRegular', arial, helvetica, sans-serif; text-transform:uppercase; margin:0; padding:5px 15px; line-height:25px; color: #666; text-decoration: none; display:block; list-style: none;}
ul#nav a:hover, ul#nav a.active {color: #999; background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav {position: relative; margin: 0; padding: 0;}
ul#nav ul {display: none;}
* html #nav li {display:block; float:left; } /* for IE 6 */
* + html #nav li {display:block; float:left; } /* for IE 7 */
ul#nav li, ul#nav li li {position: relative; float: left; list-style: none; border-right:1px solid #000;}
ul#nav li:hover ul {position: absolute; top: 35px; left: -1px; display:block; padding: 0; margin: 0;}
ul#nav li li {width:230px; background-color:#efefef; color:#000; font: normal 10px 'OpenSansRegular', arial, helvetica, sans-serif; border-bottom:solid 1px #FFF; border-right:none; border-left:1px solid #000; padding:0 5px;}
ul#nav li li:hover, ul#nav li li a:hover {background-color:#028efd; color:#FFF;}
<body>
<div id="menu">
<ul id="nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Drop Down 1</a></li>
                <li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
            </ul>
        </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>
    </div>
</body>

CSS Drop Down Menu Problem (only in IE)

Hi Folks,
I have just added a new drop down menu and it seems to work perfectly in every other browser except IE.
In IE the cursor makes the next menu item along drop down and not the one that's hovered over.
I have removed the jquery script and the same problem occurs, so I reckon it must be a CSS problem. Here's the CSS code in case anyone has any ideas what the problem is.
Any suggestions would be hugely appreciated cos I can't figure it out .
Cheers
Dave
/*Navigation Menu Style*/
#topmenu{
#topmenu #nav, #nav ul{
font-size:10.5px;
font-weight:bold;
margin:0;
list-style-type:none;
list-style-positionutside;
position:relative;
line-height:35px;
background-color:#006699;
width:100%;
text-align:left;
#topmenu #nav a{
display:block;
padding:0px 5px 0px 10px;
width:145px;
border-left-color:#006699;
background-color:#006699;
color:#fff;
text-decoration:none;
text-transform:uppercase;
#topmenu #nav a:hover{
color:#CFF;
#topmenu #nav li{
float:left;
position:relative;
#topmenu #nav ul {
position:absolute;
display:none;
width:160px;
top:35px;
#topmenu #nav li ul{
/*padding-bottom:20px;*/
#topmenu #nav li ul a{
width:180px;
height:35px;
float:left;
text-transform:capitalize;
#topmenu #nav li ul a:hover{
text-decoration:underline;
#topmenu #nav ul ul{
top:auto;
#topmenu #nav li ul ul {
left:180px;
margin:0px 0px 0px 10px;
#topmenu #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
#topmenu #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
/*Navigation Menu Style Ends */

I think that is fine but it did get converted to a smiley face you are right. This is how it looks
#topmenu #nav, #nav ul{
font-size:10.5px;
font-weight:bold;
margin:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:35px;
background-color:#006699;
width:100%;
text-align:left;
it's all on a local set up right non but I will try to pop it up and post a link.
The symptoms are easy to describe though. When you hover over a top level menu item, the list drops down under the link directly to the right.The positioning isn't random, it is exactly in line, just under the wrong heading.
In every other browser it seems to be fine.

CSS Drop down menu; how to align the right edge of drop down and parent menu?

Hello everyone,
I have a drop-down menu that is currently working well.
The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.
I want the menu to "drop" down and to the left, so the right edges are aligned.
I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.
Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.
Thank you!
Here is my code:
.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
.chromestyle ul li{
display: inline;
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;

Try this:
.chromestyle{
     font-weight: bold;
     height: 29px;
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
.chromestyle ul{
border: 0px solid #BBB;
width:100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
.chromestyle ul li{
display: inline;
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
visibility: hidden;
text-align:left;
.dropmenudiv a{
width: auto;
display: block;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 3px;
text-decoration: none;
font-weight: bold;
color: black;
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need help fixing a CSS Drop-Down menu for IE6

Hello.
I have created an entirely CSS drop down menu for my website
which works perfect in Firefox, Safari, Opera and IE7 however when
I tested in IE6 it displayed like this -->
image
here or go to http://www.runecentral.net/index.php (Must have
/index.php as i have redirected / to the community forum.)
Here is my code

Thank you for your reply.
To answer your first question, I tried it with just one
before and it caused Internet Explorer to display the background
incorrectly so I just kept them both.
I have replaced background-image with background:
url(/img/defmenu.png) repeat-x;
But, I cannot access my XP machine until tomorrow so I cannot
view the site in IE6, if you could test it and tell me if it is the
same as the image linked to in my first post that would be great.
Kind Regards,
Perry

CSS Question on a drop-down menu

Hello,
Is there anything wrong with this please? I'm thinking about the use of hover. I have a drop-down menu and each item is a different color.
.primarynav li.menu-item-164     { /*    About */
background-color: #0095D7; }
.primarynav li:hover.page-item-164 { /*    About */
background-color: #159CD6; }
I wonder if it should really be:
.primarynav li.menu-item-164     a:link { /*    About */
background-color: #0095D7; }
.primarynav li.page-item-164 a:hover { /*    About */
background-color: #159CD6; }
If you're interested the link is http://brightontherapyservice.co.uk
I'm revisiting this menu after about a year and I am worried that I should have more of the style on the anchor rather than the list item.
Thanks
Martin

Hi Martin,
I am not sure if i got you correct! let me give it a try...
a. Do you wanted to give different background color for the sub menus of 'About' on display (not on hover)?
.primarynav li.menu-item-462          {
          background-color: #900;
.primarynav li.menu-item-505          {
          background-color: #360;
.primarynav li.menu-item-506          {
          background-color: #F30;
For this to work, you may have to comment out "background-color: #C2E6F5;" inside the definition
.primarynav ul ul li a {
But here I am not sure where else it would affect if you comment out that background color value.
b. Do you want to give different background color for the sub menus of 'About' on hover?
.primarynav li:hover.menu-item-462          {
          background-color: #F30;
.primarynav li:hover.menu-item-505          {
          background-color: #900;
.primarynav li:hover.menu-item-506          {
          background-color: #360;
If that was not the question, then please elaborate.
-Janaki

"undefined" appearing next to text in CSS Drop-Down menu, why?

Hello everyone,
I am having a problem with a CSS drop-down menu. The menu works fine, as you can see here:
http://littlebuddymedia.com/help/011.html
But the text "undefined" appears next to the main menu options. My question is, why?
I have narrowed the problem down to this chunk of code:
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>
If you remove the rel="dropmenu1" portion of the code, the word "undefine" no longer appears, but then the menu doesnt drop-down anymore.
Any ideas?
If it is needed:
Here is the CSS file: http://littlebuddymedia.com/help/chrometheme/chromestyle.css
Here is the JS file:http://littlebuddymedia.com/help/chromejs/chrome.js
Thank you.

When I use FF to view the generated source, I see this -
<li><a href="#" rel="dropmenu1">Resources undefined</a></li>
<li><a href="#" rel="dropmenu2">News undefined</a></li>
<li><a href="#" rel="dropmenu3">Search undefined</a></li>
The undefined is coming from the javascript functions that you have loaded in that external file. This function call is what starts it -
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
If you want 100% reliable drop menus that have been exhaustively tested in all common browsers/platforms, check the ones available from http://www.projectseven.com.

Drop Down Menu Using CSS Only

Apex 3.2
I have created a drop down menu for my application by following this blog
http://www.grassroots-oracle.com/2013/05/css-pull-down-menu-using-apex-list.html
It works perfectly if my list has only one level, but I can't get it working for sub items.
If I add a sub item to my list, then the whole menu displays incorrectly.
Has anybody used this blog before
I would post on the blog, but it requires a google acount, which I am not allowed to create
Gus

Hi Gus,
Have you read the comment from ino?
Thanks Scott, very useful.
One update: this works if there are no sub menus. For the same reason as you described about the <ul> bug, you can change the Sublist with sublist items to
<li><a href="#LINK#" class="dir">#TEXT#</a><ul>
(extra <ul> at the end). Took me a while to figure out why my sub menus were not showing properly, until I read your comment in the "Sublist template before rows" section.
It looks to me that this would solve your problem.
Regards,
Kees Vlek
Company: http://www.orcado.nl
Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek
Twitter: http://www.twitter.com/skier66
+If the question is answered please change it to answered and mark the appropriate post as correct/helpfull.+

Version 3.6.17 Horizontal drop down menu is displaying as vertical text list. Page style set to basic. Menu works fine in Internet Explorer. Any hints?

Newly installed horizontal drop down menu works in IE. In Firefox, it displays as a vertical text list. Any hints?

Clear the cache and the cookies from sites that cause problems.
"Clear the Cache":
* Tools > Options > Advanced > Network > Offline Storage (Cache): "Clear Now"
"Remove the Cookies" from sites causing problems:
* Tools > Options > Privacy > Cookies: "Show Cookies"
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
* Don't make any changes on the Safe mode start window.
* https://support.mozilla.com/kb/Safe+Mode
* https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes

Spry Drop Down Menu not appearing in I.E.8

I have created a spry drop down menu in Dreamweaver CS5, brought it to my webpage in Macromedia Dreamweaver, uploaded it and when I view the website in I.E. 8 only the top tabs of the menu appear. When I scroll over it, no drop down menu shows. Please help.

Below is the coding i have for my menu...and the site address is www.setonyouthshelters.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="/public_html/javascript/tableHeight.js"></script>
<script src="file:///C|/Documents%20and%20Settings/Mother%20Seton%20House/My%20Documents/Seton_Youth_Sh elters/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<title>Seton Youth Shelters</title>

<link href="/css/seaton.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#MenuBar1 li strong {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: right;
#MenuBar1 li strong {
font-size: 10px;
#MenuBar1 li strong {
font-size: 18px;
.email {
text-align: center;
font-size: 9px;
font-weight: bold;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="file:///C|/Documents%20and%20Settings/Mother%20Seton%20House/My%20Documents/Seton_Youth_Sh elters/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('/images/home_button1.gif','/images/about_usbutton1.gif','/image s/programs_button1.gif','/images/events_button1.gif','/images/contribute_button1.gif','/im ages/contact_usbutton1.gif','/images/bigchillbutton1.gif','/images/derbybutton1.gif','/ima ges/sponsorshipinfobutton1.gif','/images/fashionbutton1.gif','/images/footballbutton1.gif' ,'/images/golfoutingbutton1.gif','/images/kingswalkbutton1.gif','/images/monsterbutton1.gi f','/images/supperbutton1.gif','/images/summerbutton1.gif','/images/winebutton1.gif','/ima ges/boardofdirectors1.gif','/images/funding1.gif','/images/missionprograms1.gif','/images/ newsletter1.gif','/images/support1.gif','/images/counseling1.gif','/images/inschool1.gif', '/images/mentoring1.gif','/images/parentservices1.gif','/images/safeplace.gif','/images/sh elter.gif','/images/streetoutreach1.gif','/images/volunteer1.gif','/images/youthambassador s.gif','/images/donationsbutton1.gif','/images/thriftstorebutton1.gif')">


<span id='xawmMenuPathImg-setonhouseRevII' style='position:absolute;top:-50px'><img name='awmMenuPathImg-setonhouseRevII' id='awmMenuPathImg-setonhouseRevII' src='/public_html/awmmenupath.gif' alt='' /></span>
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='DW'; awmAltUrl='';</script>
<script src='/public_html/setonhouseRevII.js' language='JavaScript1.2' type='text/javascript'></script>
<script type='text/javascript'>awmBuildMenu();</script>


<style type="text/css">
            .awmAnchor {position:relative;z-index:0}
            </style>
<table width="790" border="0" align="center" cellpadding="1" cellspacing="0">
<tr>
    <td bgcolor="#C81F36"><table width="790" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
      <tr>
        <td align="right" bgcolor="#1C1D4D"><p><img src="/images/headerimg.gif" alt="header" width="800" height="150" hspace="5" align="middle" /></p>
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','/images/home_button1.gif',1)"><img src="/images/home_button.gif" alt="HOME" name="home" width="110" height="35" border="0" id="home" /></a></li>
            <li><a href="/about/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aboutus','','/images/about_usbutton1.gif',1)"><img src="/images/about_usbutton.gif" alt="ABOUT US" name="aboutus" width="110" height="35" border="0" id="aboutus" /></a>
              <ul>
<li><a href="/about/board_of_directors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('boardofdirectors','','/images/boardofdirectors1.gif',1)"><img src="/images/boardofdirectors.gif" alt="BOARD OF DIRECTORS" name="boardofdirectors" width="110" height="18" border="0" id="boardofdirectors" /></a></li>
<li><a href="/about/funding.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('funding','','/images/funding1.gif',1)"><img src="/images/funding.gif" alt="FUNDING" name="funding" width="110" height="18" border="0" id="funding" /></a></li>
<li><a href="/about/mission_programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('missionprograms','','/images/missionprograms1.gif',1)"><img src="/images/missionprograms.gif" alt="MISSION PROGRAMS" name="missionprograms" width="110" height="18" border="0" id="missionprograms" /></a></li>
<li><a href="/about/newsletter_archives.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('newsletter','','/images/newsletter1.gif',1)"><img src="/images/newsletter.gif" alt="NEWSLETTER" name="newsletter" width="110" height="18" border="0" id="newsletter" /></a></li>
<li><a href="/about/support.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('support','','/images/support1.gif',1)"><img src="/images/support.gif" alt="SUPPORT" name="support" width="110" height="18" border="0" id="support" /></a></li>
              </ul>
            </li>
            <li><a href="/programs/board_of_directors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','/images/programs_button1.gif',1)"><img src="/images/programs_button.gif" alt="PROGRAMS" name="programs" width="110" height="35" border="0" id="programs" /></a>
              <ul>
                <li><a href="/programs/counseling.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('counseling','','/images/counseling1.gif',1)"><img src="/images/counseling.gif" alt="COUNSELING" name="counseling" width="110" height="18" border="0" id="counseling" /></a></li>
                <li><a href="/programs/in_school.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inschool','','/images/inschool1.gif',1)"><img src="/images/inschool.gif" alt="IN SCHOOL" name="inschool" width="110" height="18" border="0" id="inschool" /></a></li>
                <li><a href="/programs/mentoring.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mentoring','','/images/mentoring1.gif',1)"><img src="/images/mentoring.gif" alt="MENTORING" name="mentoring" width="110" height="18" border="0" id="mentoring" /></a></li>
                <li><a href="/programs/parent_services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('parentservices','','/images/parentservices1.gif',1)"><img src="/images/parent_services.gif" alt="PARENT SERVICES" name="parentservices" width="110" height="18" border="0" id="parentservices" /></a></li>
                <li><a href="/programs/safe_place.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('safeplace','','/images/safeplace.gif',1)"><img src="/images/safeplace1.gif" alt="SAFE PLACE" name="safeplace" width="110" height="18" border="0" id="safeplace" /></a></li>
                <li><a href="/programs/shelter.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('shelter','','/images/shelter.gif',1)"><img src="/images/shelter1.gif" alt="SHELTER" name="shelter" width="110" height="18" border="0" id="shelter" /></a></li>
                <li><a href="/programs/street_outreach.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('streetoutreach','','/images/streetoutreach1.gif',1)"><img src="/images/streetoutreach.gif" alt="STREET OUTREACH" name="streetoutreach" width="110" height="18" border="0" id="streetoutreach" /></a></li>
                <li><a href="/programs/volunteer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('volunteer','','/images/volunteer1.gif',1)"><img src="/images/volunteer.gif" alt="VOLUNTEER" name="volunteer" width="110" height="18" border="0" id="volunteer" /></a></li>
                <li><a href="/programs/youth_ambassadors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youthambassadors','','/images/youthambassadors.gif',1)"><img src="/images/youthambassadors1.gif" alt="YOUTH AMBASSADORS" name="youthambassadors" width="110" height="18" border="0" id="youthambassadors" /></a></li>
              </ul>
            </li>
            <li><a href="/events/annualfundcampaign/annual_fund.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','/images/events_button1.gif',1)"><img src="/images/events_button.gif" alt="EVENTS" name="events" width="110" height="35" border="0" id="events" /></a>
              <ul>
                <li><a href="/events/big_chill/big_chill.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bigchill','','/images/bigchillbutton1.gif',1)"><img src="/images/bigchillbutton.gif" alt="BIG CHILL" name="bigchill" width="115" height="36" border="0" id="bigchill" /></a></li>
                <li><a href="/events/derby/derby_party.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kentuckyderby','','/images/derbybutton1.gif',1)"><img src="/images/derbybutton.gif" alt="KENTUCKY DERBY" name="kentuckyderby" width="115" height="36" border="0" id="kentuckyderby" /></a></li>
                <li><a href="/events/fashion/fashion_show.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fashionshow','','/images/fashionbutton1.gif',1)"><img src="/images/fashionbutton.gif" alt="FASHION SHOW" name="fashionshow" width="115" height="36" border="0" id="fashionshow" /></a></li>
                <li><a href="/events/golf/golf_outing.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('golfouting','','/images/golfoutingbutton1.gif',1)"><img src="/images/golfoutingbutton.gif" alt="GOLF OUTING" name="golfouting" width="115" height="36" border="0" id="golfouting" /></a></li>
                <li><a href="/events/seton_supper_club/seton_supper_club.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('setonsupperclub','','/images/supperbutton1.gif',1)"><img src="/images/supperbutton.gif" alt="SETON SUPPER CLUB" name="setonsupperclub" width="115" height="36" border="0" id="setonsupperclub" /></a></li>
                <li><a href="/events/summercel.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('summercelebration','','/images/summerbutton1.gif',1)"><img src="/images/summerbutton.gif" alt="SUMMER CELEBRATION" name="summercelebration" width="115" height="36" border="0" id="summercelebration" /></a></li>
                <li><a href="/events/wine_tasting/wine_tasting.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('winetasting','','/images/winebutton1.gif',1)"><img src="/images/winebutton.gif" alt="WINE TASTING" name="winetasting" width="115" height="36" border="0" id="winetasting" /></a></li>
              </ul>
            </li>
            <li><a href="/contribute/contribute_first_page.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contribute','','/images/contribute_button1.gif',1)"><img src="/images/contribute_button.gif" alt="CONTRIBUTE" name="contribute" width="110" height="35" border="0" id="contribute" /></a>
              <ul>
                <li><a href="/contribute/donations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donations','','/images/donationsbutton1.gif',1)"><img src="/images/donationsbutton.gif" alt="DONATIONS" name="donations" width="110" height="35" border="0" id="donations" /></a></li>
                <li><a href="/contribute/sponsors.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sponsors','','/images/sponsorbutton1.gif',1)"><img src="/images/sponsorbutton.gif" alt="SPONSORS" name="sponsors" width="110" height="15" border="0" id="sponsors" /></a></li>
    <li><a href="/contribute/thrift_store_USA.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('thriftstore','','/images/thriftstorebutton1.gif',1)"><img src="/images/thriftstorebutton.gif" alt="THRIFT STORE" name="thriftstore" width="110" height="35" border="0" id="thriftstore" /></a></li>
     </ul>
            </li>
            <li><a href="/contact/contactus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactus','','/images/contact_usbutton1.gif',1)"><img src="/images/contact_usbutton.gif" alt="CONTACT US" name="contactus" width="110" height="35" border="0" id="contactus" /></a></li>
          </ul></td>

How can change background color of drop down menu navigation?

Hi,
I am using multi level drop-down-navigation menu in my website.
I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
please help me
Link & code is given below
http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
HTML Code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a>
                <ul>
                <li><a href="#">Level 2.3.1</a></li>
                <li><a href="#">Level 2.3.2</a></li>
                <li><a href="#">Level 2.3.3</a></li>
                <li><a href="#">Level 2.3.4</a></li>
                <li><a href="#">Level 2.3.5</a></li>
                <li><a href="#">Level 2.3.6</a></li>
                <li><a href="#">Level 2.3.7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS CODE
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
#nav ul {
        margin:0;
        padding:0;
        list-style:none;
#nav ul li {
        float:left;
#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;

Change this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
to this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #new color code;
width: 100%;
And repeat this on other selectors.
Nancy O.

CSS Style drop down menu (contribute 3.11)

Similar Messages

Maybe you are looking for