Grow your CSS skills. Land your dream job.

Magic Line navigation sliding triangle

  • # November 6, 2012 at 1:44 am

    Hi,

    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:
    [http://jsfiddle.net/Shc7x/](http://jsfiddle.net/Shc7x/ “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…
    [http://jsfiddle.net/bvwMX/](http://jsfiddle.net/bvwMX/ “Updated magic line”)

    Any help would be greatly appreciated! :)

    # November 6, 2012 at 9:03 am

    http://jsfiddle.net/jonigiuro/bvwMX/2/

    this was the problem:

    #mainnav ul li:hover, #mainnav ul li.iehover{
    position:relative;
    }

    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](http://jsfiddle.net/Mottie/bvwMX/3/)

    # 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.

*May or may not contain any actual "CSS" or "Tricks".