HELP: Horizontal menu bar scrolls page horizontally

Hi experts out there,
this is my first attempt in spry menu bars,
and all works fine but ...
in the following page if you click item 3.1 and move the mouse out to the side all is fine
but if you move out down into item 3.2 - then the whole screen is scrolled to align item 3 left in screen.
http://www.yonius.de/menu-and-data-frame-test.html
I debugged it to some degree (starting js) and discovered a lot of show / hide submenu calls which do not really seem to make sense.
I already downloaded  SpryMenuBar-fixed.js   from this site, but that doesn't help.
Problem seems to be around leaving item 3.1 and entering 3.2 where I do not yet understand the complete logic of the code.
I would also be happy if the menu just disappeared after the click. but there is no click related code in the script
that I could have modified ... and my JS skills are still beginner ...
I am using an Iframe here to display internal and external links driven by the menu ...
btw. is it true - there is no spry update / fix since 2008  ???
not even a RELEASED version of 1.6.1 ??
feels strange to depend on something 'dead'
thanks a lot for your help before I give up and look for s.h. else than spry menu ...
MJB Germany

addition:
problem appears
in IE8 and Firefox 3.5
sometines ? and with a visible flicker in Opera 10.6
but NOT in   Chrome

Similar Messages

  • Need help on Menu Bar in Muse.....

    I need to link directly one of my page in menu bar to my contact page, i want my page to go directly to contact page when click on menu bar or navigation bar..I need some help on this..
    Thanks

    I think my issue maybe similar, I have download a muse themed template, now i want to change the menu copy from the standard template text.
    I cant seem to be able to edit it, look at the screen shot below:
    It wont let me edit the text at all, I cant select it with the text tool or anything! Help.
    Thanks
    Alan

  • I want to import bookmarks from Safari on the Mac same computer. Firefox help says Menu Bar/File/Import. My Firefox does not have File/Import option. How do I import bookmarks from Safari to Firefox?

    I want to import bookmarks from Safari on the same Mac computer. Firefox
    Help says use Menu Bar/File/Import.
    My Firefox does not have File/Import option.
    How do I import bookmarks from Safari to Firefox?

    Import and Backup is the third (last) button on the toolbar in the Bookmarks Manager (Library) that looks like a star.<br />
    Other platforms show the text label, but on Mac you only see toolbar icons.

  • InDesign Crashing when Choosing "help" from Menu Bar

    Every time I choose Help from the Menu bar, InDesign Crashes. I'm on InDesign CS3 5.04
    PLEASE HELP!

    Hi(Bonjour)!
    That's the way FCE (and FCP by the way) works since his first version.
    Michel Boissonneault

  • Spry Menu bar interactivity page disappears

    Hi,
    I am using Dreamweaver trail CS3 for Mac. I am creating web
    pages using frames and tables. When I insert a Spry Widget Menu Bar
    Widget the "Spry Menu Bare: Menubar1" interactive page does not
    appear, so I can add or change names of Main Items and Sub-items
    along with linking. Why is it doing this?

    Hi, I am using a "Top and nested left Frames" The Left frame
    I am using to display navigation menu. I insert
    "menubarvertical#menubar1". The menu that allows to edit lables,
    links and etc. does not come up. Do I need to edit through code?
    Here is the code page for the left frame.
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8"><style type="text/css">
    <!--
    body {
    background-image: url(NewFiles/background-2.gif);
    margin-left: .5in;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css"
    rel="stylesheet" type="text/css" />
    <table width="123" height="48" border="0">
    <tr>
    <td><img src="NewFiles/Photobut-normal.jpg"
    width="107" height="22"></td>
    </tr>
    </table>
    <p> </p>
    <p> </p>
    <ul id="MenuBar1" class="MenuBarVertical">
    <li><a class="MenuBarItemSubmenu" href="#">Item
    1</a>
    <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Item
    3</a>
    <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item
    3.1</a>
    <ul>
    <li><a href="#">Item 3.1.1</a></li>
    <li><a href="#">Item 3.1.2</a></li>
    </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    <p> </p>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
    {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    Thanks,
    Becky

  • I messed up and I need your help please (menu bar)

    OK I messed up. I installed one of these utilities to see it I would like the opaque menu bar better than the transparent since so many are fussy about the transparency. Well I find I liked the transparent bar. Now I do not know how to restore it. I thought the utility "opaque menu bar" would have a way to uninstall but it does not and the developer is not replying so any help would be appreciated. Thank you in advance.
    Mireille

    1. Start up Terminal by using Spotlight or starting it from Applications -> Utilities
    2. Type: killall OpaqueMenuBar (case sensitive spelling)
    Nothing should come up as a result. If it says "no processes belong to you were found" check the spelling or skip to the next step
    3. Go to your applications folder (commandshiftA in Finder) and drag the OpaqueMenuBar app to the trash
    4. Go into the System Preferences -> Desktop, change the wallpaper to something else and then back again.
    Uninstallation should be complete.

  • Help My menu bar become invisible

    It's urgent i need to got up my page once again. I'm in Costa Rica so i can call to support. I got and screen of what i see (the first time it was fine and dandy now there's no menus. Please answer me as soon as possible.
    my site is dragonsfa.com it's football team in CR. I'm publishing it via my other account [email protected] . We are at 24 days till the first Costarican American Football championship starts. It's a most I get the page the way it is.
    Thank you

    You have navigation at both.....
    http://web.me.com/cartagodragons/2/Home.html
    http://www.dragonsfa.com/2/Home.html
    Did you empty your browser cache before visiting your published site?

  • PSE 7 Menu bar in Organizer will not display properly

    I''m going through an instructional video on PSE 7.  The video shows the menu bar in the organizer just to the right of the little house.  My Organizer shows two > symbols in the middle of the area, with a drop down list of menu items.  I'm not sure what's going on, but it seems that the menu bar might be locked or something like that.  I have searched help for "menu bar" but found nothing on how to get the bar back.  Can someone point me in the right direction to get the menu bar back?
    As an asside............. Is there no help in the program itself?  When I press F1 or click on help in the menu, I get directed to the Adobe web site.  Does this mean that if you're not connected to the internet (using a laptop without wifi access etc) that you have no access to help files?
    Thanks for your assistance.

    Thanks very much for your quick answer.  I decided to just use the system font.  If issues appear during editing, at least I'll know how to turn it off.  I didn't want to lower the dpi.  I had it set higher for a reason............  poor eyesight...
    I've bookmarked that faq site.  It looks like there's a lot of good information there.
    Thanks again.

  • After updating OS X 10.8.5, bluetooth is not available in the menu bar. The Magic Mouse is recognized and working but the bluetooth mouse functions do not work.

    After updating OS X 10.8.5, bluetooth is not available in the menu bar.
    The Magic Mouse is recognized and working but the bluetooth mouse functions do not work.
    I have downloaded and installed 10.8.5 combo but it does not help.
    Menu bar - System Preferences/ there is no bluetooth item
    I restarted with cmd + alt + P + R it doesn't help.

    Did you try the suggestions from your other post on this?

  • Menu bar not appears in some applications.

    Hi, all!
    I have a strange problem and really need help:
    top menu bar not appears, when i start some applications.
    For example, Numbers, keynote, quicktime and, in the end, Finder!
    Problem solves when i replace the .app file of the application with the file from another computer, but it appears again with another application. No errors, no messages, just no menu bar in the top.
    I don't know why it happens and don't know how to diagnose this problem.

    Sometimes something as simple as restarting the computer will resolve system quirks. If that does not work, boot from your install disc & run Repair Disk from the utility menu. To use the Install Mac OS X disc, insert the disc, and restart your computer while holding down the C key as it starts up.
    Select your language.
    Once on the desktop, select Utility in the menu bar.
    Select Disk Utility.
    Select the disk or volume in the list of disks and volumes, and then click First Aid.
    Click Repair Disk.
    Restart your computer when done.
    Repair permissions after you reach the desktop-http://docs.info.apple.com/article.html?artnum=25751

  • Horizontal menu bar moves between different pages

    Hello,
    I have all of the page properties to the same values; however I am noticing the horizontal menu bar at different levels when I load my pages.  The website is AbileneDentist.com.
    Any idea on what could be causing this to occur?
    Thanks,
    Mark

    Hi,
    I believe, the vertical scroll bar is causing the objects to move.
    To resolve this, you may add a scroll bar to all the pages. To achieve the same:
    From the File menu in Muse, select Site Properties. Set the visibility for the Vertical Browser Scroll bars, to Always.
    Hope it helps,
    Sonam

  • Horizontal Scrolling menu bar

    I want to create a horizontal scrolling menu. When you place your cursor over the graphics in the menu bar, they slide to the left or the right. Does anyone know where I can find a tutorial online for this?
    Thank-you.
    LT

    Hi Donald,
    Thanks for your help with the scrolling menu bar, I have
    tried to add the code but must be putting it in the wrong place.
    Please can you let me know where it need to go. The page I am
    working on is
    http://www.vr360homes.co.uk/nav_menu.htm.
    Thanks in advance for your help.
    Regards
    Lee

  • 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>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <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">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <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">
          <!-- Begin DWUser_EasyRotator -->
    <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"> <!-- modify the float on this element to make left/right/none=center aligned. -->
                                                      <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 style="float: left; padding: 6px 18px 3px 0; font-weight: bold;">Title text!</div> -->
                                    </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>
    <!-- End DWUser_EasyRotator -->
          <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
        </div>
    <!-- End DWUser_EasyRotator --></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><!--[if IE 7]>
    <html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
    <html lang="en" class="ie8 oldie"></html><![endif]-->
    <!-- [if gt IE 8] <!-->
    <html lang="en">
      <!-- <![endif]-->
      <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>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <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">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <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

  • Deleted CSS for Horizontal Menu Bar. Help!

    I deleted the css for my spry horizontal menu bar and now when I try to upload it into a new page it is distored.  I added back the css rules for the menu bar and it helped but I cannot get the menu bar to line up horizontally like it was originally.  The bars are vertically staggered across the page.  Can anyone help me with the css settings to get the menu bar back to normal?
    Thank you
    Teresa

    Hello Teresa,
    we should not resign ourselves. I for my part, I'm very "happy" with my DW,  particularly you/we find here many unselfish helpers! What concerns your "way to build website an easier way" I'll propose DW itself (see screenshot of my German DW):
    or many of interesting templates (Google is your friend) and here my favorite are these of Nancy O.:
    http://alt-web.com/Free-CSS-Templates.shtml.
    And I want to reoeat my hints from above:
    If you have a budget to work with, look at PVII's Pop-Menu Magic3.
    http://www.projectseven.com/products/menusystems/pmm3/index.htm
    jQuery Superfish (free): http://users.tpg.com.au/j_birch/plugins/superfish/ aso.
    Good luck!
    Hans-Günter
    P.S.
    And whether you use DW or other programs, sooner or later you have to become familiar with CSS and html aso.

Maybe you are looking for