Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping Menu Buttons

    I am testing out this new page, but the sub menus are vertically too close. How can I change this?

    url - http://dynamicphoto.com/mr/index2.htm. The CSS is on the page (not external).

    The menu I am having a problem with is the blue button menu. If you scroll over, you will see that the sub menus overlap.

    The class for this menu set is "top-menu".

    Many thanks to anyone that can help!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    set a height for the li's

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by websteve View Post
    I am testing out this new page, but the sub menus are vertically too close. How can I change this?

    url - http://dynamicphoto.com/mr/index2.htm. The CSS is on the page (not external).

    The menu I am having a problem with is the blue button menu. If you scroll over, you will see that the sub menus overlap.

    The class for this menu set is "top-menu".

    Many thanks to anyone that can help!

    Hello,

    following code will help you .....

    Code:
    .top_menu li:hover ul{ 
        display: block;  /* Shows all elements under each other (as opposed to next to each other) */ 
        }
        .top_menu li:hover ul li{ 
        display: block;
        height:25px;
        margin:1px;
        }
    .top_menu li:hover ul a {
        position: absolute;
        
        width: 150px;
        top: 15px; /* Amount of space the first sub menu starts from the parent button */
        left: 2px;
        border-radius: 8px;
        text-decoration: none;
        background-color: #0000FF;
        padding: 5px; /* Pads area around text 5x in all 4 directions */
        border: 1px solid #cccccc;
        border-bottom: 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9pt;
        font-weight: bold;
        color: #FFFFFF;
        }

    Cheers

  • #4
    New to the CF scene
    Join Date
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome! I see that I was missing the ul li part for li:hover, and that’s where I needed to add the height property. Thank you!

    I recently noticed another issue, when you scroll over the sub menus, they disappear. I can’t seem to find how to make them static so that they would stay. Any ideas?

    Here’s the URL to an updated version (with your code inserted):

    http://dynamicphoto.com/mr/mssny4.htm

    Thanks again!

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    For this, dont use hover.. use jQuery's mouseover method....


  • #6
    New to the CF scene
    Join Date
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I'm not familiar with jquery, but since I already know JavaScript and PHP, I guess it shouldn't be hard to learn. I'll Google for some training lessons.

    One quick question I have is, does this replace CSS or does it integrate with CSS?

    Thanks.

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Just visit jquery.com and search for mouseover.. you will get full detail..

    If you know javascript, jquery will not be a new thing for you.


  • #8
    New to the CF scene
    Join Date
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I checked out jQuery. Interesting stuff. I will follow up with it.

    Thanks for your help!

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You are welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •