Get a free trial // Grow your CSS skills // Land your dream job

Magic Line navigation sliding triangle

  • # November 6, 2012 at 1:44 am


    Sorry this is a bit of a silly question, but I can’t work out what I’m missing…

    I was modifying the Magic Line navigation…what I wanted was – isntead of a line – have a triangle slide down under the menu.

    I got it working in a test:
    []( “magic line fiddle”)

    But when I used the css I need to in the final site – it doesn’t work. Initially it loads correctly – but then it’s doe3sn’t slide to the centre of the nav item you are hovering over…
    []( “Updated magic line”)

    Any help would be greatly appreciated! :)

    # November 6, 2012 at 9:03 am

    this was the problem:

    #mainnav ul li:hover, #mainnav ul li.iehover{

    Remove this css rule and it’ll work.
    Also, this:
    $(“.group li”).find(“a”)

    can be written as:
    $(“li a”)

    # November 6, 2012 at 10:10 am

    Hi Remmie!

    I ended up changing the css around and wrapping the level1 UL so the dropdown would position correctly.

    Check out [this demo](

    # November 7, 2012 at 5:20 pm

    Hi JoniGiuro and Mottie,

    Thank you very much for your help! That did it!

    If it’s not too much trouble, can I ask why the “position:relative” didn’t work – I’m still learning css and javascript so, just trying to avoid making the same mistake in a different setting :)

    Thank you again for your help!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed