Multiple/nested levels in CSS horizontal drop menu

I am working on updating my horizontal menu and I need to have a nested menu inside the dropdown to display to the right of its parent menu.
Example:
<ul id="navbar">
<li><a href="#">Paper &amp; Printing &#9660;</a>
<ul>
<li><a href="paper.html">Copy &amp; Printer Paper</a>
       <ul>
            <li><a href="letter">Letter</a></li>
            <li><a href="legal">Legal</a></li>
            <li><a href="ledger">Ledger</a></li>
            <li><a href="computer">Computer</a></li>
            </ul>
</li>
<li><a href="pads.html">Tablets &amp; Notebooks</a></li>
<li><a href="art.html">Art Paper &amp; Supply</a></li>
<li><a href="printaccess.html">Ink &amp; Toner</a></li>
</ul>
</li>
I want the types of paper (i.e. letter, legal, ledger...) to pop out to the right of the parent "Paper & Printing"  -> "Copy & Printer Paper"  .  I know I'm lacking the css for #navbar ul li ul li and so on, but everything I have tried doesnt work.
Here is the css I have so far:
http://www.liquidatorswarehouse.net/css/menu.css
Thanks for any help

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#">Paper &amp; Printing &#9660;</a>
    <ul>
      <li><a href="paper.html">Copy &amp; Printer Paper</a>
        <ul>
          <li><a href="letter">Letter</a></li>
          <li><a href="legal">Legal</a></li>
          <li><a href="ledger">Ledger</a></li>
          <li><a href="computer">Computer</a></li>
        </ul>
      </li>
      <li><a href="pads.html">Tablets &amp; Notebooks</a></li>
      <li><a href="art.html">Art Paper &amp; Supply</a></li>
      <li><a href="printaccess.html">Ink &amp; Toner</a></li>
    </ul>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Similar Messages

  • CSS Horizontal Drop-down Menues

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

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

  • CSS (Responsive) Horizontal Dropdown Menu (Alignment)

    I am styling a Responsive CSS Horizontal Dropdown Menu (for hours now), and can not get the main menu headings (Directory, Resources, etc) to align left (even) with the logo and content divs. I would also like the submenu headings (Learning & Games) and items (Catch the Bullet, Snoopydoo, etc) to align left (even) with the logo and content divs. - Like I am trying to do with the main headings. --I am trying to get the logo, main menubar heading, and menubar subheading to all align the same left.
    (Optional) I am considering on not having the gray menuboard span the whole screen when opened. Not sure if this would look good, but even more unsure how to keep it in the 90% container the menubar is located in.
    Here is the site for code:
    http://dothopper.com/index.html
    Thanks for any help.

    Another great tip. Never cease to amaze. Thanks . I uploaded the new CSS with red border and looked at somewhat. It seems very helpful, but like this navbar, I'm gonna have to spend some time with. I think this may help me to figure the problem. This is a really GREAT trick, thanks. If you appen to look at my site, and see anything relevant to getting the element to shift left, let me know.
    BTW, crammed some more learning recently (Mostly Dreamweaver, little HTML STructure, and JQuery). Going to try to not use as many divs, (use HTML tags and class selectors). Trying to use captions in my HTML and CSS for organization and understanding. Making copies of all my CSS, JS, and HTML. Set my areas (divs) up as 'section,aside,article,and footer'?--Tried adding metatag info (I think I missed 1 part of the metatag (they wanted a value?). Not sure if my metatagging is correct? Let me know of any advice what I'm doing right/wrong so far.
    I taught myself to design using divs like tables somehwat. With the correct way of design (not using alot of divs)..how would I handle this?...
    My old page (method), I had several,divs:  3- (content75%) and 3- (image25%) all housed within a div (approx 900px). Content was left, and images right. Total DIV that housed them was 75% of 1232px page? (I think)..The div that housed them was approx 900px (.75x1232). Content approx 675px and image approx 225px wide.
    I inseted 480px wide images in that 25% image div and it showed it nicely as approx 225px wide on desktop, and when responsive on mobile, nice full size at 480px. (I think I am/was avoiding having to use alternative images--for each platform-- this way?)
    With the correct way of designing (less divs), how would I handle this scenario above? IF I inserted a 480px image into a approx 900px div with no other divs, it would fill the div with a 480px image. IT would then throw my wole design off. I think I'm just missing some HTML/CSS knowledge. Hope this question makes some kind of sense?

  • HELP:Miltiple nested level in xml file & Oracle 8i

    Hello,
    I have xml file with multiple nested level. How can I load the xml file data in Oracle 8i.
    Thanks.

    This is not entirely true as you can have object types as columns.
    See the following example from the xsql-demo which selects from a 'nested' table. You can do inserts on this type of tabel as well:
    DROP TABLE LOCATION;
    DROP TYPE POINT;
    CREATE TYPE POINT AS OBJECT (X NUMBER, Y NUMBER);
    CREATE TABLE LOCATION (
    NAME VARCHAR2(80),
    ORIGIN POINT
    INSERT INTO LOCATION VALUES ( 'Someplace', POINT(11,17) );
    COMMIT;
    <?xml version="1.0"?>
    <xsql:query connection="demo" xmlns:xsql="urn:oracle-xsql">
    SELECT name, origin
    FROM location loc
    WHERE loc.origin.x = {@x-coord}
    </xsql:query>

  • Where can I find a horizontal accordion menu tutorial

    I have googled all day looking for a horizontal accordion menu for javascript and haven't found an actual tutorial. I have found downloads, but I want learn how to make one.

    Just to clarify,  Accordions are collapsing panels (not a menu system per se).
    Spry Accordion Panels Widget
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/
    Working with Spry Horizontal Drop-Menu widget
    http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
    Making a JQuery Mega Menu
    http://www.sitepoint.com/make-a-mega-drop-down-menu-with-jquery/
    jQuery Superfish Menus
    http://users.tpg.com.au/j_birch/plugins/superfish/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Level 2 Submenu problems - Horizontal Spry Menu

    Okay, I have successfully implemented a horizontal spry menu. Most links don't have drop downs but there are some that has submenus. For example.
    Main Link
       > Products
       > Services
              Service 1
              Service 2
              Service 3
    etc
    The 1st submenu works fine (i.e. the one that would show products and services) and the second level submenu links work okay as well (ie Service 1, 2 etc) BUT ONLY in Firefox, Safari and Chrome. I CANNOT for life nor money get the second submenu to work in ie8. It just doesn't show! I need help urgently!
    The site is in design process so there isn't a URL yet. If it would be helpful, I could upload everything onto my server so the files can be viewed. Just let me know what is required.
    Has anyone encountered anything like this before? All very weird...and needless to say...very annoying too.
    Thanks in advance for any suggestions.
    Ben

    Update - it's a problem with opacity!
    I wnated to have a submenu with 0.85 opacity. I had the following CSS in the file:
    ul.MenuBarHorizontal ul
    filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity: 0.85;
        opacity: 0.85;
    This resulted in the second submenu disappearing in IE8...but it worked okay in all the other browsers.
    Any idea for submenus with opacity in IE??
    Ben

  • Horizontal dropdown menu/css

    Have worked out a horizontal menu using css but I'm stuck with the drop down part. There are two areas that drop down, one under Data Entry and the other under Reports. So far the only style used is display: inline;.View the file --> http://classreunionprogram.com/test_css/css.menu.htm
    Also get a validation error because of ignorance of how to.Any help is great.
    Thanks.

    Is this what you had in mind?
    http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
    NOTE: Pay close attention to how the list mark-up is laid out.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Horizontal Drop Down Menu

    Another puzzler.  I can't find
    out how to change the width of a horizontal spry widget in CS3without changing them all.In
    www.mccanngolfcourse.com/indextry1.htm
    I want to make the Home button width less than the current 156 pixelsl
    Please someone tell me how without changing all the rest of the widgets.
    Thanks in advance.

    Nancy, you are not at all cynical.  You have been terrific,   Thanks.  The
    thing that has me going is that I accidentally did what I want  to do but I
    cannot repeat it.  Thanks for the input.
    Joe
    In a message dated 1/31/2010 5:10:23 P.M. Eastern Standard Time, 
    [email protected] writes:
    I don't  mean to be cynical, but what do you expect from Spry menus?   
    Personally, I don't use them.   I think there are much better menu  systems you
    can use that WILL do what you want without re-writing the entire  code.
    This menu is set to auto and it works in all browsers. Also  notice how
    simply the CSS code is  written.
    http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
    PVII  CSS Express Drop menus  (tutorial)
    http://www.projectseven.com/tutorials/navigation/auto_hide/
    If  you want Professional results quickly,
    *Pop-Menu Magic2 by PVII (DW  extension  purchase)
    http://www.projectseven.com/products/menusystems/pmm2/index.htm
    Nancy  O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media   Specialists
    http://www.alt-web.com/ 
    http://www.twitter.com/altweb
    http://www.alt-web.blogspot.com/

  • Can you have a different colour horizontal Spry menu on multiple pages?

    Hi,
    I'm fairly new to Dreamweaver and CSS. So please forgive me ignorance.
    I've created a page with a horizontal spry menu bar, and have edited it according to how I want it to look.. Brilliant!. The problem I have is I want the exact same menu bar on multiple pages but using a different colour scheme for a couple of the pages!. Is this possible? Thanks

    I am sorry, but I do not see that you have added the suggested code to the document as per
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Touring Sport</title>
    <meta name="keywords" content="Football Tours, Youth Football Tours, Junior Football Tours, Boys Football Tours, Girls Football Tours, Ladies Football Tours, Mens Football Tours, European Football Tours, School Football Tours">
    <meta name="description" content="Football Tours in the UK and Europe.">
    <style type="text/css">
    <!--
    body {
         background-image: url(images/Touring%20Sport%20-%20Sports%20Tours,%20Schools%20Tours%20and%20Corporate%20Tours.jpg);
    a:visited {
         color: #660066;
    a:link {
         text-decoration: none;
         color: #660066;
    .Contact_Header {
         font-family: Helvetica;
         color: #660066;
         font-size: 95%;
         text-align: right;
    .Main_Text {
         font-family: Helvetica;
         color: #666;
         text-align: justify;
         font-size: 90%;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script><style type="text/css">
    <!--
    a:hover {
         color: #993399;
    --></style></head>
    Gramps

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

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

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

  • Horizontal drop down menu not staying open?

    Hi there again,
    So now I'm attempting to create a horizontal drop down menu. It is meant to be a vertical tab that sticks out, expands to the right, then expands and drops down.
    However, when I hover over the button (which is the blue box) and click it, Flash thinks I'm clicking the button on the bottom. The technique I used to do it must be the problem. I'm using a button inside a button. (In place of the "over" state of my buttons, I have inserted a movie clip of which in itself are layers). I've tried so many things to try to make it work to no avail.
    There must be an easier way to accomplish what I am doing...but as I've said before, I'm noob and experimenting.
    The link to the uploaded .swf file is below. It isn't the final file, but it is a small sample of what I am trying to accomplish with the navigation.
    http://www.swfcabin.com/open/1354160938
    Thanks!

    When you roll over the purple rectangle, it expands to the right. You have to move the cursor to the right to get the rectangle to expand down, exposing the blue rectangle. The problem that you see when you roll over the blue rectangle is because the rollover on the blue rectangle causes a rollout on the object below and this causes the rectangle below to shrink up.
    You can control this, but you'll need to use Actionscript to achieve the effect. Here's a link to one way: http://www.senocular.com/pub/kirupa/as3tips_p6.html.

  • Horizontal drop down menu trouble

    Hello,
    I am trying to make a horizontal drop down menu which is
    located at the top of my page, right on top of an
    image.(www.citadelap.com/index_copy(2).htm). I have my code working
    in IE when it is on it's own page, without the image, etc.
    (www.citadelap.com/drop_menu.html). What do I have to do to get
    this drop down menu to show over the image in IE??
    Thanks for any help you can offer!!!

    I have quickly looked at your markup and found too many problems to discuss here. What I have found so far
    There is no DOCTYPE
    SpryMenuBarHorizontal is doubled up
    There is extensive use of absolute position where it is not neccessary
    I suggest you go to here http://www.w3schools.com/
    Gramps

  • CSS problem with drop menu please help!

    I have been going crazy for hours trying to use CSS to cover up part of a border, but I can't seem to do it with z-index or anything. My desired effect is to have the border be visible around the menu item and the drop part (only during hover) and eliminate the part that is separating the menu item from the drop box. Any help would be greatly appreciated.
    Here is the menu part of my HTML:
    <ul class="dropdown">
                    <li><a href="about-us.html">Company</a>
                        <ul>
                            <li><a href="about-us.html">About Us</a></li>
                            <li><a href="people.html">People</a></li>
                            <li><a href="business-development.html">Business Development</a></li>
                        </ul>   
                    </li>
                    <li><a href="oral-cancer.html">Therapeutic Areas</a>
                        <ul>
                            <li><a href="oral-cancer.html">Oral Cancer</a></li>
                        </ul>
                    </li>
                    <li><a href="media-inquiries.html">News</a>
                        <ul>
                            <li><a href="media-inquiries.html">Media Inquiries</a></li>
                            <li><a href="press-releases.html">Press Releases</a></li>
                            <li><a href="publications.html">Publications</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a>
                        <ul>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </li>
                </ul>
    Here is the CSS:
    /* Drop Menu */
    ul.dropdown, ul.dropdown li, ul.dropdown ul
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
    ul.dropdown
        position: relative;
        float: left;
    ul.dropdown li
        float: left;
        background-color: #C3C3E5;
        padding: 7px 10px;
        line-height: 15px;
        border: 1px solid #C3C3E5;
        height: 20px;
    ul.dropdown li:hover
        position: relative;
        background-color: #BBAADD;
        border: 1px solid #FFFFFF;
        border-bottom-color: #BBAADD;
    ul.dropdown ul
        z-index: 100;
        visibility: hidden;
        position: absolute;
        width: 180px;
        top: 100%;
        left: 0;
        margin-left: -1px;
    ul.dropdown ul li
        float: none;
        background-color: #BBAADD;
        border: 0;
    ul.dropdown a:link
    z-index: 100;
        color: #FFFFFF;
        text-decoration: none;
    ul.dropdown li:hover > ul
        visibility: visible;
        border: 1px solid #FFFFFF;
    ul.dropdown li:hover > ul li:hover
        border: 0;
    ul.dropdown li:hover > ul li a:hover
        text-decoration: underline;

    Like this:
    http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Sliding CSS horizontal menu

    I'm really stumped. I need to make a horizontal DHTML menu
    either showing or hiding text links based on mousing over items.
    I've done this before with a vertical menu, but it's just not
    working horizontally.
    This is what I'm trying to achieve...
    First menu loads: | Link One | | |
    Mousing over the space past Link One will display the
    following: | | Link Two | |
    Mousing over the space past Link Two will display the
    following: | | | Link Three |
    I am so stumped!!! Does anyone know of a menu like this
    anywhere on the web?
    Thank you :)

    I'm really stumped. I need to make a horizontal DHTML menu
    either showing or hiding text links based on mousing over items.
    I've done this before with a vertical menu, but it's just not
    working horizontally.
    This is what I'm trying to achieve...
    First menu loads: | Link One | | |
    Mousing over the space past Link One will display the
    following: | | Link Two | |
    Mousing over the space past Link Two will display the
    following: | | | Link Three |
    I am so stumped!!! Does anyone know of a menu like this
    anywhere on the web?
    Thank you :)

  • Spry Horizontal Drop Downs Don't Work in iOS

    I designed a site a while ago in Dreamwaever using a horizontal Spry menu system. Whilst I tested it using all the common browsers and it works in all of them I discovered that the second level of sub menus didn't worl on the iPad and iPhones. Client was unhappy so I redesigned it with only one level of sub menu and all was happy with the world. He still is happy as he doesn't update his iPad, but I have discovered with my own iPhone that the drop downs don't work at all now. I am just starting to design another site and have used spry horizontal to test the holding page and this also doesn't work. I am using the very most up-to-date version of Dreamweaver as I have now used the subscription based system.
    If Spry doesn't work on iOS then it is no use. Whilst I hate Apple's arogance with disallowing Flash, it is a very popular product and one cannot afford to design sites that can be read on iPads and iPhones.
    Is there another way to make drop down style menus? Is there a fix for the Spry menus? I am not big on coding which is why I use Dreamweaver. I did try the version two of the Spry menus, but it appears that you have to hand code all the changes from the default set up and couldn't see any way of including images as I have done on this site.
    The site I am using as an example is http://www.raj-bristol.co.uk/
    Has anyone got any idea what to do about this problem?
    Thanks
    Ralph Ferrand
    Vision Design UK Limited
    www.vduk.co.uk

    Spry is no longer being developed or supported by Adobe.
    You would be much better off using jQuery Accordion: http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/
    Or pure css/css3 menus: http://www.noupe.com/css/100-great-css-menu-tutorials.html
    Arrogance has nothing to do with the lack of Flash on Apple products, well, maybe 10% arrogance:
    http://www.apple.com/hotnews/thoughts-on-flash/
    Adobe is also no longer developing Flash for mobile devices.
    For video on mobile devices, HTML5 is the way to go now.

Maybe you are looking for