Thursday 15 April 2010

css - How to show a div behind navigation on rollover -


I'm still trying to get this web coding hanging. God knows that not all know it. So, I'm reaching in the hope of some help.

I have a divan in which & lt; Nav> , and we say that & lt; UL & gt; Inside and

  • inside .... How will I create a picture behind the navigation based on Lee? Say I have a vertical menu:

    Home | Gallery | Contact

    And I want to extend the images independently Let's say Mario appears behind the contacts on the rollo. I want his head overlap the gallery, but it should be behind the contact. I intend for these images to stay on the left so far so that do not interfere with navigation seriously. Can I just do this with CSS or I'll need jQuery

    Is it looking for you?

    You can use first-child and nth-child selectors:

    As the individual width of the menu item, you have to adjust the padding and margin individually .

    CSS code, below:

      li {box-shadow: 4px 4px 2px gray; Margins: 10px; List-style-type: none; Swim left; ): First child: Hover, Lee: Nath-Baby (2): Hover, Lee: Nath-Best (3): Hover, Lee: Anthat-Baal (4): Hover, Lee: Anth-Bal (5): Hover {Background-size: 200px 200px; Repeat Background: No Repetition; Padding-bottom: 180px; Margin-down: -170px; } Li: First child: hover {background-image: url ('http://goo.gl/RqQtl'); Padding-right: 145px; Margin-right: -135 pixels; } Li: nth-child (2): hover {background-image: url ('http://goo.gl/TWI0t'); Padding-right: 130px; Margin-right: -120px; } Li: nth-child (3): hover {background-image: url ('http://goo.gl/xRPiq'); Padding-right: 115 pixels; Margin-right: -105px; } Li: nth-child (4): hover {background-image: url ('http://goo.gl/u3Akz'); Padding-right: 140px; Margin-right: -130px; } Li: nth-child (5): hover {background-image: url ('http://goo.gl/Em9Ij'); Padding-right: 140px; Margin-right: -130px; }   

    and html:

      & lt; Nav> & Lt; Ul & gt; & Lt; Li & gt; Home & lt; / Li & gt; & Lt; Li & gt; Gallery & lt; / Li & gt; & Lt; Li & gt; Contact & lt; / Li & gt; & Lt; Li & gt; EXTRA1 & lt; / Li & gt; & Lt; Li & gt; EXTRA2 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;    

  • No comments:

    Post a Comment