treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

[Solved] not sure if this is a Jquery or css problem

  • kb2tfa
    Permalink to comment #
    I'm working on a site for a friend, and i used jquery for a dropdown menu, which works fine.

    Until I created a jquery image rotater in a div under it.

    now the menu drops behind the images.

    I didn't want to post pages of code here, but if something will help I can.
    the url is http://ronguilmet.com/sandbox/
  • AshtonSanders
    Permalink to comment #
    The problem is probably a CSS problem, the fix is created by using the z-index property:

    Add "z-index:100" to "ul.topnav li ul.subnav" (on line 135 of your CSS file)

    That tells your sub menu to be above your other HTML elements (since they have a lower z-index (0)).
  • Robskiwarrior
    Permalink to comment #
    Hey.

    I have not actually looked at it - my interweb is pants at the moment due to some line issues... its bad enough trying to load the forums...

    but just check you have not floated one and not the other, or not cleared any floats... etc...

    I would look more, but I fear I would throw my PC out the window.
  • kb2tfa
    Permalink to comment #
    AshtonSanders

    thank you so much for your post.

    I added that to my css, and it's fixed. 

    ul.topnav li ul.subnav {
    	list-style: none;
    	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    	left: 0; top: 35px;
    	background: blue;
    	margin: 0; padding: 0;
    	display: none;
    	float: left;
    	width: 170px;
    	border: 1px solid #111;
            color: white;
            z-index: 100;  /* fix for menu showing behind photos */
    }


    thanks again. Ron
Add a Comment