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

Similar Messages

  • 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?

  • Horizontal Dropdown Menu Buttons DON'T WORK

    Any suggestions please?!
    I am a novice Flash Developer and I created a horizontal
    drowndown menu in Flash with rollover submenus. The dropdown menu
    has buttons with Behaviors assigned to "go to webpage". The
    published .swf file works fine, links and all. It is only when I
    place the menu inside a Dreamweaver DIV that exists over another
    image DIV that the buttons don't work. The menu will drop down and
    can be rolled over, but it is when I try to click on the buttons to
    activate the links that nothing functions.
    It is worth mentioning that the buttons have an assigned "Down"
    state that doesn't activtate, so I know the buttons are incapable
    of even being clicked on. The problem is within Dreamweaver,
    not the flash movie menu. Perhaps I am overlooking a widely know
    trick to making this work? Am I missing a simple line of HTML??
    Anybody have any experience with this?
    Greatly Appreciated

    Hi,
    May I please have the URL of the site and any specific pages you'd like me to take a look at?

  • Dropdown Menu CSS Style

    Hi!
    I am trying to create a dropdown menu in Dreamweaver. I have watched several tutorials and read many how-to guides and my html looks fine, but editing the style is really throwing me off. I am a beginner to Dreamweaver, so I am unsure of the properties I need to make this right.  The code below, when I hover over the first button the dropdown menu goes behind the other two buttons.  I need the dropmenu to go off to the side of the buttons and down.  If not that, I can align the buttons to go horizontal, so they aren't being covered. I hope that makes sense.
    Thank you in advance!! 
    -M
    HTML
      <div class="dropdown" id="dropdown" style="text-align: left;">
    <ul>
            <li><a href="#">Americas</a>
               <ul>
                       <li><a href="#">Connecticut</a></li>
                        <li><a href="#">Ohio</a></li>
                        <li><a href="#">Vermont</a></li>
                        <li><a href="#">California</a></li>
                        <li><a href="#">Canada</a></li>
                        <li><a href="#">Brazil</a></li>
               </ul>
            </li>
    </ul>
      <ul>
           <li><a href="#">China</a>
                 <ul>
                         <li><a href="#">China</a></li>
                   </ul>
            </li>
    </ul>
    <ul>
            <li><a href="#">Europe</a>
                <ul>
                   <li><a href="#">France</a></li>
                   <li><a href="#">UK</a></li>
                </ul>
            </li>
    </ul>
    </div>
    STYLE
    #dropdown {
    margin: 0;
    width: 150px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    #dropdown ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    #dropdown li {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
        position:relative;
    #dropdown ul li a {
    text-align: center;
    height: 30px;
    width: 150px;
    display: block;
    color: #000;
    text-decoration: none;
    border: 1px solid #000;
    text-shadow: 1px 1px 1px #000;
    background: #CCC;
    #dropdown ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
      #dropdown ul li:hover ul {
    visibility:visible;
    position:absolute;
       #dropdown li:hover {
    background: #7D92C6;
    float: left;
        #dropdown ul li:hover ul li a:hover {
        color:#000;
        background:#7D92C6;
      #dropdown a:hover {  
      color:#000;
      background: #7D92C6;
    .clearFloat {
        clear:both;
        margin:0;
        padding:0;

    Are you doing this as an execise in learning or is it for a real website. I ask because if the latter why not just use a tested and proven commercial product and be done with it?  I have used the PVII (http://www.projectseven.com) products for years and can't recommend them highly enough.

  • IE 7 - CSS Issues with Spry dropdown Menu *HELP*

    I am using a spry horizontal dropdown menu generated in DW. The menus look consistant in all other browsers except ie7 -  When the drop down menu occurs they all appear to the right and not directly under its menu item.. Looked around in the Css and i cant seem to find the right rule to make the change in ie7 only... was planning on using a css conditional statement to shift them left.. But im not having any luck.. HELP!
    Thanks so much in advance!

    Sorry.. Here is the link.. Thanks so much for your willingness to help!
    http://soldesign.us/_working/WEBSITE_BoulderPlasticSurgery/index.html

  • 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>

  • SPRY Horizontal Menu CSS control

    I am using spry 1.6 (upgraded) on dreamweaver CS3. I created
    a horizontal SPRY menu within a div and I want to center the menu
    within the div using CSS. I can't seem to get this to work. I would
    have thought applying "margin: 0px Auto;" to the ul.horizontalMenu
    (sp?) class in the Spry CSS file would have done the trick but it
    seems to ignore the auto. I can put say 0px 20% and it works but
    this does not compensate for possible expanding menus. I know this
    is a newbee question but that is what I am.
    Thanks for the help in advance
    Terry

    Hi,
    The original CSS has been very carefully composed so that it will work in all browsers. If you make any changes to the original and you do not know what you are doing, you are asking for problems.
    When I look at your first set of rules and I see the following marked in red and a rules marked in green that are left out, then I know you will have a problem:
    ul.MenuBarHorizontal
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        background-image: url(myImage.jpg); // rename the image to your own
        background-repeat: repeat;
        vertical-align: bottom;
        float: none;
        position: absolute;
        margin: auto;
    Keep in mind that the original stylesheet has no browser issues. Any changes that you make are for your account and have basically nothing to do with Spry.
    My suggestion to you is, make a copy of the modified stylesheet for reference, then put back the original stylesheet. Consequently, make a new stylesheet called myStyles.css or similar, and put your changed rules in the newly created stylesheet eg.
    ul.MenuBarHorizontal
         background-image: url(myImage.jpg);
         background-repeat: repeat;
    Then attach this stylesheet to your document after the original stylesheet.
    If you cannot get the required result, merely play around with the rules within myStyles.css.
    I hope this helps.
    Ben

  • CSS - Vertical Dropdown Menu

    Hey guys.
    I need the CSS for a vertical menu much like the one on the
    Adobe Homepage under 'Products and
    Solutions' where more data is revealed when the title is scrolled
    over.
    If anybody has links to a tutorial or even have one of these
    menus I could possibly have a look at it would be much appreciated.
    Cheers in advance.

    Hello,
    This is a nice CSS dropdown menu tutorial:
    http://projectseven.com/tutorials/navigation/auto_hide/index.htm
    And another:
    http://www.tjkdesign.com/articles/dropdown/
    example of menu:
    http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp
    Take care,
    Tim
    "ForensicBop" <[email protected]> wrote in
    message
    news:g54p5j$nke$[email protected]..
    > Hey guys.
    >
    > I need the CSS for a vertical menu much like the one on
    the Adobe homepage
    > under 'Products and Solutions' where more data is
    revealed when the title
    > is
    > scrolled over.
    >
    > If anybody has links to a tutorial or even have one of
    these menus I could
    > possibly have a look at it would be much appreciated.
    >
    > Cheers in advance.
    >

  • Long Vertical CSS dropdown menu goes off screen

    Greetings,
    I developed a dropdown menu using Spry (Adobe Dreamweaver). It is a  vertical menu with multiple sub-menus. Some lists are very long and the  menu goes below and off the page.
    I found a great example of what I want my menu to do: http://coins.shop.ebay.com/
    On the side, it says "Browse By:" and there is a vertical menu. If I  shrink the page up vertically a little and watch the sub-menus pop out, I  notice they get pushed up if the parent is close to the bottom of the  screen, which ensures that none of the options go off the page, they get  pushed up.
    How can this be done?
    Thanks

    Have a look here http://pleysier.com.au/mike/
    Maybe this is for you.
    For the accordion I have used jQuery UI Accordion for Widget Browser which can be found here http://emea-events.wip4.adobe.com/cfusion/exchange/index.cfm?event=ext ensionDetail&loc=en_us&extid=2028523
    If  you are using DWCS4 or 5, then you can easily incorporate the widget,  if not then it is a matter of copying and pasting the code.
    Gramps

  • Mouse Hover Color in Horizontal Dropdown Navigation

    Hi,
    Mouse Hover color in the Horizontal Dropdown Navigation scheme is not changed even if you apply a different stylesheet. It remains the default blue. Is there a setting some where or it needs to be modified in the navigation scheme.
    thanks
    -Sachin

    Sachin,
    Are you talking about the mouse hover color for the dropdown menu entries? That stylesheet class is defined in a different stylesheet. Look in
    <imageserver dir>\imageserver\plumtree\common\private\js\jsportalmenus\122846\styles\css\PTPMMenu.css.
    The number might be different on your system. If you view the HTML source on a portalpage and search for PTPMMenu.css you will see the number your portal is using. The styleclasses you want to change in PTPMMenu.css are .PTPMMenuBody .hoverand .PTPMMenuBody .hover td. You might also need to change other classes with the highlight color depending on the type of entries you have in your menus.

  • Help with a very simple horizontal Spry menu

    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.

    steve0308 wrote:
    Hi,
    I’ve always received great help here and I’m sure that if I explain the issue I’m having properly I’ll get some good input.
    This is to do with a very simple horizontal Spry menu, there’s no dropdown involved, only a color change on the rollover.  The menu items are in a shade of blue, then on the rollover each menu item changes to a shade of red, the font color remains white for both.
    What’s mentioned above works flawlessly, the problem I’m having is this … On the rollover when the menu block items turn red, I’m attempting to add a 1px border around the entire block, but when I do the block item seems to want to change its width and height slightly when it’s rolled-over.  As I said, without the border it works perfect.
    Any suggestions will be appreciated.
    You also have to apply the border to the 'a' css selector. If you just apply it to the 'a:hover' css selector then the tab will grow slightly bigger because its adding more width and height to the overall structure.

  • Horizontal dropdown menubar - Vertical dropdown menubar

    Hi,
    I would need help to turn a horizontal dropdown menubar to a vertical dropdown menubar. I am not experienced with CSS so don't know how to change code correctly. I would like to get submenu going vertically beside main menu.
    http://www.villalotus.net/TEST/test.htm
    Thanks in advance!

    Thank you Ken!
    Unfortunately I didn't find help from tutorials. I manged to turn menu vertically but submenu goes on top of main menu.
      /*main nav*/
    nav {
              margin-left: auto;
              margin-right: auto;
    ul {
              padding: 0;
              margin: 0;
    nav ul {
              list-style: none;
              font-weight: bold;
              font-size: 20px;
              margin: 5px;
              width: 180px;
    nav ul ul {
              display: none;
              margin: 0px;
              padding: 0px;
    nav ul li {
               position: relative;
    nav ul a {
              display: block;
              width: 160px;
              text-align: center;
              text-decoration: none;
              color: #fff;
              border: 1px solid #004c99;
              border-radius: 8px;
              margin-right: auto;
              margin-left: auto;
              padding-top: 5px;
              padding-right: 9px;
              padding-bottom: 5px;
              padding-left: 9px;
    nav ul a:active       {
              background: rgba(255,255,255,0.4);
              color: #FFF;
    nav ul li a:hover, ul a:focus {
              text-decoration: none;
              background-color: #6699cc;
              color: #FFFFFF;
    nav ul a:link, nav ul a:visited {
              background: rgba(255,255,255,0.2);
              color: #FFFFFF;
    nav ul li a {
              margin-top: 0px;
    nav ul ul li {
                position: relative;
    nav ul ul li a {
              color: #fff;
              margin: 0px;
    nav ul ul li a:hover {
              background: #6699cc;
    nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
              background-color: #3370AD;
    nav ul li:hover {
              margin-top: 0px;
    nav ul li:hover> ul{
              display: block;
              position: relative;
    nav ul:after {
              content: "";
              clear: both;
              display: block;
    Message was edited by: Karonaful

  • Horizontal spry menu style appears turned off when on the internet though can view it in live mode!?

    The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
    this is the coding above the head.
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu).  Any help would be greatly appreciated!

    thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
    Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
    thanks again for your help.

  • Dropdown menu in APEX 4.0

    Hi,
    I am wondering how to create the Dropdown menu in APEX 4.0. Similar to the Oracle Application Express Homepage or the one gets created in any Websheet Application. I have tried to use the List but unable to place into the right position (Display Point) to get similar look and feel in Theme 2. Builder Blue.
    Please let me know if there is a easy way along with the steps.
    Thanks,
    AS

    The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)
    0) a) My Page template name is WithNicolettePlugin.
    b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
    c) the settings of the plugin as follows:
    - Template : WithNicolettePlugin
    - Before HTML : <ul class="dhtmlMenuLG2"> - After HTML : </ul> - jQuery selector submenu : .dhtmlSubMenu2
    - Tab set : main
    - Include single subtab : yes
    - Class first parent : ui-corner-left
    - Class last parent : ui-corner-right
    - File Prefix : #IMAGE_PREFIX#
    the others are empty     
    1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
    <link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />2) link the following Scripts into the Header section of the Page Template
    <script type="text/javascript">
    var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
    </script>
    <script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <style> html {visibility:hidden;} </style>
    <script type="text/javascript">
    apex.security.framebreaker("D");
    </script>
    <script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>3) Re-write the Body section to be as the following
    <div id="page-header">
      .... LOGO AND WELCOME HERE ...... 
       <div class="apex-top-bar-end">
           <div class="apex-top-bar">
                <div id="tabs" class="dhtmlMenuLG">
                  #REGION_POSITION_08#   <!-- Put the plugin at your page zero in REGION 8 -->
                </div>
           </div>
       </div>  
    </div>
    <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
    <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
    <div id="body">
        <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
        <tbody>
          <tr>
            <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
            <td class="tbl-sidebar">#REGION_POSITION_03#</td>    
          </tr>
        </tbody>
        </table>
    </div>4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
         title="#TAB_LABEL#">
         "#TAB_LABEL#
      </a>
    </li>
    {code}
    and Non Current Standard Tab as the following
    {code}
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
          title="#TAB_LABEL#">
          "#TAB_LABEL#
      </a>
    </li>5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
    <div id="#TAB_ID#" class="current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12" 
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>and Non Current Parent Tab as the following
    <div id="#TAB_ID#" class="non-current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12" 
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>6- You will find a sample here in
    Workspace : ralab
    User : nicolette
    Password : abc123
    Application 33791 - TestDropDownAppBuilderTabs
    If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.
    Best Regards
    Mahmoud

  • Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

    I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
    Any ideas?

    You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
    If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
    http://projectseven.com/products/menusystems/pmm3/index.htm
    If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
    Basic CSS Drop Menu
    http://jsfiddle.net/mD4zW/28/
    jQuery MeanMenu for mobile/tablet devices
    MeanThemes | MeanMenu
    This is a working example inside a FluidGrid Layout (resize viewport)
    Alt-Web :: Fluid Grid Test
    Nancy O.

Maybe you are looking for