SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    0 Post(s)
    0 Thread(s)

    Pure CSS Dropdown Problem

    Hey All...

    Its been a while since i coded a page and thought I might try my hand at a design with a little sprinkling of CSS3 and HTML5... to bring myself up to speed.

    While im at it - ive been trying to code these CSS dropdown menu's from scratch... Ive got the dropdowns working fine...

    However, I wanted to try to space the dropdown 10px away from the main navigation bar. Im using a margin on the top of the nested UL however, the space that it creates, means that when you roll off the main nav item that triggers it, causes the menu to retract before you hit it... Obviously because you essentially "roll off" the button...

    Its not essential I have this gap - but wanted to see if I could push the boundary as much as i could...

    Any ideas anyone ?

    - Fly by Fun

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Melbourne, AU
    454 Post(s)
    8 Thread(s)
    No, you can't have a gap between the drop menu and the parent, but you could fake it visually. Just one idea that comes to mind is to have padding on the UL instead of margin, and a background image that's transparent at the top instead of the rgb color values. Not the nicest compromise, but others may have better ideas.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    179 Post(s)
    6 Thread(s)
    As Ralph suggests the ul must always stay in contact with the trigger element but you can use padding to create space while still maintaining contact.

    As you have styling applied to the ul you would need to remove the styling from the ul and apply it to the list elements themselves instead or perhaps nest a div to hold the ul and apply padding to the div.

    For modern browers you could use a 10px transparent border on the top of the ul and then set the background-clip to content-box so that the background doesn;t show through.

    #menu-main-navigation li ul {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 0 0 5px 5px;
      border-top: medium none;
      display: none;
      margin: 0px 0 0 -35px;
      position: absolute;
      text-align: center;
      width: 150px;
      z-index: 10;
        border-top:10px solid transparent;
     -moz-background-clip: content-box;
      -webkit-background-clip: content-box;
      background-clip: content-box;
    Only suitable for modern browsers only though.

Tags for this Thread


Posting Permissions

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