Skip navigation
VickiA95124
Currently Being Moderated

How do I make the Dreamweaver submenu box disappear when not in use?

Apr 11, 2012 12:23 PM

Tags: #cs5.5 #dreamweaver #submenus #menu #navigation #sprymenubar #spry_menu

Hi - Can someone help me correctly hide the submenu boxes when the submenu items aren't in use? I have been able to hide the submenu boxes, but when I do, they up being jumbled behind the main menu items. This is with Dreamweaver CS5.5. Right now the submenu boxes appear properly when you mouse over them, but when not in use you see an empty white box in the navigational menu.

 

Thanks!!!

 

http://www-rohan.sdsu.edu/~alexandv/cccsite/index.htm

 
Replies
  • Currently Being Moderated
    Apr 12, 2012 6:36 AM   in reply to VickiA95124

    When changing the properties and or their values in SpryMenuBarVertical.css, you must read the comments. This way you will not encounter any of the problems that you have got.

     

    Have a look at the following

    /********************************************************************* **********

     

    LAYOUT INFORMATION: describes box model, positioning, z-order

     

    ********************************************************************* **********/

     

    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

    ul.MenuBarVertical

    {

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        cursor: default;

        width: 11em;

        border-top-color: #FFFFFF;

        border-right-color: #FFFFFF;

        border-bottom-color: #FFFFFF;

        border-left-color: #FFFFFF;

        color: #FFFFFF;

        background-color: #FFFFFF;

        scrollbar-3d-light-color: #FFFFFF;

        float: inherit;

    }

    /* 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;

       background-color: #FFFFFF;

    }

    /* Menu item containers, position children relative to this container and are same fixed width as parent */

    ul.MenuBarVertical li

    {

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: relative;

        text-align: left;

        cursor: pointer;

        width: 10em;

        border-top-color: #FFFFFF;

        border-style: groove;

        border-right-color: #FFFFFF;

        border-bottom-color: #FFFFFF;

        border-left-color: #FFFFFF;

        background-color: #FFFFFF;

        margin: 0;

    }

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

    ul.MenuBarVertical ul

    {

        margin: -5% 0 0 95%;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: absolute;

        cursor: default;

        width: 8.2em;

        top: 0;

        z-index: 1020;

        left: -1000em;

       column-rule-color: #FFFFFF;

    }

    /********************************************************************* **********

     

    DESIGN INFORMATION: describes color scheme, borders, fonts

     

    ********************************************************************* **********/

    /* Submenu containers have borders on all sides */

    ul.MenuBarVertical ul

    {

        border: 1px solid #CCC;

       position: absolute;

        margin: 10.2;

        font-size: 100%;

    }

    You might also like to have a look at lines 91 and 92 and remove those rogue element end tags.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 5:53 PM   in reply to VickiA95124

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

    ul.MenuBarVertical ul

    {

        margin: 20% 0 0 5%; /* changed from -5% 0 0 95% */

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: absolute;

        z-index: 1020;

        cursor: default;

        width: 8.2em;

        left: -1000em;

        top: 0;

    }

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points