Clicked Link Color Within Spry Menu Bar

Greetings,
I have a spry menu bar that is working like I want it to
except for one thing. The unclicked links are white, which is what
I want. In the template in which the menu is located, the page
properties are sent black for visited links.
How can I make only the menu bar links remain white when
visited and keep other links on the page going black when visited?
They stay white now in IE7 and FF, but not IE6.
Thanks in advance for any assistance.
Glenn

Have you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
    cursor: pointer;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #FFF;
    padding-right: 2px;
    padding-left: 2px;
    display: block;
    background-color: #223F9A;

Similar Messages

Need transparent background color in Spry Menu Bar

Tried every possible combination.
Built a 150x1000 px header in Illustrator with a 20x1000 px rectangle at the bottom for the nav bar, set as a background image in the header within Dreamweaver.
Can not make a transparent (no color) background within Spry Menu Bar: MenuBar1??
Also, my first nav is 'Welcome' that <li></li> is about 6-8 px higher then the rest of the nav bar??
Any help at all would be appreciated, thanks
optionsclinic.net

Have you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
    cursor: pointer;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #FFF;
    padding-right: 2px;
    padding-left: 2px;
    display: block;
    background-color: #223F9A;

Spry Menu Bar Editing Links PLEASE HELP

Ok I am a new user and this is my first site and I have a question regarding creating links in the spry menu bar.
I created my home page with a spry menu bar and I have begun creating pages to link to my home page.
My question is when I navigate to another page from my home page my spry menu bar on the second page does not have the links set for the spry menu. Do I have to input all the links again on each additional page or is there an easier way to copy from my home page.
I am creating an online store and my homepage menu bar has over thirty links to products pages. Each page has the original banner and spry menu bar from my home page but the links arent set on any of the products pages. Do I have to go into each one of my thirty pages and create the thirty links to the other pages? and if that is the case what if I want to change or add additional links to the home page for new products launching? Do I have to update the links and spry menu bar on all of the additional pages as well?
If anyone can help me out I would greatly appreciate it. Any answer would be helpful even if its not the one I want.

If you're not using DW Templates to spawn site pages or Server-Side Includes for sitewide menus, you definitely must edit each menu on each page and upload to your server. Tedious.
Server-Side Includes are a huge time saver. Learn to use them.
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Nancy O.

Need Help with DW 5.5 spry menu bars.

I was given an unopened/registered Creative Suite 5.5 a couple days ago so I installed it and got to work on a website for my upcoming business. I got the home page finished, and so i saved it as a template to use for the remaining pages. But as soon as I click "save" my horizontal Spry Menu Bar becomes vertical at the top of my page. If i click on the Spryhorizontalmenu.css a message appears at the top of the screen that says something along the lines of "spryhorizontalmenu.css is not stored on local disk Get" but it will not let me access the link for help and I have been stumped for days. This is my first webpage and any help for this newbee would be very much appreciated.if you have questions please ask!!!

If horizontal is turning vertical, I have a feeling what is happening is that when you publish it, it's not connected to any style sheet -- or you have the style sheets in the wrong order.
Remember, with CSS (Cascading Style Sheets) the last stylesheet trumps the earlier one. That's perfectly OK if there are no conflicts, but there may be some that can cause problems.
Thus, you'd be looking for:
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="navigation.css" rel="stylesheet" type="text/css">
If navigation.css is first, styles.css may be rewriting your styles for your spry navigation.
Now, I'm going to throw you a curve. Spry has been discontinued and it "going away." I recommend you learn how to make your own navigation and Spry is usually used for drop-down navigation. You can do that in straight HTML and CSS.
Take a look at my last reply in this forum discussion for a bunch of pretty cool "do it yourself" navigation tutorials.

Spry Menu Bar link colors not consistent

I have a horizontal Spry menu bar set up with 4 items in it.
The first item is the Home link and does not have a submenu, but
the other 3 items do. What I want is when you roll over the main 4
items the text link color will be purple (#583399). When an item
has a submenu the rollover text link on the submenu links will be
green (#89b11a).
My current code almost works, but the problem I am having is
that the Home link
without the submenu changes to a green color instead of
purple like the other 3 main links. If I add a test submenu to the
Home link then it turns purple like the other links. How can I get
the Home link to change to purple like the others without having a
submenu attached to it?
Here is my html code that refers to the menu:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html"
class="MenuBarItemSubmenu">HOME</a></li>
<li><a href="about.html"
class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a
href="services.html">services</a></li>
<li><a
href="bios.html">bios</a></li>
<li><a
href="news.html">news</a></li>
</ul>
</li>
<li><a href="work.html" class="MenuBarItemSubmenu"
>WORK</a>
<ul>
<li><a href="design.html">design</a>
</li>
<li><a
href="advertising.html">advertising</a></li>
<li><a href="casestudies.html">case
studies</a></li>
</ul>
</li>
<li><a href="contact.html"
class="MenuBarItemSubmenu">CONTACT</a>
<ul>
<li><a href="#">.</a></li>
<li><a
href="location.html">location</a></li>
<li><a
href="opportunities.html">opportunities</a></li>
</ul>
</li>
</ul>
Here is the Spry CSS code that pertains to the links:
/* Menu items are a light gray text with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #666666;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
/* Menu items that have mouse over or focus have green text
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #89b11a;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemHover,
color: #583399;
/* Menu items that are open with submenus are set to
MenuBarItemHover with purple text */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #583399;
And
here
is a link to my test file so you can see what I am talking
about.
Thanks for any help and let me know if you need anything else
to help with it.

Anyone??

Spry Menu Bar - Freezing the Menu item in hover when clicking a submenu item

Hi,
I am trying to add a feature to a verticle spry menu bar that freezes the menu item or "parent" (to apear to be hovered) when clicking one of the parents sub-menu items. I want to do this so that users can know how they arrived at the page they're on.
Thanks for your help,
-Shiva

To look at your intention in a different way,
Hover over a submenu item
Parent item is colored/indicated
Submenu item is colored/indicated
Click on the submenu item
New page opens
Parent item "remains" colored/indicated on the new page
There are three or four ways to do this, depending on your site setup, but one basic concept to understand. The emphasis on the Parent menu item is totally independent of whether you got to the new page via the menu or by some other means. The emphasis will always be there, though it will appear to be connected to your clicking on the menu!
Say you have a menu with two Parent menu items, flowers and trees.
On the Flowers menu are submenus: Tulips, Roses, and Gardenias, On all three different Flowers pages (Tulips, Roses, Gardenias), the Flowers parent item will be emphasized.
On the Trees menu are submenus: Oak, Maple, Spruce. On all three different Trees pages (Oak, Maple, Spruce), the Trees parent item will be emphasized.
If you want to go in to each page individually, you can use a general indicator like id="localemphasis". (To emphasize more than one thing on a page, use a class instead of an id)
Using this method, on the Tulips, Roses, and Gardenias pages, put id="localemphasis" on the Flowers parent menu item.
On the Oak, Maple, and Spruce pages, put id="localemphasis" on the Trees parent menu item.
To control the emphasis from the CSS stylesheet, you won't need to go into each page, but you will ID each parent menu item.
Give each 'category' (Flowers, Trees) page a body ID to match the category
Every Flower page wants the Flower parent menu item emphasized, give all three Flower pages a body tag like this: <body id="flowers">
LIkewise, every Tree page wants the Tree parent menu item emphasized, as <body id="trees">
Within the menu itself and on ALL pages, give each parent menu item an id to correspond to its category
<li id="flowers_m">Flowers</li>
<li id="trees_m">Trees</li>
          I have added a "_m" to remind myself that it is the menu item's id. You might need to put the id on the <a> link if you have not used a list for your menu.
In your CSS stylesheet,
   #flowers #flowers_m,
     #trees #trees_m {background-color: red; color: white;}
Please use your own code! White on red might not be your cup of tea...use the same styling as the "hover" styling you mention in your query.
To interpret what we have just done, we have said
     make the background-color red and the text white
for the parent menu item Flowers (id="flowers_m") when you are on a Flowers page (body id="flowers")
and for the parent item Trees (id="trees_m") when you are on a Trees page (body id="trees").
This emphasis is good feedback for your user...remember that for SEO purposes, you will also want to use actual HTML text to reinforce the page environment, that is, h1 titles like FLOWERS and TREES. That will provide more feedback for your user.
Beth

Having issues linking spry menu bar to my other pages

Hey everyone,
I am brand new to web development. I am currently using the trial of DW and I must say I love it. I am having issues with my spry menu bar though. I will click on a certain box in the menu bar and use the properties page at the bottom and insert a link to another one of my webpages that I have created. However when I test my webpage, it will not be linked to it. Instead it is linked to #, or my index page. Now my domain name is: thecampuscocktail.com. I have created two other pages "feedback.html" and "speedydrinks.html" and even when I enter those manually into my browser (i.e. "thecampuscocktail.com/feedback.html") it gives me a page not found error. So I may be doing something incorrectly with uploading my pages however I have used the "put" option with all of them and I have used the "sync site wide" option. I am also using a template though that shouldn't affect it. Being brand new I know very, very little about coding. But here is the code to my template:
<!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=utf-8" />

<title>The Campus Cocktail</title>

<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div class="container">
<div class="header">
    <p><a href="../index.html"><img src="../images/newlogo.gif" alt="logo" width="331" height="189" class="logo" /></a></p>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Drinking Games</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Recipes</a>
        <ul>
          <li class="subsubmenu"><a href="#" class="MenuBarItemSubmenu">By Ingredient</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">By Type</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">By Form</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="../Pages/speedydrinks.html">Speedy Drinks</a>      </li>
      <li><a href="#">Drinks by Occasion</a></li>
      <li><a href="../index.html">Local Bars</a></li>
      <li><a href="../Pages/speedydrinks.html">Submit Your Own</a></li>
    </ul>
    <p> </p>
</div>
<div class="sidebar1">
    <ul class="nav">
    </ul>
    <p> Whats New:</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    
</div>
<div class="content"><span class="drinklabel">Drink Of The Day:</span>
      <p> </p>
      
</div>
<div class="footer">
    <p>                 © 2012 Brandon Hall</p>
    </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
any help will be appreciated! Sorry for the length of this post.

DW_Noobie wrote:
can anyone help
It depends. I can see your two pages as in this link:
<http://www.thecampuscocktail.com/speedydrinks.html>
<http://www.thecampuscocktail.com/feedback.html>
You need to describe what these issues are.

Multi-Color Spry Menu Bar

I want to create a multi-color spry menu bar by hand like the one on this page:
http://projectseven.com/products/menusystems/pmm2/multicolor.htm
Any tips?
Thx.

For those interested, I found a simple solution at Jim Cook's website, DWcourse.com:
The best thing to do would be to create a new style class, say “oddball” and apply it to the odd link like this:
<a href="#" class="oddball">Item 2</a>
Then create a new style in your style sheet named ul.MenuBarHorizontal a.oddball:hover and apply your hover formatting there. At the same time you might as well avoid the inline style (it’s better to avoid them if you can) and create a new style, ul.MenuBarHorizontal a.oddball to handle the normal state of the odd menu item.
You can read the entire thread here: http://dwcourse.com/dreamweaver/spry-menu-bars.php
Thanks.

Spry Menu Bar "clicking motion"

Hello,
I am struggling with find a CSS code (or some sort of code
for that matter) that will let me create a "clicking motion". I
have a Spry menu bar setup with a background image for standard
view, then one for when the image is highlighted. I am curious as
to how I can add a third image to appear when a button is actually
clicked (appearing as though the button was pushed into the
screen).
I also am wondering what is meant by the statement
"Background color when in focus". For reference,
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html#WS1FAAE9CA-F175-44e7-9499-8EA194F0636Ba
Thank you

Hello,
I am struggling with find a CSS code (or some sort of code
for that matter) that will let me create a "clicking motion". I
have a Spry menu bar setup with a background image for standard
view, then one for when the image is highlighted. I am curious as
to how I can add a third image to appear when a button is actually
clicked (appearing as though the button was pushed into the
screen).
I also am wondering what is meant by the statement
"Background color when in focus". For reference,
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html#WS1FAAE9CA-F175-44e7-9499-8EA194F0636Ba
Thank you

Spry Menu Bar Colors and Pictures in Dreamweaver

I'm having some trouble changing the color of the spry menu
bars that I created in Dreamweaver. Whenever I preview them in a
browser they show up as grey with black text. What I want them to
show up as is blue with white text before the mouse goes over them
and highlights them. When the mouse goes over them I want them to
still be blue with white text and also my drop down menu options as
well.
What would be the fastest and easiest way to do this and if
there is what css code is required for me to change? I'm unfamiliar
with how css code works.
I'm also having some problems with copying and pasting
pictures and editing them too. what software can i download that is
free that i can use to edit my pictures.
I have the trial version mind you and I'm trying to get this
finished as fast as I can.

> What would be the fastest and easiest way to do this and
if there is what
> css
> code is required for me to change?
Bring up your page and adjust the CSS in the
SpryMenuHorizontal.css or
SpryMenuVertical.css page that is attached. All the color
values are in
there.
>I'm unfamiliar with how css code works.
You need to change this. Without a thorough working knowledge
of HTML and
CSS (at the very least), you will never have great success in
either
Dreamweaver or web design. I first learned web design using
Notepad, typing
every single tag, and I am soo grateful now that I had that
solid coding
experience .. without it, this program would be very hard to
master.
> I'm also having some problems with copying and pasting
pictures and
> editing
> them too. what software can i download that is free that
i can use to edit
> my
> pictures.
Free? I'm not sure any more .. you can use either the 30 day
trial of
Fireworks or Photoshop (Fireworks would probably be easier to
pick up) but
if you're going to do a lot of this, you need to get some
good tools and
learn them well.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development

Edit Spry Menu Bar using Mouse Click

Hello…
I created a Spry Menu Bar and it's working just fine. But on phones and Tablets the submenu doesn't work because it's a mouseover, is it possible to change it to a mouse click?
Thanks!

Yes, but it needs a lot of JS coding to do so.
A better solution is to use a jQuery or pure CSS menubar or visit http://www.projectseven.com/ for a commercial version

Is there any way to disable the mouse-over function of the Spry Menu Bar (CS5)? Click-open preferred

Hello,
I'm using the standard CS5 Spry Menu Bar (Horizontal) in Dreamweaver. I have it set up exactly the way I want with CSS. However, I've very little experience with Javascript, consequently I'd like to ask anyone here for some help in modifying this aspect of the Spry Menu Bar. I'd like it to 'click-open' and not open when the mouse is over it. I've tried to change the delay variables in the code to something that has a longer duration in milliseconds; unfortunately, this tends to cause some bugs such as the menu re-opening once the mouse is no longer near it and other such bugs.
The ideal solution for me would be to have it open when it's clicked on once. The reason I need this is because the menu appears over some buttons - there's no way around this for me, it's the layout I absolutely must have. Although the buttons don't overlap with the menu, they are very close and it is annoying when your hand slips a little and the menu pops up over it all.
I'd appreciate any help at all, thank you.
PS:- The Javascript containing the delay variables I tried to modify.
Spry.Widget.MenuBar.prototype.init = function(element, opts)
    this.element = this.getElement(element);
    // represents the current (sub)menu we are operating on
    this.currMenu = null;
    this.showDelay = 250;
    this.hideDelay = 600;
    if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
        // bail on older unsupported browsers
        return;
    // Fix IE6 CSS images flicker
    if (Spry.is.ie && Spry.is.version < 7){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch(err) {}

Hello,
Thank you so much for replying so quickly and moreover, solving my problem. I must apologise for not doing more research about this issue by searching these forums more thoroughly. I found a similar post here:-
http://forums.adobe.com/message/139937#139937
Your solution goes one step further and eliminates the need to search through the Javascript for the relevant code.
Thank you again, you've helped me a great deal.
Best wishes,
foreverdusty.

Tri-color spry menu bar

Thank you for viewing my post!
I am having trouble editing the default spry menu bar .css file
How do I edit the spry menu .css file to display two different roll over colors for the menu and submenu?
My goal is to have a blue menu bar with gray rollover color, gray drop down submenus with their own orange rollover color.
I tried giving ul.MenuBarHorizontal li its own style but I think something else in the .css is preventing this (or my own skill is).
Thank you ahead of time to the kind soul who can help me with this!

Have a look at this David Powers tutorial http://foundationphp.com/tutorials/sprymenu/customize1.php
I hope this helps.
Ben

Clearing Spry Menu Bars within the website

How do I clear the spry menu bar values within a website. I am trying to create a horizontal spry menu bar on one page and then another horizontal one on another page. It keeps the same values everytime I create a new page. How do I clear the values for each page?
Thanks!

heatherfar69 wrote:
I am redesigning the website in the test environment using a new page. While doing so I am redoing the spry menu bar. It changed the spry menu bar in the original website (production environment). I would like to have the spry menu's be separate. How do you create separate spry menu bars for a situation as such?
Thanks!
If you are editing locally it should not overwrite your remote file unless you have the option "Automatically upload files to server on save" checked off. If that is the case you should uncheck that box.
If you want to further separate the old version from the new version, the only other method is to just create a new site. Even if you start with a duplicate of the existing site. Then you don't risk the chance of overwriting the existing files on the server.

I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar.
I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page. Can anybody look at this with me and let me know what changed to mess the page up on me.
Thanks a million.
Ted
site is located here http://www.subzerorefrigeration.com
None of the links are working I have just been playing with the spy menu for weeks. I finally figured it out and do not belive the error is in the spry style sheets.
Here is the code for my page. I know I am working with a template. I really do not want to start over if a <div> tag is missing.
Any other suggestions would be appreciated.
<!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=utf-8" />
<title>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration "Subby" Logo">
      <param name="movie" value="Images/SubbyMovie.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="7.0.70.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="7.0.70.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
    <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
</div>
<div class="container" id="navbar"> </div>
<div class="namephoto">
<ul id="MenuBar" class="MenuBarHorizontal">
   <li><a class="MenuBarItem" href="#">Home</a></li>
   <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
         <ul>
           <li><a href="#">Bud Wagner</a></li>
           <li><a href="#">Tim Wagner</a></li>
           <li><a href="#">Dave Allen</a></li>
           <li><a href="#">Terry Burke</a></li>
           <li><a href="#">Larry Skarr</a></li>
           <li><a href="#">Niko Opla</a></li>
           <li><a href="#">Gina Ames</a></li>
           <li><a href="#">Laura Kane</a></li>
         </ul>
       </li>
       <li><a href="#">Our Service Area</a></li>
       <li><a href="#">Our Mission Statement</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
         <ul>
           <li><a href="#">Our Review's</a></li>
           <li><a href="#">Our Competition's Reviews</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
         <ul>
<li><a href="#">HVAC Technician</a></li>
<li><a href="#">HVAC/R Installer</a></li>
<li><a href="#">Commercial Refrigeration Technician</a></li>
         </ul>
       </li>
       <li><a href="#">Testimonials</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
         <ul>
           <li><a href="#">On "YAHOO"</a></li>
           <li><a href="#">On "YELP"</a></li>
           <li><a href="#">On "MERCHANT CIRCLE"</a></li>
           <li><a href="#">On "GOOGLE PLACES"</a></li>
         </ul>
       </li>
</ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning </a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Schedule A Service Call</a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace </a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Financing</a></li>
       <li><a href="#">Schedule a "FREE" Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
     <ul>
<li><a href="#">Commercial Refrigeration Service Agreements</a></li>
<li><a href="#">Commercial Rooftop Service Agreements</a></li>
<li><a href="#">Commercial Ice Machine Service Agreements</a></li>
<li><a href="#">Residential Air Conditioning Service Agreements</a></li>
<li><a href="#">Residential Boiler Service Agreements</a></li>
<li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
<li><a href="#">Heat Pump Service Agreements</a></li>
</ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Products</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
         <ul>
           <li><a href="#">Beverage Air</a></li>
           <li><a href="#">Beacon Smart Controller</a></li>
           <li><a href="#">Continental</a></li>
           <li><a href="#">Crown Tonka Walk Ins</a></li>
           <li><a href="#">Delfield</a></li>
           <li><a href="#">Heatcraft Refrigeration</a></li>
           <li><a href="#">Hoshizaki Refrigeration</a></li>
<li><a href="#">International Cold Storage</a></li>
<li><a href="#">Kelvinator</a></li>
<li><a href="#">Kolpak</a></li>
<li><a href="#">Larkin Refrigeration</a></li>
<li><a href="#">Perlik Bar and Beverage Equipment</a></li>
<li><a href="#">True Refrigeration</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
         <ul>
           <li><a href="#">Hoshizaki Ice Machines</a></li>
           <li><a href="#">Manitowoc Ice Machines</a></li>
           <li><a href="#">Scotsman Ice Machines</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
         <ul>
           <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
           <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
           <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
         </ul>
     </li>
       <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
         <ul>
           <li><a href="#">Weil McLain Residential</a></li>
           <li><a href="#">Weil McLain Commercial</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
         <ul>
           <li><a href="#">Aprilaire Humidifiers</a></li>
           <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
           <li><a href="#">Honeywell Thermostats</a></li>
         </ul>
   </li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
     <ul>
       <li><a href="#">Monthly Specials</a></li>
       <li><a href="#">Manufacturers Rebates</a></li>
       <li><a href="#">Utility Rebates</a></li>
       <li><a href="#">Website Coupons</a></li>
<li><a href="#">Customer Referral Program</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Social</a>
     <ul>
       <li><a href="#">"LIKE" Us on Facebook</a></li>
       <li><a href="#">"FOLLOW" Us on Twitter</a></li>
<li><a href="#">Facebook Disclaimer</a></li>
     </ul>
</li>
<li><a class="MenuBarItem" href="#">Contact Us</a> </li>
</ul>
<p><br />
</p>
<div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
<div class="content">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h1>Clearing Method</h1>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
    </div>
<div class="footer">
    <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="102" scope="col"> </th>
        <th width="101" scope="col"> </th>
        <th width="106" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="172" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="103" scope="col"> </th>
        <th width="136" scope="col"> </th>
      </tr>
      <tr>
        <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
        <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
      </tr>
    </table>
</div>
<div class="footer2">
    <div class="footer">
    <table width="960" height="62" border="1" align="center" cellspacing="8">
      <tr valign="middle">
        <th width="234" scope="col">Schedule a Service Call</th>
        <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
        <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
        <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
        <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
        <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
        <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
      </tr>
    </table>
    </div>
    <div class="footer3" id="footer3">
      <div class="footer">
        <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home | About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
            Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
          </tr>
        </table>
        <p>      Copyright 1999-2013 | Last updated on
          February 19, 2012 | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>

I seem to have fixed it by putting <div class="clearfloat"></div> after the navigation bar?

Clicked Link Color Within Spry Menu Bar

Similar Messages

Maybe you are looking for