Skip navigation
Currently Being Moderated

How do I move the text in the spry sub-menu down?

Aug 2, 2013 6:15 PM

Hello I am currently developing a website in Dreamweaver CS6 and I have come to a problem I can't seem to solve. I have created a fairly straight forward spry menu bar and used css to edit it, however as you can see in the image below, the sub-heading below the 'My Work' is really close to the 'My Work' heading and it doesn't look too good. I was wondering if there is a way I can move the 'Graphic Design' text in the sub-heading down a bit using css so everything looks more neat and spread out.

Thanks

 

question spry.jpg

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Aug 2, 2013 8:48 PM   in reply to PykaDesigns

    margin-top: 10px;

    Add this to your <li> item 'Graphic Design' or in generic to the li ul selector for your menu. This will push the submenu container (ul) down by 10pixels.

     

    For more assistance, we need to see your design/ webpage. Post a link to it.

     

    On a sidenote, Spry is deprecated and is no longer officially supported/ developed by Adobe: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

    You may want to consider switching to jQuery. There are tons of great menus that you can find with jQuery. Some examples here: http://www.freshdesignweb.com/jquery-menu.html

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 3:54 AM   in reply to PykaDesigns

    Sudarshan has correctly stated the li ul selector which means that he is targeting the wrapper (ul) of the submenu items. The main item is the li in the li ul combination; the submenu item is selected as li ul li.

     

    It looks like you have applied the style rule to the item (li) itself.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 4:31 AM   in reply to PykaDesigns

    PykaDesigns wrote:

    I then added the margin-top 10px to the ul.MenuBarHorizontal ul ul and got this:

    It appears that 10px is a little too big, try 8 or 9 px.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 5:37 AM   in reply to PykaDesigns

    You make things very difficult and error prone for us when you refuse to put your file on your server and provide a link.

     

    Ben's reply said the selector was

    The submenu item is selected as li ul li.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 6:42 AM   in reply to PykaDesigns

    You're welcome-

     

    How did adjusting the li ul li selector work?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Aug 3, 2013 6:42 AM   in reply to PykaDesigns

    For ul.MenuBarHorizontal ul ul, add this:

     

    padding-top: 10px;

    margin-top: 5px;

     

    Note that I've changed margin-top to 5px from earlier 10px that I suggested.

     

    See if it helps.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Aug 3, 2013 7:12 AM   in reply to PykaDesigns

    Can you copy the entire section of your 'menu' code and paste it here? That's the least you can do considering you don't have a webserver to host it yet.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 7:19 AM   in reply to PykaDesigns

    Copy and paste the following into a new document and play around with the highlighted value

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="http://adobe.github.io/Spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">

    <style>

    ul.MenuBarHorizontal li ul {margin-top: 50px;}

    </style>

    </head>

     

    <body>

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

      <li><a href="#">Home</a></li>

      <li><a href="#" class="MenuBarItemSubmenu">About Us</a>

        <ul>

          <li><a href="#">Company History</a></li>

          <li><a href="#">Company Directors</a></li>

        </ul>

      </li>

      <li><a href="#">Contacts</a></li>

    </ul>

    </div>

    <script src="http://adobe.github.io/Spry/widgets/menubar/SpryMenuBar.js"></script>

    <script>var MenuBar = new Spry.Widget.MenuBar("MenuBar");</script>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 7:25 AM   in reply to Sudarshan Thiagarajan

    @Sudarshan,

     

    This is completely off-topic, but is there anywhere I can get a copy of DWCS6?.

     

    Ben

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Aug 3, 2013 7:27 AM   in reply to Ben Pleysier

    @Ben, absolutely.

     

    http://prodesigntools.com/adobe-cs6-direct-download-links.html

     

    Legal downloads direct from Adobe's FTP. Please read and follow instructions carefully though.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Aug 3, 2013 7:29 AM   in reply to Sudarshan Thiagarajan

    That is assuming you already have a CS6 license and are looking for 'installers'.

     

    If you're looking at purchasing a new license, you can still buy it from Adobe: https://www.adobe.com/products/catalog/cs6._sl_id-contentfilter_sl_cat alog_sl_software_sl_creativesuite6.html?start=10

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 7:41 AM   in reply to Sudarshan Thiagarajan

    @Sudarshan,

     

    Thank you,

     

    In trying to solve a problem, I uninstalled DWCS6 thinking that I could re-install it from CC. At that point I noticed it was no longer on CC and have been pulling my hairs out ever since.

     

    Much appreciated.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 3, 2013 8:22 AM   in reply to Sudarshan Thiagarajan

    @Sudarshan,

     

    Unfortunately, I get a 'No Permission' message when using the URL you supplied.

     

    Fortunately, I have located a copy of the installer in my own archive.

     

    Once again, thank you for your input.

     
    |
    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