Help with inserting drop down menu/pricing in Muse site

I know this is not a feature available directly in Muse, but are there other sites where I could get code to insert? View this website , the box on the right side where you can select from 3 dropdown menus and you get an updated price at the top. I don't care so much about the add to care function, I just want to have the dropdown/pricing.

The HTML code for a drop-down menu is as follows:
<select>
   <option>Item 1: $9.95</option>
   <option>Item 2: $19.95</option>
   <option>Item 3: $29.95</option>
</select>
You can add this code by clicking Option-> Insert HTML...
Here is a good tutorial for drop-down menus.
http://www.echoecho.com/htmlforms11.htm
Hope this helps,
Julia

Similar Messages

  • Help with AS3 drop down menu

    I'm new to AS3, this script is from an xml drop down menu. I
    need to change all the font to " Gil Sans Lite: I looked down the
    string and only see a place to change fonts twice which I did. But
    the original font remains in the 1st button, the drop downs were
    changed. I also needed to align the buttona as my stage is bigger
    looking for the x/y elements but I was so tired I must have missed
    them. The seperate xml script only lets you change the text, amount
    of menus and urls. Any help?

    Thanks for the info, as I said I'm new to AS3 so I would need
    to know exactly where in the script I would insert this
    (Also the font is on my mac so it would be the font folder/,
    font name "Gil Sans Lite" ='NavItemFont'
    package {
    import flash.display.Sprite;
    public class NavItemFont extends Sprite {
    [Embed(source='C:/WINDOWS/Fonts/FRAMDCN.TTF',
    fontName='NavItemFont', whats the unicode range?
    unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+006 1-U+007A,U+007B-U+007E')]
    public static var NavItemFont:Class;
    and second it says" Render this out - so it is now
    NavItemFont.swf" does that mean change the original fla name and
    export it as NavItemFont.swf"?
    Also " Then in another flash app - load the external swf as
    an asset, and on-load register the font - which will make it
    global. You can now change NavItemFont.swf externally and it will
    change in your app everywhere. Can you explain?
    thx

  • Need help with javascript drop down menu

    Hi,
    I inherited a website that was already created. I do not know
    what version of dreamweaver they created it in but I have
    Dreamweaver MX 2004. I am trying to make changes to the drop down
    menus. I have figured most everything else out about dreamweaver
    but cant figure out how these menu's are made or can be modified. I
    have gone into the main template and clicked on the menu section I
    want to modify. All it shows it a link to javascript:; I have
    searched everywhere for what this means or how to modify it but
    can't find anything. Can someone tell me how to get to this info so
    I can make changes. Thanks. My website is www.pfcal.org if that
    helps.

    Oh boy. Templates are not for uploading. They have no effect
    on the
    server. They only change local files which must then be
    uploaded to the
    server. But - I'm troubled by this comment -
    > It didnt give me an option to "save" though
    When you made the changes did the template page get marked as
    "dirty" (with
    an asterisk beside the name)? Which DW are you using?
    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
    ==================
    "sjg23" <[email protected]> wrote in message
    news:[email protected]...
    > Ok. thanks. I did that but nothing changed. Here is what
    I have now:
    >
    > <div id="MMMenuContainer1112210633_0">
    > <div id="MMMenu1112210633_0"
    onmouseout="MM_menuStartTimeout(100);"
    > onmouseover="MM_menuResetTimeout();">
    > <a href="../message_director.cfm"
    id="MMMenu1112210633_0_Item_0"
    > class="MMMIFVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > Director's Message
    > </a>
    > <a href="../mission.cfm"
    id="MMMenu1112210633_0_Item_1"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > Our Mission
    > </a>
    > <a href="../history.cfm"
    id="MMMenu1112210633_0_Item_2"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > Our History
    > </a>
    > <a href="../leadership_transiton.cfm"
    id="MMMenu1112210633_0_Item_3"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > Leadership Transition
    > </a>
    > <a href="../pcl_organized.cfm"
    id="MMMenu1112210633_0_Item_4"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > How PCL is Organized
    > </a>
    > <a href="../board_directors.cfm"
    id="MMMenu1112210633_0_Item_5"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    >
    Board of Directors and Officers
    > </a>
    > <a href="VideoNGO.cfm" id="MMMenu1112210633_0_Item_6"
    > class="MMMIVStyleMMMenu1112210633_0"
    >
    onmouseover="MM_menuOverMenuItem('MMMenu1112210633_0');">
    > See our promotional video</a>
    >
    > </div>
    > </div>
    >
    > I made this change in the html code of the page
    "main.dwt" which is my
    > main
    > template. It didnt give me an option to "save" though so
    it's like it
    > doesnt
    > recognize that I changed anything. I saved it anyway and
    uploaded but no
    > change
    > on the web.
    >

  • Need Help with Spry Drop Down Menu

    Greetings,
    I'm a Dreamweaver beginner, and I'm currently working on a
    redesign of our corporate website, and I would really like to
    incorporate a drop down navigation system. So far, I've gotten
    close to what I would like to have, except there are a few items I
    just can't figure out. Here's what I have so far:
    Click
    Here
    As you can see, whenever you hover over one of the links, a
    sub menu appears. This is great and everything, except I would
    really like to make two minor adjustments:
    1) I would like to decrease the line-spacing between the main
    menu and the submenus.
    2) I would like to change the font color of the sub-menu for
    better readability.
    I created this menu using Dreamweaver's Spry Menu feature. To
    get the desired results so far, I simply played around with the CSS
    file. The only two things I can't figure out are the above. I tried
    to change the font color of the submenus in the CSS file, but there
    is no tag that allows you to do this. I found a "Help" document on
    repositioning the location of the submenus but every time I try, I
    don't get any noticeable results.
    Any ideas on how to pull off what I'm looking to do? Any
    replies would be greatly appreciated. Thanks!

    Bump

  • Help with IE drop down menu stretching across page, Chrome & Firefox work perfectly.

    I have set up a spry menu in my page.  file:///C:/Users/Kim/Documents/PQH_xhtml/index.html
    Everything works great in Chrome and Firefox. Just not in IE.  The only problem I am having is in IE the drop down menus stretch out all the way across the page.
    I have tried changing the width, but it messes up Chrome and Firefox.  Just need IE to shorten up the width of sub menus.
    Any help is GREATLY appreciated!!!

    @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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    background-color: #f9f8f6;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    font-style: oblique;
    /* 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: left;
    cursor: pointer;
    width: 14.28%;
    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;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 100%;
    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
    float: none;
    clear:left;
    width: auto;
    white-space: nowrap;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* 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: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    border: thick ridge #3b87d5;
    /* 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: #33C;
    color: #FFF;
    /* 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: #33C;
    color: #FFF;
    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;

  • Help with Horizontal Drop down menu

    Can someone tell me what is wrong with my style sheets. The
    drop down menus aren't showing up in IE6, but work fine in Firefox,
    Safari and IE7. I am certain it is something simple.
    http://www.naylaw.com
    Need help please.

    Working for me on ie6

  • Help with Spry drop down menu

    I'm new to Spry, but not to CSS. I'm having major trouble
    formatting this menu.
    I've set up my page with a 3-row centered table for simple
    positioning (I hate trying to get a pure CSS centered layout). The
    width is 940px and the horizontal menu is supposed to span the full
    940 width. I've tried changing width values in several rules and
    nothing changes. In fact the only change I've been able to see is
    when I changed the text to Georgia in the li rule, even when I've
    tried to change bg colors.
    Any help would be appreciated. I'm completely stuck.

    Bump

  • Help with finishing drop-down menu in dreamweaver?

    I am trying to make a menu that I want to look like this:
    http://www.ivoog.com/link2
    I want it to look exactly like that but with a few more of
    the same menus next to the first one. The reason I am not using the
    menu I made above is because I used a builder and it produced about
    10 pages of really weird and complicated code.
    Here is what I have so far:
    http://www.ivoog.com/link4
    I just used random words because the menu is kindof private.
    Here's the CSS for the menu:
    http://www.ivoog.com/link4/dropdowntabfiles/bluetabs.css
    Here's the javascript:
    http://ivoog.com/link4/dropdowntabfiles/dropdowntabs.js
    Can anyone help me finish and make it exactly like the menu I
    showed? I am stuck on many things?!!

    Isn't this the same question that has been asked and answered
    more than once
    here?
    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
    ==================
    "hahahaadobeman" <[email protected]> wrote
    in message
    news:foi5bb$pr1$[email protected]..
    >I am trying to make a menu that I want to look like this:
    >
    >
    http://www.ivoog.com/link2
    >
    > I want it to look exactly like that but with a few more
    of the same menus
    > next
    > to the first one. The reason I am not using the menu I
    made above is
    > because I
    > used a builder and it produced about 10 pages of really
    weird and
    > complicated
    > code.
    >
    > Here is what I have so far:
    >
    >
    http://www.ivoog.com/link4
    >
    > I just used random words because the menu is kindof
    private.
    >
    > Here's the CSS for the menu:
    >
    >
    http://www.ivoog.com/link4/dropdowntabfiles/bluetabs.css
    >
    > Here's the javascript:
    >
    >
    http://ivoog.com/link4/dropdowntabfiles/dropdowntabs.js
    >
    > Can anyone help me finish and make it exactly like the
    menu I showed? I am
    > stuck on many things?!!
    >

  • Need help with a drop down menu from flash to Dreamweaver.

    I had this working once.  I am ping one you smart ones can help me out wuth this.  WHat am I doing wrong?

    Can you please give us a little more informationm about how it isn't working?

  • How to create a button with the drop-down menu?

    I want to create a button with the drop-down menu, which is like the 'back' on the tollbar in IE. I heard JPopupMenu can reach the certain result, but the button hadn't a down arrow. Who can help me?

    i have made something like this :
    //======================================================================
    package com.ju.guiutils
    import java.awt.*;
    import java.awt.event.*;
    import java.net.URL;
    import java.util.Vector;
    import javax.swing.*;
    import javax.swing.border.*;
    import javax.swing.event.*;
    import javax.swing.plaf.basic.BasicComboBoxUI;
    * @version 1.0 14/04/02
    * @author Syed Arshad Ali <br> [email protected]<br>
    * <B>Usage : </B> ButtonsCombo basically performs function button + JComboBox, if we have different options for
    * <BR>same button then we can use this ButtonsCombo.
    *<BR> By the way there is no button at all in <I>ButtonsCombo</I>
    public class ButtonsCombo extends JComboBox {
    //===================================================================================
    * Create ButtonsCombo with default combobox model
    public ButtonsCombo () {
    super ();
    init ();
    //===================================================================================
    * Creates a ButtonsCombo that takes it's items from an existing ComboBoxModel.
    public ButtonsCombo ( ComboBoxModel model ) {
    super ( model );
    init ();
    //===================================================================================
    * Creates a ButtonsCombo that contains the elements in the specified array.
    public ButtonsCombo ( Object [] items ) {
    super ( items );
    init ();
    //===================================================================================
    * Creates a ButtonsCombo that contains the elements in the specified Vector.
    public ButtonsCombo ( Vector items ) {
    super ( items );
    init ();
    //===================================================================================
    private void init () {
    setBorder ( BorderFactory.createBevelBorder ( BevelBorder.RAISED ) );
    setRenderer ( new ComboRenderer() );
    setUI ( new ComboUI() );
    addMouseListener ( new ComboMouseListener() );
    //===================================================================================
    * Set items for ButtonsCombo in the specified array
    public void setItems ( Object [] items ) {
    setModel ( new DefaultComboBoxModel( items ) );
    //```````````````````````````````````````````````````````````````````````````````````
    * Set items for ButtonsCombo in the specified Vector
    public void setItems ( Vector items ) {
    setModel ( new DefaultComboBoxModel( items ) );
    //```````````````````````````````````````````````````````````````````````````````````
    * Get current items in a array
    public Object [] getItemsArray () {
    ComboBoxModel model = this.getModel ();
    if ( model != null ) {
    int size = model.getSize ();
    if ( size > 0 ) {
    Object [] items = new Object[ size ];
    for ( int i = 0; i < size; i++ ) {
    items[ i ] = model.getElementAt ( i );
    return items;
    return null;
    //```````````````````````````````````````````````````````````````````````````````````
    * Get current items in a Vector
    public Vector getItemsVector () {
    ComboBoxModel model = this.getModel ();
    if ( model != null ) {
    int size = model.getSize ();
    if ( size > 0 ) {
    Vector itemsVec = new Vector();
    for ( int i = 0; i < size; i++ ) {
    itemsVec.addElement ( model.getElementAt ( i ) );
    return itemsVec;
    return null;
    //===================================================================================
    class ComboMouseListener extends MouseAdapter {
    public void mouseClicked ( MouseEvent me ) {
    ButtonsCombo.this.hidePopup ();
    public void mousePressed ( MouseEvent me ) {
    ButtonsCombo.this.hidePopup ();
    ButtonsCombo.this.setBorder ( BorderFactory.createBevelBorder ( BevelBorder.LOWERED ) );
    public void mouseReleased ( MouseEvent me ) {
    ButtonsCombo.this.hidePopup ();
    ButtonsCombo.this.setBorder ( BorderFactory.createBevelBorder ( BevelBorder.RAISED ) );
    //===================================================================================
    class ComboRenderer extends JLabel implements ListCellRenderer {
    //````````````````````````````````````````````````
    public ComboRenderer () {
    setOpaque ( true );
    //````````````````````````````````````````````````
    public Component getListCellRendererComponent ( JList list, Object value, int index, boolean isSelected, boolean cellHasFocus ) {
    setBackground ( isSelected ? Color.cyan : Color.white );
    setForeground ( isSelected ? Color.red : Color.black );
    setText ( ( String )value );
    return this;
    //````````````````````````````````````````````````
    //===================================================================================
    // We have to use this class, otherwise we cannot stop JComboBox's popup to go down
    class ComboUI extends BasicComboBoxUI {
    public JButton createArrowButton () throws NullPointerException {
    try {
    URL url = getClass ().getResource ( "/images/comboarrow.gif" );
    JButton b = new JButton( new ImageIcon( url ) );
    b.addActionListener ( new ActionListener() {
    public void actionPerformed ( ActionEvent ae ) {
    return b;
    } catch ( NullPointerException npe ) {
    throw new NullPointerException( "/images/comboarrow.gif not found or /images folder not in classpath" );
    catch ( Exception e ) {
    e.printStackTrace ();
    return null;
    //======================================================================
    you can cutomize this according to your requirement , okie ;)

  • Help to associate drop down menu choices with prices in another field

    Hello.  : (
    I am not really a programmer.. but I have written code before.
    (Certainly never written in JavaScript..)
    I am working for some non-profit and they asked me to fix their PDF to associate prices with items..
    I thought that this would be relatively simple in LiveCycle.. but not for me, anyway..
    I have some fields called Description0, Description1, etc.. that are a DROP DOWN menu that lets you select some option.
    I want the option to associate with a price field and update depending on the item selected in the drop down menu.
    I am totally failing though, it would seem..
    Any tips would be appreciated. : )
    I wrote something like this:
    function descriptionChange(newDescription){
    switch(newDescription){
              case "Lifepak CR Plus Charge Pak (one set of electrodes and one battery)":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "80";
                                  break;
              case "Lifepak CR Plus Charge Pak (two sets of electrodes and one battery)":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "107";
                                  break;
              case "Lifepak CR Plus Pedi Pad Starter Kit":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "139";
                                  break;
              case "Lifepak CR Plus replacement pedi pads":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "99";
                                  break;
              case "Philips HeartStart FRx Battery":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "153";
                                  break;
              case "Philips HeartStart FRx Adult Pads (1 Set)":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "50";
                                  break;
              case "Philips HeartStart FRx Infant/Child Key":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "98";
                                  break;
              case "Zoll Type 123 Lithium Batteries, (10) lasts 5 years":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "75";
                                  break;
              case "Zoll CPR-D Padz, five year year shelf-life":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "169";
                                  break;
              case "Zoll Stat Pads II, Two (2) piece pads, 2 year shelf-life":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "59";
                                  break;
              case "Cardiac Science G3 Plus Battery":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "395";
                                  break;
              case "Cardiac Science G# plus Pads (1 set)":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "49.95";
                                  break;
              case "Wall Cabinet":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "200";
                                  break;
              case "AED Wall Sign-3D":
                        this.resolveNode("UnitPrice.UnitPrice").rawValue = "15";
                                  break;
    }//end switch
    }//end function
    and then for each Description0,1... I put in like this:
    var newDescription = this.boundItem(xfa.event.newText);
    DescriptionChange.descriptionChange(newDescription);
    Help please? : )
    Sorry if my question is too simple.. or I am just too much of a failure..

    Thank you!!!
    That is a really nice trick. : )
    I ended up referencing the values with JavaScript actually..
    but I imagine it is effectively the same.
    They are referenced like this if anyone is curious in the future...
    UnitPrice.rawValue =  Description.rawValue;
    I also thought I might have a problem in the future if each price associated was not unique -- but that also doesn't matter... super great. : )
    Thank you very much.

  • Help needed with CSS drop down menu

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

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

  • I need help changing a drop down menu on a template

    Hi there
    ive been using dreamwearver on and of for a few years now and just about get by,  ive just bought a web site template and although ive managed to ajust most things,
    the template had a drop down menu using CSS  currently on the "about us" option a sub menu drops down, ive worked out how to  add to this menu and change the words
    but what i cant do is have this same drop down menu on another part or the menu system  for example i would like another drop down menu on the "our menu" part
    any help would be much appreciated
    below is the source code
    ive got some js codes to but im not sure if the menu system uses them
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="css/ui.totop.css" type="text/css" media="screen">
              <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="js/superfish.js" type="text/javascript"></script>
        <script src="js/script.js" type="text/javascript"></script>
              <script src="js/jquery.hoverIntent.js" type="text/javascript"></script>
        <script src="js/tms-0.3.js" type="text/javascript"></script>
        <script src="js/tms_presets.js" type="text/javascript"></script>
        <script src="js/jquery.ui.totop.js" type="text/javascript"></script>
              <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
                        <!--[if lt IE 8]>
        <div style=' clear: both; text-align:center; position: relative;'>
            <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_b annercode">
                      <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
        </div>
              <![endif]-->
        <!--[if lt IE 9]>
                           <script type="text/javascript" src="js/html5.js"></script>
              <![endif]-->
    </head>
    <body id="page1">
    <!--=========================================header======================================= ======-->
            <header>
                <div class="bg-1">
                    <div class="main">
                        <div class="container_24">
                            <div class="wrapper">
                                <article class="grid_24">
                                    <h1><a href="index.html">Alexander</a></h1>
                                </article>
                            </div>
                            <article class="grid_24">
                                <nav>
                                    <ul class="menu">
                                        <li><a class="active" href="index.html">home<span></span></a></li>
                                        <li><a href="menu.html">our menu<span></span></a></li>
                                        <li><a href="about us.html">about  us<span></span></a>
                                            <ul>
                                                <li><a href="#">history</a></li>
                                                <li><a href="#">gallery</a>
                                                <li><a href="#">weddings</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="reservation.html">Reservation<span></span></a></li>
                                        <li><a href="contact us.html">contacts<span></span></a></li>
                                    </ul>
                                    <div class="clear"></div>
                                </nav>
                                <div class="clear"></div>
                                <div class="wrapper">
                                          <div class="col-1 bg-2">
                                              <div>
                                                  <h3>WELCOME TO<span>BALOOS</span></h3>
                                        </div>
                                        <div>
                                                  <div class="color-1">
                                                    <p>Situated in Henfield, Baloos is the creation of chef and restaurateur Chris and Amanda. Chris&rsquo; passion for food using the freshest, local and seasonal produce combined with Amanda&rsquo;s friendly front-of-house charm and personal touch to make Baloos the perfect spot for lunch or evening meal.                                               </p>
                                                  </div>
                                            <a href="#" class="button-1"><span>read more</span></a>
                                        </div>
                                    </div>
                                          <div class="col-2">
                                        <div class="slider_bg">
                                            <div class="slider">
                                                <ul class="items">
                                                    <li><img src="images/slider_1.jpg" alt=""></li>
                                                    <li><img src="images/slider_2.jpg" alt=""></li>
                                                    <li><img src="images/slider_3.jpg" alt=""></li>
                                                    <li><img src="images/slider_4.jpg" alt=""></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </header>
    <!--==============================content================================-->
        <section id="content">
                  <div class="bg-3">
                                  <div class="bg-4">
                          <div class="main">
                              <div class="container_24">
                                  <div class="wrapper">
                                      <article class="grid_24">
                                          <div class="wrapper border-1 margin-bot3">
                                              <article class="grid_6 suffix_2 alpha">
                                                  <h4 class="indent-top margin-bot1">restaurant hours</h4>
                                            <div class="color-3 lh-1 border-2">
                                                      <strong class="title-3 d-block margin-bot2">Bar </strong>
                                                11:30-8:30 Sunday-Thursday<br>
                                                11:30-9:00 Friday and Saturday
                                            </div>
                                            <div class="color-3 lh-1 border-2">
                                                      <strong class="title-3 d-block margin-bot2">Lunch</strong>
                                                Tue.-Sat. 12:00-2pm<br>
                                                No Lunch on Sunday
                                            </div>
                                            <div class="color-3 lh-1">
                                                      <strong class="title-3 d-block margin-bot2">Dinner</strong>
                                                Tuesday-Saturday 6:00- 9:30<br>
                                                Sunday 12:30-4pm
                                            </div>
                                        </article>
                                        <article class="grid_16 omega indent-top1">
                                                  <div class="wrapper">
                                                      <figure class="img-indent-l">
                                                          <img src="images/page1_img1.jpg" alt="">
                                                </figure>
                                                <div class="extra-wrap">
                                                          <div class="title-1"> Welcome!</div>
                                                    <div class="color-4 lh"><span class="color-3">Moleacene anrit ma hasese rayuaumso natoqu eagnis</span><br>
                                                    dist mte dulmuese feugiata lesua  kery ecencies phaledaty
                                                    fenanec sit amm easer ermeolor dapegetele mentum.
                                                    Baelursus eleifneanctor wisi et urna. Aliquam eravolutpatis
                                                    turpisntey yoleacene anritserauas ty miwert betyudes.</div>
                                                    <div class="title-2">chef</div>
                                                    <figure class="sign">
                                                              <img src="images/page1_img2.png" alt="">
                                                    </figure>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                    <div class="wrapper border-1 indent-top">
                                              <article class="grid_7 suffix_1 alpha">
                                                  <h4 class="margin-bot4">about BALOOS</h4>
                                            <strong class="color-3 size-1 reg">Moleacene anrit maha deyuas</strong>
                                            <div class="margin-bot">Cum socis natoqu eagn dist mte dulm uese feugiata lesu kery lecenas stricies phaledatyfec sim easer erment.</div>
                                            <a href="#" class="button-2"><span>read more</span></a>
                                        </article>
                                        <article class="grid_16 omega">
                                                  <h4 class="margin-bot"> OUR RECOMENDED dishes of the MONTH</h4>
                                            <div class="wrapper margin-bot3">
                                                      <article class="grid_8 alpha">
                                                          <div class="wrapper">
                                                              <figure class="img-indent-2">
                                                                  <img src="images/page1_img3.jpg" alt="">
                                                        </figure>
                                                        <div class="extra-wrap indent-top2">
                                                                  <a href="#" class="color-6 link2">Grilled Fish</a><br>
                                                            kery lecenas stricies phaledatyfenanec sit amm easer erment. Ut ts dolor dapege telementum.
                                                        </div>
                                                    </div>
                                                </article>
                                                      <article class="grid_8 omega">
                                                          <div class="wrapper">
                                                              <figure class="img-indent-2">
                                                                  <img src="images/page1_img4.jpg" alt="">
                                                        </figure>
                                                        <div class="extra-wrap indent-top2">
                                                                  <a href="#" class="color-6 link2">Chicken Quesadilla</a><br>
                                                            lesuada  kercenas stricies phatyfenanec sit amm easer rment. Ut ts dolor dapege telementum.
                                                        </div>
                                                    </div>
                                                </article>
                                            </div>
                                                  <a href="#" class="button-3"><span>view all recipes</span></a>
                                        </article>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <!--==============================footer================================-->
        <footer>
                  <div class="main">
                      <div class="container_24">
                          <div class="wrapper indent-bottom">
                              <article class="grid_14">
                                  <nav>
                                      <ul class="menu2">
                                    <li><a class="active" href="index.html">home</a></li>
                                    <li><a href="menu.html">our menu</a></li>
                                    <li><a href="about us.html">about us</a></li>
                                    <li><a href="reservation.html">Reservation</a></li>
                                    <li><a href="contact us.html">contacts</a></li>
                                </ul>
                            </nav>
                        </article>
                        <article class="grid_10">
                            <div class="indent-top3">
                                <div class="border-3 prefix_1">
                                    <div class="title-4">Find Us On Social Network:</div>
                                    <p class="p0 size-2 color-7">Bayarsety kertya aset aplicaboes kerasaer </p>
                                    <ul class="soc_list">
                                        <li><a href="#"><img src="images/soc_1.png" alt=""></a></li>
                                        <li><a href="#"><img src="images/soc_2.png" alt=""></a></li>
                                        <li><a href="#"><img src="images/soc_3.png" alt=""></a></li>
                                        <li><a href="#"><img src="images/soc_4.png" alt=""></a></li>
                                        <li><a href="#"><img src="images/soc_5.png" alt=""></a></li>
                                    </ul>
                                </div>
                            </div>
                        </article>
                    </div>
                    <div class="wrapper border-4">
                              <article class="grid_24 aligncenter down">
                                  BALOOS &copy; 2013 &bull; <a href="Privacy.html" class="link2">Privacy policy</a> &bull;
                            <span class="d-block"><!--{%FOOTER_LINK} --></span>
                        </article>
                    </div>
                </div>
            </div>
        </footer>
    <script type="text/javascript">
              $(window).load(function(){
            $('.slider')._TMS({
                duration:800,
                preset:'simpleFade',
                pagination:true,//'.pagination',true,'<ul></ul>'
                pagNums:false,
                slideshow:7000,
    </script>
    </body>
    </html>
    HERE IS THE CCS CODE
    @import url(http://fonts.googleapis.com/css?family=Amethysta);
    @import url(http://fonts.googleapis.com/css?family=Mr+De+Haviland);
    @import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
    /* Getting the new tags to behave */
    article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
    mark, rp, rt, ruby, summary, time {display:inline;}
    /* Global properties ======================================================== */
    html {width:100%;}
    html, body {height:100%;}
    body {           
              font-family:Arial, Helvetica, sans-serif;
              color:#666666;
              min-width:960px;
              background:#efefef;
              font-size:14px;
              line-height:22px;
    .main {
              width:960px;
              padding:0;
              margin:0 auto;
              position:relative;
    a {color:#666666; outline:none; text-decoration:none;}
    a:hover {text-decoration:none;}
    .link {text-decoration:underline;}
    .link2:hover {text-decoration:underline;}
    .wrapper {width:100%; overflow:hidden;}
    .extra-wrap {overflow:hidden;}
    p {margin-bottom:22px;}
    .p0 {margin-bottom:0;}
    .p1 {margin-bottom:0;}
    .d-in-block {display:inline-block;}
    .d-block {display:block;}
    .reg {text-transform:uppercase;}
    .rel {position:relative;}
    .fleft {float:left;}
    .fright {float:right;}
    .alignright {text-align:right;}
    .aligncenter {text-align:center;}
    .img-indent-l {float:left; margin:0px 39px 0px 0px;}
    .img-indent-2 {float:left; margin:0px 32px 0px 0px;}
    .img-indent-3 {float:left; margin:6px 32px 0px 0px;}
    /*********************************boxes**********************************/
    .indent {padding:0;}
    .indent-left {padding-left:0;}
    .indent-bottom {padding-bottom:25px;}
    .indent-right {padding-right:0;}
    .indent-top {padding-top:39px;}
    .indent-top1 {padding-top:37px;}
    .indent-top2 {padding-top:6px;}
    .indent-top3 {padding-top:29px;}
    .indent-top4 {padding-top:40px;}
    .indent-top5 {padding-top:8px;}
    .margin-top { margin-top:0;}
    .margin-bot {margin-bottom:33px;}
    .margin-bot1 {margin-bottom:26px;}
    .margin-bot2 {margin-bottom:9px;}
    .margin-bot3 {margin-bottom:29px;}
    .margin-bot4 {margin-bottom:23px;}
    .margin-bot5 {margin-bottom:19px;}
    .margin-bot6 {margin-bottom:11px;}
    .margin-bot7 {margin-bottom:42px;}
    .margin-left {margin-left:0;}
    .margin-right {margin-right:20px;}
    .margin-right1 {margin-right:30px;}
    /*********************************header*************************************/
    header {
              width:100%;
              background:url(../images/header.jpg) center top no-repeat #282829;
    h1 {
              padding:32px 0 23px 299px;
              h1 a {
                        display:block;
                        text-indent:-9999px;
                        background:url(../images/logo.png) no-repeat 0 0;
                        width:316px;
                        height:86px;
    /***** menu *****/
    header nav {
              float:left;
              background:url(../images/menu_r.png) right 38px no-repeat;
              width:100%;
    .menu {
              float:left;
              padding:9px 0 8px 84px;
              position:relative;
              z-index:20;
              font-family: 'Amethysta', serif;
              background:url(../images/menu_l.png) left 38px no-repeat;
    .menu li {
              float:left;
              position:relative;
              background:url(../images/menu2.png) left top no-repeat;
              padding:27px 45px 24px 42px;
    .menu li:first-child {
              background:none;
              padding-left:0;
    .menu li a {
              display:block;
              font-size:16px;
              line-height:20px;
              color:#dbdada;
              text-transform:uppercase;
              z-index:20;
    .menu li a span {
              display:block;
              width:18px;
              height:9px;
              background:url(../images/sub.png) left top no-repeat;
              position:absolute;
              top:-999px;
              left:50%;
              margin-left:-9px;
    .menu li:first-child a span {
              margin-left:-33px;
    .menu li.sfHover {
              position:relative;
              z-index:10;
    .menu li a.active span,
    .menu > li > a:hover span,
    .menu > li.sfHover > a span {
              top:-9px;
    .menu ul {
              z-index:20;
              letter-spacing:normal;
              position:                    absolute;
              top:                              -9999em;
              width:                              100px;
              background:url(../images/menu4.gif) left top repeat;
              border:                              none;
              box-shadow:5px 5px 5px rgba(0,0,0, .26);
              padding:6px 20px 10px;
    .menu ul ul {
              background-image:url(../images/menu5.gif);
    .menu ul li {width:          100%;}
    .menu li:hover {visibility:          inherit; }
    .menu li li {
              margin:0;
              border:none;
              padding:9px 0 6px 0;
              background:url(../images/menu6.png) left top repeat-x;
    .menu li li li {
              background-image:url(../images/menu7.png);
    .menu li li:first-child {
              background:none;
    .menu li li a {
              background:none;
              display:                    block;
              padding:                    0 0 0 6px;
              font-size:                    14px;
              line-height:          17px;
              color:                              #fff;
    .menu li li > a:hover,
    .menu li li.sfHover > a {
              color:#b16167;
    .menu li:hover ul, .menu li.sfHover ul {
              left:                              22px;
              top:                              79px;
              z-index:                    999;
    ul.menu li:hover li ul, ul.menu li.sfHover li ul {
              top:                              -999em;
    ul.menu li li:hover ul, ul.menu li li.sfHover ul {
              left:                              100px;
              top:                              -6px;
              z-index:                    99;
    ul.menu li li:hover li ul, ul.menu li li.sfHover li ul {
              top:                              -999em;
    /*********************************content*************************************/
    #content {
              width:100%;
              background:url(../images/bg-1.jpg) center -464px no-repeat #020202;
              padding:0;
    #page1 #content {
              margin-top:-194px;
    .col-1 {
              float:left;
              width:360px;
    .col-2 {
              float:left;
              width:590px;
    .col-3 {
              float:left;
              width:300px;
    .col-4 {
              float:left;
              width:280px;
    .sign {
              text-align:right;
              padding:10px 40px 0 0;
    .letter {
              text-align:center;
              font-family: 'Mr Dafoe', cursive;
              font-size:70px;
              line-height:84px;
              color:#cbcbcb;
              float:left;
              width:60px;
              margin-right:15px;
    /******************* slider *************/
    .slider_bg {
              background:url(../images/slider_bg.jpg) left top no-repeat;
              overflow:hidden;
              width:590px;
              height:429px;
              overflow:hidden;
    .slider {
              width:534px;
              height:429px;
              position:relative;
              background:url(../images/preloader.png) center center no-repeat;
    .pagination {
              position:absolute;
              right:-37px;
              top:21px;
              overflow:hidden;
              z-index:999;
    .pagination li {
              margin-top:3px
    .pagination li:first-child {
              margin-top:0;
    .pagination li a {
              display:block;
              width:15px;
              height:15px;
              background:url(../images/pag_nav.png) left bottom no-repeat;
    .pagination li a:hover,
    .pagination .current a {
              background-position:left top;
    .pagination .current a {
              cursor:default;
    .items {display:none;}
    /******************* slideshow *************/
    #slideshow {
              width:620px;
              height:705px;
              overflow:hidden;
              background:none !important;
    #slideshow>div {
              width:620px;
              height:705px;
              background:none !important;
    #prev {
              float:left;
    #next {
              float:left;
    #nav {
              overflow:hidden;
              padding:0px 15px 0;
              float:right;
    #nav li {
              float:left;
              font-size:13px;
              line-height:16px;
              text-align:center;
              margin-left:1px;
              display:block !important;
    #nav li:first-child {
              margin-left:0;
    #nav li a {
              color:#666666;
              display:block;
              width:14px;
              height:16px;
              overflow:hidden;
    #nav .activeSlide a,
    #nav li a:hover {
              color:#fff;
    .nav_wrap {
              overflow:hidden;
              position:absolute;
              width:200px;
              height:30px;
              right:97px;
              top:-33px;
    #next,
    #prev {
              text-indent:-9999px;
              float:right;
              overflow:hidden;
              display:block;
              width:10px;
              height:18px;
    #next {
              background:url(../images/next.png) left top no-repeat;
    #prev {
              background:url(../images/prev.png) left top no-repeat;
    #next:hover ,
    #prev:hover {
              background-position:right top;
    /*********************************bg's*************************************/
    .bg-1 {
              background:url(../images/light.png) center top no-repeat;
    .bg-2 {
              background:url(../images/bg-2.jpg) left top no-repeat;
              height:429px;
              overflow:hidden;
              text-align:center;
    .bg-2>div {
              padding:80px 15px 0 0;
    .bg-2>div+div {
              font-size:13px;
              line-height:20px;
              padding:27px 45px 0 50px;
    .bg-3 {
              background:url(../images/bg-4.png) left top repeat-x;
    .bg-4 {
              background:url(../images/bg-5.png) left bottom repeat-x;
              padding:70px 0 35px;
    #page1 .bg-4 {
              padding:225px 0 35px;
    .bg-5 {
              background:url(../images/bg-7.png) center top no-repeat;
    .bg-6 {
              background:url(../images/bg-8.gif) center top repeat-x;
    .border-1 {
              background:url(../images/border-1.png) left top repeat-x;
    .border-2 {
              border-bottom:1px dotted #313131;
              padding:0 0 18px;
              margin:0 0 15px;
    #page3 .border-2 {
              padding:0 0 23px;
              margin:0 0 14px;
    #page4 .border-2 {
              padding:0 0 35px;
              margin:0 0 37px;
    .border-3 {
              background:url(../images/border-2.png) left top repeat-y;
              padding:5px 0 4px;
    .border-4 {
              background:url(../images/border-3.png) left top repeat-x;
    /*********************************buttons*************************************/
    .button-1 {
              display:inline-block;
              font-size:18px;
              line-height:22px;
              color:#f9dfdf;
              font-family: 'Amethysta', serif;
              text-transform:uppercase;
              background:url(../images/button1_l.png) left 5px no-repeat;
              padding:0 0 0 23px;
    .button-1 span {
              display:block;
              background:url(../images/button1_r.png) right 5px no-repeat;
              padding:0 29px 0 4px;
    .button-1:hover {
              color:#1d1d1d;
    .button-2 {
              display:inline-block;
              text-transform:uppercase;
              font-family: 'Amethysta', serif;
              font-size:14px;
              line-height:17px;
              color:#fff;
              background:url(../images/button-2.gif) left bottom repeat-x;
              height:41px;
              overflow:hidden;
              border:1px solid #343434;
    .button-2 span {
              display:block;
              padding:13px 16px 11px 14px;
    .button-2:hover {
              background-position:left top;
    .button-3 {
              text-align:right;
              text-transform:uppercase;
              display:block;
              background:url(../images/button-2.gif) left bottom repeat-x;
              height:41px;
              border:1px solid #323232;
              font-size:16px;
              line-height:20px;
              color:#bfbfbf;
              font-family: 'Amethysta', serif;
    .button-3:hover {
              background-position:left top;
    .button-3 span {
              background:url(../images/marker-1.png) left 11px no-repeat;
              display:inline-block;
              padding:11px 19px 0 18px;
    /*********************************lists*************************************/
    .dl-1 dt {
              color:#fff;
    .dl-1 dd {
              overflow:hidden;
    .dl-1 dd span {
              display:block;
              float:left;
              width:100px;
    .soc_list {
              overflow:hidden;
              padding:19px 0 0;
    .soc_list li {
              float:left;
              margin-left:10px;
    .soc_list li:first-child {
              margin-left:0;
    .soc_list li a {
              display:block;
              width:32px;
              height:32px;
    .ul-1 li {
              font-size:14px;
              line-height:20px;
              font-family:Arial, Helvetica, sans-serif;
    .ul-1 li a {
              color:#b7b7b7;
    .ul-1 li a:hover {
              color:#fff;
    /*********************************fonts*************************************/
    h3 {
              font-size:28px;
              line-height:34px;
              color:#fbecec;
              font-family: 'Amethysta', serif;
              font-weight:normal;
              text-transform:uppercase;
              background:url(../images/bg-3.png) left bottom no-repeat;
              padding:0 0 33px 0;
    h3 span {
              display:block;
              margin-top:-5px;
              color:#f7d3d3;
    h4 {
              font-size:16px;
              line-height:20px;
              color:#dbdada;
              font-family:'Amethysta', serif;
              font-weight:normal;
              text-transform:uppercase;
    .title-1 {
              color:#a0a0a0;
              font-family:'Mr De Haviland', cursive;
              font-size:72px;
              line-height:87px;
              margin:-8px 0 15px 0;
              padding-left:5px;
    .title-2 {
              text-align:right;
              padding:12px 90px 0 0;
              color:#dddcdc;
              font-family:'Amethysta', serif;
              font-size:18px;
              line-height:22px;
              text-transform:uppercase;
    .title-3 {
              font-size:13px;
              line-height:18px;
              color:#fff;
    .title-4 {
              color:#464646;
              font-family:'Amethysta', serif;
              font-size:18px;
              line-height:22px;
              text-transform:uppercase;
              margin-bottom:3px;
    .lh {
              line-height:23px;
    .lh-1 {
              line-height:20px;
    .size-1 {
              font-size:13px;
              display:block;
    .size-2 {
              font-size:11px;
              line-height:14px;
    .color-1 {color:#e4d0d1;}
    .color-2 {color:#dcb0b1;}
    .color-3 {color:#b7b7b7;}
    .color-4 {color:#7e7e7e;}
    .color-5 {color:#b2b2b2;}
    .color-6 {color:#fff;}
    .color-7 {color:#919191;}
    /******* form's ********/
    /***** contact form *****/
              #form1 fieldset {
                        border:none;
                        padding:0;
                                  #form1 label {
                                            display:block;
                                            min-height:57px;
                                  #form1 label.message {
                                            height:232px;
                                  .inp {
                                            display:block;
                                            width:320px;
                                            height:40px;
                                            padding:0 14px;
                                            background:url(../images/inp-1.png) left top repeat;
                                            overflow:hidden;
                                            position:relative;
                                            border:1px solid #343434
                                  #form1 input {
                                            width:320px;
                                            padding:12px 0 12px;
                                            margin:0;
                                            font-family:Arial, Helvetica, sans-serif;
                                            font-size:14px;
                                            height:16px;
                                            color:#666;
                                            border:none;
                                            background:none;
                                            outline:none;
                                  #form1 .area .error { float:none;}
                                  .text_a {
                                            position:relative;
                                            overflow:hidden;
                                            display:block;
                                            width:478px;
                                            height:230px;
                                            padding:0 14px;
                                            background:url(../images/inp-1.png) left top repeat;
                                            border:1px solid #343434
                                  #form1 textarea {
                                            height:216px;
                                            margin:0;
                                            width:478px;
                                            padding:12px 0;
                                            font-family:Arial, Helvetica, sans-serif;
                                            font-size:14px;
                                            color:#666;
                                            border:none;
                                            background:none;
                                            overflow:auto;
                                            outline:none;
                                            resize:none;
                                  #form1 a {cursor:pointer;}
                                            #form1 .success {display:none; margin-bottom:10px;}
                                            #form1 .error,
                                            #form1 .empty {
                                                      color:#f00;
                                                      font-size:11px;
                                                      line-height:18px;
                                                      display:none;
                                                      overflow:hidden;
                        #form1 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
                        #form1 .buttons-wrapper a { margin-left:30px;}
              #form2 fieldset {
                        border:none;
                        padding:0;
                                  #form2 label {
                                            display:block;
                                            min-height:57px;
                                  #form2 label.message {
                                            height:232px;
                                  .inp2 {
                                            display:block;
                                            width:318px;
                                            height:40px;
                                            padding:0 14px;
                                            background:url(../images/inp-1.png) left top repeat;
                                            overflow:hidden;
                                            position:relative;
                                            border:1px solid #343434
                                  #form2 input {
                                            width:318px;
                                            padding:12px 0 12px;
                                            margin:0;
                                            font-family:Arial, Helvetica, sans-serif;
                                            font-size:14px;
                                            height:16px;
                                            color:#666;
                                            border:none;
                                            background:none;
                                            outline:none;
                                  #form2 .area .error { float:none;}
                                  .text_a2 {
                                            position:relative;
                                            overflow:hidden;
                                            display:block;
                                            width:318px;
                                            height:230px;
                                            padding:0 14px;
                                            background:url(../images/inp-1.png) left top repeat;
                                            border:1px solid #343434
                                  #form2 textarea {
                                            height:206px;
                                            margin:0;
                                            width:318px;
                                            padding:12px 0;
                                            font-family:Arial, Helvetica, sans-serif;
                                            font-size:14px;
                                            color:#666;
                                            border:none;
                                            background:none;
                                            overflow:auto;
                                            outline:none;
                                            resize:none;
                                  #form2 a {cursor:pointer;}
                                            #form2 .success {display:none; margin-bottom:10px;}
                                            #form2 .error,
                                            #form2 .empty {
                                                      color:#f00;
                                                      font-size:11px;
                                                      line-height:18px;
                                                      display:none;
                                                      overflow:hidden;
                        #form2 .buttons-wrapper {text-align:right; padding-top:40px; position:relative;}
                        #form2 .buttons-wrapper a { margin-left:30px;}
    .map {
              width:350px;
              height:365px;
              margin:0 0 26px;
    /*******

    Hi -
    While I am not familiar with the use of all the span tags I see,
    You said "currently on the "about us" option a sub menu drops down, ive worked out how to  add to this menu and change the words"
    What is the problem doing the same thing under the other top level item?

  • Need help formatting Spry drop down menu

    FYI, I'm using CS3 on a Mac.
    I'm working on a full CSS layout of a page in a site. OK, not
    full CSS, I have a table controlling the text in the main content
    area. I need a drop down menu for this page, so I inserted a spry
    menu bar for the page navigation. *phew*! The learning curve on
    that is killing me! :) Just trying to get the menu items spread out
    ("full justify") has take me forever. I'm still having some major
    issues.
    Can someone tell me which styles to adjust to fix the things
    below? I think I have fixed most of it, but can't figure out these
    items:
    1. I want the sub menu items to have normal font weight (but
    the main menu items should remain "bold"
    2. I want the sub menu items' background to extend at least
    past the end of the item. With some of the longer items, the
    background is cut off.
    3. I want the border back around the sub menu items. It was
    there originally, but I some how removed it and can't get it back.
    I don't want a border around the main menu items.
    4.
    Most importantly! The sub menu items don't line up
    vertically in IE on my PC. They fall into several horizontal rows
    that run off the side of the page - almost impossible to use!
    5. Oh, and I almost forgot, the submenu is now showing up all
    the way on the left side of the page. It should be directly below
    the "Participating Farms" link.
    This is the page:
    http://www.nectfarmersmarket.org/farmse.html
    Thank you!

    Can anyone tell me if this is the right place for this
    thread?
    Thanks,

  • Help with rollover drop down menus

    I created a flash document with rollover drop down menus, but
    the menus some times won't go back up unless you rollover their
    associated buttons again. Also I created a link inside one of the
    buttons on one of the menus, but when you click that button the
    menu stays down until you rollover the button again. Some times 2
    menus will be down at the same time. Can anyone help me fix these
    problems? I'm a beginner and this is the first flash movie I've
    ever made.

    There is a lot of documentation on the web describing techniques to implement "Cascading Dropdown lists in Excel".
    A few starting points that may be helpful:
    http://chandoo.org/wp/2014/02/13/dynamic-cascading-dropdowns-that-reset/
    https://www.ablebits.com/office-addins-blog/2014/09/30/dependent-cascading-dropdown-lists-excel/

Maybe you are looking for