Verticle image menu with horizontally overlapping mouseover points

Posted on 2008-11-06
Last Modified: 2012-05-05
I have been handed a design to code which has stumped me a bit: the main menu is a verticle list of words, but the eords have very little space between them so the tops of T's and the tails of Y's ( for example) are on the same horizontal plane as the button above (or below).  

Look forward to comments,
I have to cater for mouseover states and active state.  My initial thoughts are to implement in flash - but can this be done successfully with images and javascript/ map areas?
Question by:Treder
    LVL 11

    Expert Comment

    Yea, it can be done with images and map areas.
    Is there a reason there is so little space? It woudl seem that the simple solution would be to give that couple of extra pixels space that would be needed to avoit the problem alltogether.
    LVL 44

    Accepted Solution

    You don't need either images or mapareas for mouse over.  If it is just words, then use this


    UL  {margin:0px; padding:0px; }
    LI  {margin:0px; padding:0px; }


      <LI>first menu item</LI>
      <LI>second menu item</LI>

    that should eliminate most of the spacing between the lines.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now