Skip navigation
Currently Being Moderated

Spry menu bar questions

Jun 28, 2013 10:28 PM


If I wanted to apply a CSS transition (GRADUAL background color change) as the mouse is hovered over a tab, which class would I add that to? Currently it changes to a gradient white to gray color instantly.






ul.MenuBarHorizontal li


ul.MenuBarHorizontal ul


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible


ul.MenuBarHorizontal ul li


ul.MenuBarHorizontal ul ul


ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible


ul.MenuBarHorizontal ul


ul.MenuBarHorizontal a


ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus


ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible


ul.MenuBarHorizontal a.MenuBarItemSubmenu


ul.MenuBarHorizontal ul a.MenuBarItemSubmenu


ul.MenuBarHorizontal a.MenuBarItemSubmenuHover


ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover


ul.MenuBarHorizontal iframe


ul.MenuBarHorizontal li.MenuBarItemIE


ul.MenuBarHorizontal ul a.MenuBarItemSubmenu:hover {

  • Currently Being Moderated
    Jun 29, 2013 1:03 AM   in reply to DerricksArk

    Have a look at

    <!doctype html>



    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">


    ul.MenuBarHorizontal a {

      transition: background-color 0.5s ease;

      background-color: red;


    ul.MenuBarHorizontal a:hover {

      background-color: green;






    <ul id="MenuBar1" class="MenuBarHorizontal">

      <li><a href="#">Item 1</a></li>

      <li><a href="#">Item 2</a></li>

      <li><a href="#">Item 3</a></li>

      <li><a href="#">Item 4</a></li>


    <script src="SpryAssets/SpryMenuBar.js"></script>


    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});




    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 8:16 AM   in reply to DerricksArk

    Just an FYI... Spry has been "abandoned" by Adobe because, as others will attest, it has "outlived its usefulness". There are jquery and CSS alternatives available now.

    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 3:28 PM   in reply to DerricksArk

    To get CSS level 3 transitions to work in X-browsers, you'll need to add vendor prefixes for Webkit, Mozilla & Opera.


    It goes without saying CSS transitions don't work in lesser browsers like IE7,8,9.

    If you need support for pre-IE10 users, you could use a bit of jQuery like this.



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 4:44 PM   in reply to Nancy O.

    I totally agree with Nancy on this one. Go with jQuery.  There is a vary good reason that Adobe dropped support for Spry in Dramweaver CC - jQuery won. It's better.


    Lawrence Cramer - *Adobe Community Professional*
    PHP & ColdFusion Shopping Cart for Adobe Dreamweaver

    Stay updated:

    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 9:01 AM   in reply to DerricksArk

    There are litterally hundreds of jQuery plugins available.  And you can roll your own.



    Nancy O.

    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