SitePoint Sponsor

User Tag List

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

    Almost a dropdown...

    Hi,

    I am trying to code up a design which was provided to me by an art director I am working with. She wants a menu where the items with submenus trigger a dropdown which appears shifted up. I tried adjusting a basic css dropdown just setting a negative top margin on the menu item, which works until you move your cursor off of it, which makes the whole submenu move back down again. The 'pop up' submenu would have to stay in the mouseover position until the cursor is moved from it, and needs to have a different background color for rollovers.

    Here is a link to a screenshot of what I am trying to accomplish.

    Here is what I have so far in codepen: Feel free to tinker with it.

    Any assistance would be GREATLY appreciated!

    TIA,
    Colin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your first link gives me this warning message form Mcaffee!



    Warning: Suspicious Site
    Whoa!
    Are you sure you want to go there?

    http://everbeta.com/dropdown.jpg may be risky to visit.

    Why were you redirected to this page?

    When we visited this site, we found it exhibited one or more risky behaviors.
    So as I couldn't see the screenshot it might be better if you just attach the screenshot to this thread.

    To adjust where a submenu appears you would adjust the top position of the nested ul and not the list item.

    e.g.
    Code:
    #cssmenu li ul{
      margin-top:-3em
    }
    Or if you have a stacking context (position:relative on the main parent) then you could use "top" instead)

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi Paul,

    The attachment is harmless, I don't know why McAffee would flag it as suspicious.

    dropdown.jpg

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Paul,

    The attachment is harmless, I don't know why McAffee would flag it as suspicious.

    dropdown.jpg
    Thanks Pullo. Mcaffee occasionally seems to flag up a few 'false positives' but it was only the orange warning and not the red. There's probably something it doesn't like.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Adjusting the top position of the menu should do as you want.

    Code:
    #cssmenu li ul{
    		background:#0181ae;
    		display:none;
    		height:auto;
    		position:absolute;
    		width:225px;
    		z-index:200;
    		/*top:1em;
    		/*left:0;*/
      margin-top:-5em;
      padding:2em 0;
    		}


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
  •