SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Dropdown disappears when displayed over image.

    Greetings,


    I am having trouble with the navigation on my site. I have a drop down navigation bar and when it is displayed on top of an image, when you hit the image the menu disappears.

    www.crbigbikerentals.com/rentals.html is the page where this can be demonstrated. Under the motorcycle tab.
    www.crbigbikerentals.com/cycle1.css is the style sheet.

    Cannot figure out what is blocking the menu from displaying correctly.

    Thanks,

    Charles

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi cbull002. Welcome to the forums.

    What browser is this happening in? It works fine for me in Chrome (the drop list sits over the image).

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m

    Chrome, It sits over the image but when you go to mouse over you can stay on the menu until you come to a li that is over top of the picture and then it disappears.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah, I see. It's the h3 causing the problem, it seems. Anyhow, try adding this to your CSS:

    Code:
    #navbar {
      position: relative; 
      z-index: 100;
    }

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much.

    Worked perfectly.

    I think you mean that the relative position I have set for h3 was causing the box to vanish because it was rendering the h3 in front of the menu.

    That makes sense. I still have some to learn about how positions affect each other.

    Thanks for the help.

    fyi, the customer chose that background specifically. I am still trying to talk him out of it.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that worked.

    Quote Originally Posted by cbull002 View Post
    fyi, the customer chose that background specifically. I am still trying to talk him out of it.
    Ah yes, clients! Can't live with 'em, can't live without 'em.

  7. #7
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I am still having a little trouble with display in Firefox. The same menu is this topic creates margin below the menu so when you try to crossover onto the ul ul you have to be really fast or your out of luck. I can see that it is five pixels and the only margin that is 5px is ul li a and ul ul li a and those are on the right side of the boxes. http://crbigbikerentals.com/contact.html


    Thanks.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Ah yes, happens in Chrome too.

    Instead of this:

    Code:
    #navbar #holder ul ul {
    position: absolute;
    top: 53px;
    visibility: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px black solid;
    overflow: visible;
    }
    try this:

    Code:
    #navbar #holder ul ul {
    position: absolute;
    top: 51px;
    visibility: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px black solid;
    overflow: visible;
    }
    If you want to keep the appearance of the gap between the top link and the drop list, you could add this line in red:

    Code:
    #navbar #holder ul ul {
    position: absolute;
    top: 51px;
    visibility: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px black solid;
    overflow: visible;
    border-top: 2px solid black;
    }

  9. #9
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.M. I will get back to you if I have more issues. I have settled on the layout for now. There is no perfect meeting point for cross browser fun.


    Charles


Bookmarks

Posting Permissions

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