Horizontal menu question

Hi, I am trying to create a horizontal menu. No problems so far. But how do I create a horizontal menu that consist of two lines?
For example, I have the menu items: Home | Work | Project management | Lins | Contact. So I am trying to get the "project management" item on two lines.
Something like this:
Project
Management
Chears, Larry

This is the name of the forum I selected "General discussion of Dreamweaver, web design, CSS", so you think it should be where?

Similar Messages

How do I change vertical menu to a horizontal menu in Dreamweaver CS5?

Doing a website (my first) for a friend of mine. Followed the Adobe tutorial for a lot of it (with Paul Trani) and have everything done but now my friend wants the menu bar to be horizontal instead of vertical. (I have other questions but this is the big one for now) I do have a CSS file that is linked to all 4 pages. I have hunted and searched to no avail. The page started out as a template (2 column fixed, left sidebar, header and footer). I am hoping I just have to paste some code into it and have found a few suggestions on the web but nothing seems to work. I did get it to the point with a list with no bullets with no background but can't get it to go horizontal. Then code started showing up on my design page and I gave up and turned to this forum. I would hate to start over. I do not even see a template that has a horizontal menu on it for one of the choices. Any help would be greatly appreciated.

I think you are confused about how to differentiate between horizontal navigation and vertical navigation.
In HTML, both are exactly the same. You use a list. So both will be just like you describe them:
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, there's your navigation. Done. So how do we do an horizontal nav? Well we tell web browsers to format our HTML code in a style sheet, called a Cascading Style Sheet, or CSS. So let's give the <ul> a tag that tells the browser that it's not just a simple unordered list; it's special and has to be set up a certain way:
<ul id="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, let's go to our style sheet and create the style for the id "nav." And remember, anything with an ID on a web page must occur only once. If you're going to have several "nav" tags on your page, you have to make a class. The difference (in CSS) between a class and an id is the use of a hash "#" for an id and a dot "." for a class.
So here's the CSS for the horizontal navigation:
#nav {
          width: 100%;
          float: left;
          margin: 0 0 3em 0;
          padding: 0;
          list-style: none;
          background-color: #f2f2f2;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc;
#nav li {
          float: left;
#nav li a {
          display: block;
          padding: 8px 15px;
          text-decoration: none;
          font-weight: bold;
          color: #069;
          border-right: 1px solid #ccc;
#nav li a:hover {
          color: #c00;
          background-color: #fff;
Here you're floating both the list and the list items left. Floating the list items left is what pulls them into a nice horizontal row, stacking the items from left to right. However, because of how floats behave, the containing list will collapse to a height of zero unless it is also floated left.
And that wouldn’t be a major problem, except the list has a background color and if the list collapses, that background color won't show. This way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
Additionally, the only margin you see will be the bottom one, so the list items will make their own margins and behave themselves. The list-style is set to “none,” which removes the bullets.
Now all navigation will certainly be a link, so I style the list items that are links (#nav li a) with padding that will space them out, get rid of the default underline, setting the text decoration to none, making them bold and creating a thin right border. Then I change the color on the nav for a hover.
Now, vertical is the default for a list.
Here's the difference:
You keep list-style: none;
You get rid of your floats.
You get rid of the 100% width, unless you have it corralled in a containing div, like a left or right sidebar.
Boom! you're done.
-Mark

Nube needs help inserting a JQuery horizontal menu bar into my site-help.

Please forgive the ignorance of my questions but I am new to Mobile site design and Dreamweaver.
I am trying to build a responsive web site for my company that can be viewed on multiple platforms, but am having trouble inserting a responsive menu and responsive slide show.
This post is in regard to the menu bar, which I have created using JQuery on a seperate page. I have managed to get the layout to work but still can't figure out how to create mouse overs for the links
or how to insert it into my site.
Please help.
Why can't I see the nav bar in the site when I paste in?
All I see is the text and no images. I know I am pasting the code in the wrong place.
Where do I insert it?
Below is the code for the site and below that is the code for the menu bar.
Where do I insert it? Help.
Thank you in advance for any help you can provide.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
    <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar">ul#navlist { font-family: <span class="navfont">sans-serif</span>; }
ul#navlist a
font-weight: bold;
text-decoration: none;
ul#navlist, ul#navlist ul, ul#navlist li
margin: 0px;
padding: 0px;
list-style-type: none;
ul#navlist li { float: left; }
ul#navlist li a
color: #ffffff;
background-color: #<span class="navmainbg">003366</span>;
padding: 3px;
border: 1px #ffffff outset;
ul#navlist li a:hover
color: #ffff00;
background-color: #<span class="submenubg">003366</span>;
ul#navlist li a:active
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
ul#subnavlist li a
padding: 0px;
margin: 0px;
ul#navlist li:hover ul#subnavlist
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
ul#navlist li:hover ul#subnavlist li a
display: block;
width: 10em;
border: none;
padding: 2px;
ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
Read more: How to Make a Rollover Drop-Down Menu | eHow http://www.ehow.com/how_8569816_make-rollover-dropdown-menu.html#ixzz2WZQ3IDmU</div>
<div id="slideshow">
<div id="slideshow">
    <div align="center">
      
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 1225px; height: 400px; position:relative; text-align: left;" data-erConfig="{autoplayEnabled:true, randomize:true, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, audio_controllerLocation:'br', lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-77-97-99-50-47-68-111-99-117-109-1 01-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-11 2-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-erName="slideshow rotator" data-erTID="{hg3ysjwkx61418058007631}">
          <div data-ertype="content" style="display: none;"><ul data-erlabel=>
          <li>
                    <img class="main" src="_images/Site Objects/fades how/lrg_images/image09-turn.png" />
                    <img class="thumb" src="_images/Site Objects/fadess how/lrg_images/image09-turn.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/fades how/lrg_images/image08-ss.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image08-ss.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image07-posters.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image06-photo_ed.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image05-nwsmag.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image04-litigation.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image03-creative.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image02-corp.png" />
          </li>
          <li>
                    <img class="main" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
                    <img class="thumb" src="_images/Site Objects/slides how/lrg_images/image01-bound.png" />
          </li>
</ul>
</div>
          <div data-ertype="layout" data-ertemplateName="NONE" style="">                              <div class="erdots" style="overflow: hidden; margin: 0; position:absolute;right:0;top:9px;width:300px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans', Arial, _sans; color: #FFF;" data-erConfig="{showText:false}" align="center">
                                        <div class="erdots_wrap" style="wasbackground-color: #CFC; float: right;" align="left"> 
                                                  <span class="erdots_btn_selected" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: default; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                  </span>
                                                  <span class="erdots_btn_normal" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_35.png) top left no-repeat;">
                                                  </span>
                                                  <span class="erdots_btn_hover" style="padding-left: 0; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin: 0 0 0 5px; cursor: pointer; background: url(http://easyrotator.s3.amazonaws.com/1/i/rotator/dots/export/20_14_black_65.png) top left no-repeat;">
                                                  </span>
                                        </div>
                              </div>
                              <div class="ercats erFixCSS3" style="position:absolute; left:0; right: 320px; top: 0;" style_real="padding: 4px 8px; font-family: 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, _sans; font-size: 11px; color: #333; wasmargin: 0 50px 10px 50px; wasborder-radius: 6px; wasbackground-color: #EEE; wasborder: 1px solid #E0E0E0; overflow: hidden;">
                                        <div align="center">
                                          
                                </div>
                                        <div class="ercats_btn_selected erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; background-color: #FFF; box-shadow: 0 0 2px #999; wasborder: 1px solid #CFCFCF; color: #555; margin: 3px 9px 3px 0; cursor: default;">
                                          <div align="center">Title1 </div>
                                  </div>
                                        <div class="ercats_btn_normal erFixCSS3" style_real="float: left; padding: 3px 8px 4px 8px; border-radius: 4px; color: #666; cursor: pointer; margin: 3px 9px 3px 0;">
                                          <div align="center">Title2 </div>
                                        </div>
                              </div>
                              <div class="erimgMain" style="position: absolute; left:0; right:0; top:40px; bottom:0;" data-erConfig="{___numTiles:3, scaleMode:'fillArea', imgType:'main', __loopNextButton:false, arrowButtonMode:'rollover'}">
                                        <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
                                                  <div class="erimgMain_slide">
                                                            <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
                                                  </div>
                                </div>
                                        <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                                        <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -30px;" data-erConfig="{image:'circleBig', image2:'circleBig'}"></div>
                    </div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;">
                              This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com.
                              <br /><br />
            Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds.
                              <br /><br />
                              <a style="color:#FFF;" href="#" class="erabout_ok">OK</a>
                    </div>
                    <noscript>
                              Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
                    </noscript>
                    <script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
          </div>
</div>

      <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
    </div>
</div>
</div>
<div id="body">
    <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
    <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>
Below is the code for the JQuery menu with sub and secondary sub menus:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexNav - Flexible, Device Agnostic Navigation</title>
    <link href="css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
    <style type="text/css">
    body,td,th {
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 14pt;
    body {
          background-color: #FFF;
    a:link {
          color: #FFFFFF;
          text-decoration: none;
a:visited {
          color: #FFF;
          text-decoration: none;
    a:hover {
          color: #F00;
          text-decoration: none;
a:active {
          color: #900;
          text-decoration: none;
    </style>
    <script type="text/javascript" src="//use.typekit.net/qyb8ood.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body bgcolor="#FFFFFF" vlink="#FF0000" alink="#990000" class="home-page">
<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
    <div class="container">
      <header id="site-header">
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="HOME">HOME</a>
            <li><a href="About Us">ABOUT US</a>
            <li><a href="Products">PRODUCTS</a>
              <ul>
                <li><a href="Bound Products">Bound Products</a>
                  <ul>
                    <li><a href="Booklets">Booklets</a></li>
                    <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                    <li><a href="Newsletters">Newsletters</a></li>
                    <li><a href="Presentation Books">Presentation Books</a></li>
                    <li><a href="Manuals">Manuals</a></li>
                  </ul>
                </li>
              <li><a href="Brochures">Brochures</a></li>
                <li><a href="Business Cards">Business Cards</a></li>
                <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                <li><a href="Copies">Copies</a></li>
                <li><a href="Corp. ID">Corporate ID</a></li>
                <li><a href="Flyers">Flyers</a></li>
                <li><a href="Forms">Forms</a></li>
                <li><a href="Menus">Menus</a></li>
                <li><a href="Photo Collages">Photo Collages</a></li>
                <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                <li><a href="Postcards">Postcards</a></li>
                <li><a href="Rack Cards">Rack Cards</a></li>
                <li><a href="Wide Format">Wide Format</a>
                  <ul>
                    <li><a href="Banners">Banners</a></li>
                    <li><a href="Posters">Posters</a></li>
                    <li><a href="Signs">Signs</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="Services">SERVICES</a>
              <ul>
                <li><a href="Litigation">Litigation Services</a></li>
                <li><a href="Creative">Creative Services</a></li>
              </ul>
            </li>
            <li><a href="FAQs">FAQs</a>
            <li><a href="Contact Us">CONTACT US</a>
          </ul>
        </nav>
      </header>
      \ </div>
    <script type="text/javascript">$(".flexnav").flexNav();</script>
</body>
</html>

Ok, I managed to place the menu within the site, but I still don't have a horizontal menu. All I can see is the unordered list.
(see below).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<title>Home Page</title>
<meta name="view" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9 />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/master.css" rel="stylesheet" type="text/css">

<script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
<style type="text/css">
img {margin:6px; border:solid 2px #FFF;}
img:hover {background: #666;}
</style>
<link href="styles/navbar stylesheet new.css" ref="stylesheet" type="text/css" />
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">
    <div align="center"><img src="images/Site Objects/headermain.png" alt="header"></div>
</div>
<div id="navbar"><script src="http://code.jquery.com/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery.flexnav.min.js" type="text/javascript"></script>
    <div class="#"
        <div class="menu-button"></div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="HOME">HOME</a>
            <li><a href="About Us">ABOUT US</a>
            <li><a href="Products">PRODUCTS</a>
              <ul>
                <li><a href="Bound Products">Bound Products</a>
                  <ul>
                    <li><a href="Booklets">Booklets</a></li>
                    <li><a href="Catalogs & Magazines">Catalogs & Magazines</a></li>
                    <li><a href="Newsletters">Newsletters</a></li>
                    <li><a href="Presentation Books">Presentation Books</a></li>
                    <li><a href="Manuals">Manuals</a></li>
                  </ul>
                </li>
              <li><a href="Brochures">Brochures</a></li>
                <li><a href="Business Cards">Business Cards</a></li>
                <li><a href="CD & DVD Dupe">CD & DVD Duplication</a></li>
                <li><a href="Copies">Copies</a></li>
                <li><a href="Corp. ID">Corporate ID</a></li>
                <li><a href="Flyers">Flyers</a></li>
                <li><a href="Forms">Forms</a></li>
                <li><a href="Menus">Menus</a></li>
                <li><a href="Photo Collages">Photo Collages</a></li>
                <li><a href="Photo Enlargements">Photo Enlargements</a></li>
                <li><a href="Postcards">Postcards</a></li>
                <li><a href="Rack Cards">Rack Cards</a></li>
                <li><a href="Wide Format">Wide Format</a>
                  <ul>
                    <li><a href="Banners">Banners</a></li>
                    <li><a href="Posters">Posters</a></li>
                    <li><a href="Signs">Signs</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="Services">SERVICES</a>
              <ul>
                <li><a href="Litigation">Litigation Services</a></li>
                <li><a href="Creative">Creative Services</a></li>
              </ul>
            </li>
            <li><a href="FAQs">FAQs</a>
            <li><a href="Contact Us">CONTACT US</a>
          </ul>
        </nav>
      </header>
      </div>
    <script type="text/javascript">$(".flexnav").flexNav();</script>
</div>
<div id="body">
    <div align="center"><img src="images/page templates/home pg tmplt blnk.png" alt="body"></div>
</div>
<div id="footer">
    <div align="center"><img src="images/Site Objects/footermainbck.png" alt="footer"></div>
</div>
</div>
</body>
</html>

Horizontal Menu Bar Help Needed

Hi there, I am somewhat new to web design but I've been helping a friend update his business's page recently. We use Dreamweaver CS3 and our hosting is thru GoDaddy.
My problem appears when I try to insert a horizontal menu bar (Insert>Spry>Menu bar) so that a dropdown menu will appear when I hover over an option, much like the top menu on the GoDaddy homepage, among others. It works correctly when I preview my page in a browser from Dreamweaver, (Firefox, IE) but when I actually upload my page to the GoDaddy servers and view it, it shows up not as a bar with hidden options, but as a long unformatted vertical list.
The site in question is here: http://www.notyouraveragebookkeeper.com/indextabs
I thought it might be a problem with CSS, but I made sure that all of the style sheets are properly uploaded to the servers, and I made sure that my browser accepted any Javascript applets. I've also tried it with my Dreamweaver CS5 trial. Like I said, I am an amateur in every sense of the word and I'm still learning technical terms for things so some of my jargon may be a bit flawed. I have done a good bit of online research in forums and otherwise, and I've tried solutions that have been given to similar problems. Maybe someone could view the source code and find out where I've gone wrong, or suggest tips to identify problems in Dreamweaver. I feel like the problem lies within the Spry framework, but I have very little knowledge on how it works or what it does.
Any assistance in this regard would be extremely helpful and appreciated.

Neither SpryMenuBar.js and SpryMenuBarHorizontal.css can be found by your online site.
Possibly these have not been uploaded or uploaded to a wrong location.
Gramps

Another SPRY horizontal menu problem with IE7

I posted this before, with no responses, but I think
I've narrowed it down to a CSS response problem with IE7.0. If you
view the attached link in Firefox or Opera, the menu background
color responds correctly on the drop downs. In IE7, the
background-color is ignored, causing the menu to be translucent
and, uh, ugly. Has anyone else had an issue with the
background-color CSS attribute in the SPRY horizontal menu css not
working?
HELLLLLP! and, uh, Thanks,
Karl
Prototype
link using spry, css, ajax sprites and other magic.

>>
Regrettably, the silence from the forum has been deafening.
I'm not sure if folks are just wary of SPRY and AJAX issues right
now because they're so new or if it's the summer heat
>>
guess it´s all of that :-) But folks visiting these more
"general" Dreamweaver forums are not necessarily Spry experts
respectively might not even be interested in that -- you´ll
certainly get more response when posting Spry related questions in
the
Spry
forums @ Adobe Labs

Spry Horizontal Menu Submenus Won't Appear - Help

OK, I have a Spry Horizontal Menu Bar done through DW CS5. The root menu items work just fine. And the arrow graphics indicating there are submenus are shown, however when you hover over the main menu item the submenus do not appear in browser preview. The spry menu bar is located in the header div above a main content div and a sidebar div (two column layout). Interestingly enough if I drop a new menu bar in the main content div with sample submenus it works fine, so the css file must be ok because they both read off the same css file.
My only assumption is there is something in the header code which conflicts with the submenus and is not allowing the submenus to appear. Unfortunately I can't post it only in a test location as I am reworking an existing website and when I post the new css file it will obviously change the existing website.
But here is some of the relevant code. First the HTML for the section in question.
I very much appeciate any advice.
Home
Biography
Blog
Riding
Resources
Provincial
Municipal
Federal
Education
Community
International
Liberal Party
Media
News Releases
Newsletters
Columns
Photo Gallery
Multimedia
RSS Feeds
Contact
Now the CSS for the menu bar:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal {      margin: auto;      padding: 0;      list-style-type: none;      font-family: "Times New Roman", Times, serif;      font-size: medium;      font-weight: bold;      cursor: default;      width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive {      z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li {      margin: 0;      padding: 0;      list-style-type: none;      font-size: 100%;      position: relative;      text-align: center;      cursor: pointer;      width: 108px;      float: left;      } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul {      margin: 0 0 0 50%;      padding: 0;      list-style-type: none;      font-size: 80%;      z-index: 1020;      cursor: default;      width: 108px;      float: none;      position: absolute;      left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {      left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li {      width: 108px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul {      position: absolute;      margin: -5% 0 0 95%;      z-index:1030; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {      left: none;      top: 0;      z-index:1040; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul {      border: 1px solid #CCC;       } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a {      display: block;      cursor: pointer;      background-color: #000;      padding: 5px 5px;      color: #FEFEFE;      text-decoration: none;       } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {      background-color: #323232;      color: #FEFEFE; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {      background-color: #323232;      color: #FEFEFE; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarDown.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {      background-image: url(SpryMenuBarRight.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarDownHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {      background-image: url(SpryMenuBarRightHover.gif);      background-repeat: no-repeat;      background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe {      position: absolute;      z-index: 1010;      filter:alpha(opacity:0.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;      } }
And lastly the Css code for the whole thing...
@charset "utf-8"; body {      font-family: Verdana, Geneva, sans-serif;      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */      padding: 0;      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */      }       .twoColFixLtHdr #container {      width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */      margin: 0 auto auto auto; /* the auto margins (in conjunction with a width) center the page */      border: 2px solid #000;      text-align: left; /* this overrides the text-align: center on the body element. */      }       .twoColFixLtHdr #header {            padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */      border: 0px solid #000;             } .twoColFixLtHdr #header h1 {      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */      padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */       } .twoColFixLtHdr #sidebar1 {      float: left; /* since this element is floated, a width must be given */      width: 200px;      font-size:12px;      color:#FEFEFE;      background: #000;      border-top-width: 1px;      border-right-width: 2px;      border-bottom-width: 2px;      border-left-width: 1px;      border-top-style: solid;      border-right-style: solid;      border-bottom-style: solid;      border-left-style: solid;      border-top-color: #000;      border-right-color: #660000;      border-bottom-color: #000;      border-left-color: #000;      padding-top: 1px;      padding-right: 0px;      padding-bottom: 1px;      padding-left: 1px; } .twoColFixLtHdr #mainContent {      margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */      background:#660000;      } .twoColFixLtHdr #videomainContent {      margin: 0 0 0 200px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */      background: #323232;      padding-left:100px      } .twoColFixLtHdr #singleframe {      background: #323232;      }       .twoColFixLtHdr #footer {      padding: 0 10px 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */      font-size:12px;      color:#FEFEFE;      background:#000;      border: 1px solid #000;            } .twoColFixLtHdr #footer p {      margin: 0 0 0 270px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */      padding: 20px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ } .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } br{font-size:10px} a:link {color:#FEFEFE} a:visited {color:#FEFEFE} a:hover {text-decoration:none;} #mainContent a:link {color:#000; text-decoration:none} #mainContent a:visited {color: #000; text-decoration:none} #mainContent a:hover {      text-decoration:underline; } #mainContent a:active {color:#000;text-decoration:none} .red{     color:#4C0000;} .w1{font-size:14px;     color:#FEFEFE;} .w2{font-size:12px; color:#FEFEFE;} .w3{font-size:large; color:#FEFEFE;} .b1{font-size:14px; color: #000; font-weight:bolder} .sidehline{      float: left; /* since this element is floated, a width must be given */      width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */      padding: 0px 0px 0px 0px; }       .b{font-size:12px; color:#000000; } .topbtmmargin {      margin-top: 20px;      margin-bottom: 20px; } .SidebarPadding {      padding-top: 0px;      padding-right: 10px;      padding-bottom: 0px;      padding-left: 10px; } .FrontImage {      border: 5px ridge #323232;      float: left;      margin-right: 10px;      margin-bottom: 10px;      margin-top: 0px; } .FrontImageFltRgt {      border: 5px ridge #323232;     float: right;      margin-left: 10px;      margin-bottom: 10px;      margin-top: 20px; } .mapRgt {      float: right;      padding-left: 5px;      padding-bottom: 10px;      border: none;       } .sigRgt {      float: right;      padding-left: 5px;      margin-right: 60px;      padding-bottom: 10px;      margin-top: 10px;       } .textfntrgtcol {      padding-left: 200px;      font-size:12px;      color:#000000; } .textfntlftcol {      padding-right: 210px;      font-size:12px;      color:#000000; } .twoColFixLtHdr #container #mainContent ul li {      list-style-type: none;      list-style-position: outside;      list-style-image: url(images/blackbullet.gif); } .leftpicture {      border: 5px ridge #323232;      position: absolute;      z-index: 20;      height: 140px;      width: 180px;      margin-top: 10px;      margin-right: 10px;      margin-bottom: 10px;      margin-left: 210px;      left: 150px;      top: 326px; } img {      border-style: none; } .grooveimg {      border: groove; } #apDiv1 {      position:absolute;      width:200px;      height:115px;      z-index:1;      left: 0px;      top: 0px;      visibility: visible; } #apDiv2 {      position:absolute;      width:155px;      height:123px;      z-index:2;      left: 5px;      top: 4px;      visibility: visible; } #apDiv3 {      position:absolute;      width:335px;      height:122px;      z-index:3;      left: 173px;      top: 3px;      visibility: visible;      color:#FEFEFE; } #apDiv3 a:link {color:#FEFEFE} #apDiv3 a:visited {color: #FEFEFE} #apDiv3 a:hover {text-decoration:none;} #apDiv3 a:active {color:#FEFEFE} #apDiv4 {      position:absolute;      width:120px;      height:45px;      z-index:4;      left: 390px;      top: 105px;      visibility: visible; } #apDiv5 {      position:relative;      width:200px;      height:115px;      z-index:5; } .menubarWrapper {      background-color: #000;      float: left;      width: 100%; }

Move the constructor for the menu bar up to read as follows
<script type="text/javascript">

</script>
Gramps

Horizontal Menu Bar - 2 issues

Hello, I have been here asking questions before and I still
have a couple more.
I am using the horizontal menu bar with the spry 1.5
pre-release files.
LINK
2 things, first:
I want the submenu text to be smaller than the menu text,
i.e. menu text should be 11px and submenu should be 10px, I just
cant seem to rustle it out of the css to make it happen.
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
font-size:10px;
the bold addition does not seem to be working.
Secondly:
When this menu is viewed in IE7 it looks as if the border is
sunken/iframe is being used, and there is the text "
false" located inside the submenu.
I have commented out the hacks in the css for IE to no avail.
Wondering why the border looks so weird and the word false is being
imposed on my submenu
Thanks in advance

To change the font-size, try placing the font-size property
on the <a> element of the submenus.
The IE7 sunken/iframe problem is a hack that is necessary to
make the submenus appear above any native windows (Flash, Selects,
etc) that may be in the browser window. It's showing because you
removed the background color off of the <a> elements. Try
making the <li> or the <a> background color white and
it should hide the iframe.
ul.MenuBarHorizontal ul li {
background-color: white;
border-bottom: solid 1px white; /* Workaround IE Gap bug */
ul.MenuBarHorizontal ul a {
font-size:10px;
I also noticed that your menus were suffering from the
infamous link in list gap IE bug. You can either remove *all*
whitespace in your lists to get around the bug *or* use the bottom
border property like I did above.
--== Kin ==--

Horizontal Menu - Submenu position

I have delayed the new version of my site because I was
looking for the solution, but now, I couldn't wait anymore and it
is online with the following problems on the horizontal menu bar:
1- On IE, the submenus' position is wrong and becomes
vertical when mouse is hovering.
2- On all browsers (those I could test, at least) the second
level of submenus appears above the first level, hiding it. (see
"amateur" submenus for exemple)
My website: www.thebaysoccer.com
in case it helps, I copied the css below.
Thanks in advance for your help! Sorry if the question looks
stupid, but I'm learning and I didn't know anything about HTML when
I started the site...Any help would be appreciated!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, an auto width box
with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
cursor: default;
width: auto;
font-family: "Arial Rounded MT Bold";
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the
screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
background-color: transparent;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #333;
padding: 0.5em 0.75em;
color: #EEE;
text-decoration: none;
text-align: left;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #ef3121;
color: #000000;
width: auto;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
background-color: #ef3121;
color: #000000;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
width: auto;
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* 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: #333333;

Anybody can help?

Spry Horizontal Menu not displayed correctly in Internet Explorer 6

Hello to everyone. I'm creating a website using David's tutorial. My Spry Horizontal Menu is correctly shown in Dreamweaver Live View, Firefox10 but not in IE6. It happears at the bottom of the page. Any advise? Thanks much in advance. Cecilia

Hello Cecilia,
please have a look here: http://gs.statcounter.com/#browser_version-ww-monthly-201201-201202-bar where you can see that this browser (IE6 ) is no longer in use and might not be used anywhere anymore.
And so you should not worry about this. But if it does please send a link to your website in question.
... and what's about the newer IE?
Hans-Günter

Spry horizontal menu titles

Ok here is my problem. I am using the spry horizontal menu and am trying to make a list of drop down menus. Rather than having sub menus that have flyout child menus I just want to have a list of menus that have titles.
Basically What I want would be something like this
Header
Title
     Link
     Link
     Link
Title2
     Link
     Link
     Link
rather than:
Header
Title >   Link
            Link
            Link
Title2 > Link
            Link
            Link
However, I can't figure out how to make my titles just be plain titles, rather than links. As it stands, when I hover over my titles, spry can't differentiate them from the actual links that will go to different pages.
I don't really care if they are still links, I can work around that. I guess my question is, is there a way to change the CSS so that some of the submenus look different then others
(ex. titles don't change font or background color but the rest of them highlight in blue)
Hope this makes sense,
Thanks in advance

Something like this?
<ul id="MenuBar1" class="MenuBarVertical">
Title
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul id="MenuBar2" class="MenuBarVertical">
Title 1
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
I hope this helps.
Ben

Project Seven Horizontal Menu Bar

QUESTION
What must I do to get individual menu items to fill the width
of a document?
BACKGROUND
Recently I switched from a SRPY horizontal menu bar to a
Project Seven horizontal menu bar. After substantial manipulation
of this latter I have achieved all of my goals except for one --
individual menu items that expand to fill the width of the page.
For the moment everything is crowded to the left.
Unfortunately every tweek of which I can think to adjust the
menu bar results in disaster. Perhaps there is a combination of
tweeks that I must apply simultaneously that I simply do not know.
This is a really clean page that has been validated for both
HTML and CSS.
The WEBPAGE
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.html
Roddy

http://www.maxdesign.com.au
has some nice ones....
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
==================
"Al Sparber - PVII" <[email protected]>
wrote in message
news:[email protected]...
> Hi Roddy,
>
> You'll need to lay out the page a bit differently so
that the menu bar is
> part of the main column. Since you are using Adobe CSS
it is problematic.
> You might want to check a few online CSS positioning
tutorials for some
> better approaches to doing a 2-column flexible layout.
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> The Finest Dreamweaver Menus | Galleries | Widgets
>
http://www.projectseven.com/go/pop
> The Ultimate DW Menu System
>
>
>
>
> "kiusau" <[email protected]> wrote in
message
> news:[email protected]...
>>
quote:
Since your layout is flexible rather than fixed-width, the
only way to
>> get
>> those links to stretch so that they
>> fill the available would be to assign a percentage
width to each root
>>
>> element.
>>
>> The following adjustments fail:
>>
>>
CSS CODE
>>
>> #p7menubar li {
>> float: left;
>> width: 17%;
>> }
>> #p7menubar #previous li {
>> float: left;
>> width: 16%;
>> }
>> #p7menubar #next li {
>> float: left;
>> width: 16%;
>> }
>>
>>
HTML CODE
>>
>> <div id="menuwrapper">
>> <ul id="p7menubar">
>>
>> <li id="preview"><a
href="#">Previous</a></li>
>> <li id="view"><a href=""
>>
onclick="openFunctionalityWindow()">Viewing</a></li>
>>
>> <li id="copyright"><a class="trigger"
href="#">Copyright</a>
>>
>>
<a href="#">Author</a></li>
>>
<a href="#"
>>
onclick="openCitationWindow()">Citation</a></li>
>>
<a href="#">Plagiarism</a></li>
>>
<a href="#">Sources</a></li>
>>
>> </li>
>>
>> <li id="print"><a class="trigger"
href="#">Print</a>
>>
>>
<a href="#" onclick="printPage()">This
Page</a></li>
>>
<a href="#">Entire Document</a></li>
>>
>> </li>
>>
>> <li id="contact"><a
href="mailto:[email protected]">Contact</a></li>
>>
>> <li id="next"><a
href="#">Next</a></li>
>>
>>
>> <br class="clearit" />
>> </div>
>>
>>
A POTENTIAL SOURCE OF CONFLICT?
>>
>> Please look at the unadjusted page again and notice
(visually it is
>> impossible) that the <div> tag containing the
menu bar extends across the
>> entire width of the page including that portion
contained by the sidebar.
>> I am
>> guessing that your suggested adjustments might work,
if the menu bar
>> could be
>> made to begin after the sidebar. The current
<div> structure is
>>
>> <div id="sidebar1"></div>
>> <div id="menuwrapper"></div>
>> <div id="maincontent"></div>
>>
>>
WEBPAGE
>>
>>
>>
http://homepage.mac.com/moogoonghwa/Imagine_Prototype/Contents/utility/practice.
>> html
>>
>> Roddy
>>
>

Spry horizontal menu widget individual item control

In my horizontal menu there are 4 main items. Can I change
one of the items background color to green?
I got no reply... Let me try to be more specific...
http://www.appliedbrain.com/sprytest.html
On this page above, is it possible to make one of the main
item buttons a different color ( for example: the button that says
green)? Is this within the limitations of the spry widget?
Thank you,
-Nance

dwdivazona wrote:
First of all, I realize that there is discussion forum specifically for Spry but when I checked it out, it looks like those questions get very few replies.
There's a very good reason for that. Adobe announced in August that it no longer plans to invest in the development of Spry (see http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l).
Before attempting to customize a Spry menu, you should also be aware that the version embedded in Dreamweaver displays problems with IE 8 and above.
Quite honestly, you would be better off looking for an alternative menu system.

Active State not working in Horizontal Menu Bar

I have a Horizontal Menu Bar.
I've set the Top Level Item with Normal, Rollover, Mouse Down and Active States to be different.
All three work on the Top Level Item, EXCEPT for Active State. When the menu is Active, and I move the mouse down the items, the Top Level Item defualts to the Normal State, NOT the Active State.
I've tried trashing the Active State and rebuilding it. That did not work.
I can't figure out how to get the Top Level Item in the Menu Bar to display the Active State.
Hope someone has some suggestions, or knows if this is a bug.
Thanks.
Dave Coop.

Hmmm...I've just been playing around, and I think I got the Active State to work correctly. I think my problem was not understand what Active State means.
To answer your question, I was changing the Font Color and Box Fill Color of the Active State.
I did not understand that Active State means the look of the Menu Item when the PAGE is active. I thought it meant the look of the Menu item when the cursor is scrolling down the Menu (i.e. when the MENU is Active, not the page).
Look at this page for an example of what I'm trying to achieve...
http://www.pgavdestinations.com
When you hover over the "Work" menu item, and move the cursor down the menu, the state of "Work" remains changed until you move the cursor off of that menu column. It does NOT return back to it's Normal state until you are off of that menu column.
Is there a way to achieve this with the menu states in Muse?
Thanks for the replies!
Dave.

Modify horizontal menu widget to bar menu

Can someone please explain how to change horizontal menu widget to bar menu widget, since the bar widget is missing on my Muse?

Well if I understand your question correctly, I think what you would do is just create the "bar" in the background using the rectangle tool, and then overlay the horizontal menu widget over top. Then you would set the rollover states on the menu widget to have transparent backgrounds, so that the bar behind would show through. There isn't a separate "bar" widget available in Muse - just horizontal and vertical.
Hope this helps!
Cheers,
SH

How can I get a horizontal menu widget to display at 100% width?

I have created a horizontal menu with uniform spacing and have stretched it out to each side. I can't get the red indicator line to show up on the left side, but it does show on the right. No matter what I do, the menu continues to show up short on the right side of my screen in preview mode.
Does anyone know how to do this properly? Has anyone else had issues with it?
Thanks!

Hi,
We are aware of this limitation with the Menu and Panel Widgets and hope to address the same in future.
Thanks,
Vikas

Horizontal menu question

Similar Messages

Maybe you are looking for