5 Replies - 1910 Views - Last Post: 29 April 2013 - 01:44 PM

#1 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Viewing a sub list on hover

Posted 29 April 2013 - 12:41 PM

Hi all,

I have a sidebar that I'm building with nested lists in HTML5, like this:

        <aside>
            <ul>
                <li><a href="#">One</a></li>
                <li>
                    <a href="#">Two</a>
                    <ul>
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                    </ul>
                </li>
                <li><a href="#">C</a></li>
            </ul>
        </aside>



I want the sub list under "Two" to show up directly underneath it when "Two" is hovered over. So far, my CSS is like this (eventually the sub list will be styled differently):

aside {
    float:   left;
    width:   250px;
}

aside ul {    
    list-style-type: none;
    margin:          0;
    padding:         0;
    position:        relative;
}

aside ul li {
    background:    #336633;
    background:    linear-gradient(top, #33CC33 0%, #336633 100%);  
    background:    -moz-linear-gradient(top, #33CC33 0%, #336633 100%); 
    background:    -webkit-linear-gradient(top, #33CC33 0%, #336633 100%);
    border-radius: 5px;
    margin:        2px;
    padding:       10px 5px;
    text-align:    center;
}

aside ul li a {
    color: #ffffff;
}

aside ul ul {
    display: none;
}

aside ul li:hover > ul {
    background: transparent;
    display:    block;
}

aside ul ul li {
    width:    250px;
}



When I hover over "Two," the sub list does show up, but it shows up with the styling for "Two" stretched around it, and with the sub list's elements shunted a few pixels to the right, not lined up with the parent list's elements. Visually, what's happening is:

|------------------------------------------------------|
| One                                                  |
|------------------------------------------------------|
| Two                                                  |
|                                                      |
|    |------------------------------------------------------------|
|    |A                                                           |
|    |------------------------------------------------------------|
|    |B                                                           |
|    |------------------------------------------------------------|
|------------------------------------------------------|
| Three                                                |
|------------------------------------------------------|



When it needs to look like:

|------------------------------------------------------|
| One                                                  |
|------------------------------------------------------|
| Two                                                  |
|------------------------------------------------------|
| A                                                    |
|------------------------------------------------------|
| B                                                    |
|------------------------------------------------------|
| Three                                                |
|------------------------------------------------------|



If anyone could help me figure out what I'm doing wrong, I'd really appreciate it.

Thanks,
Zel2008

This post has been edited by Zel2008: 29 April 2013 - 12:42 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Viewing a sub list on hover

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4404
  • View blog
  • Posts: 12,260
  • Joined: 18-April 07

Re: Viewing a sub list on hover

Posted 29 April 2013 - 12:50 PM

I think the padding you added to your <li> element where the sub list is being listed under, is what is causing it to be pushed over. So you will have to remove the padding/margin or go with something like a negative margin on your UL to counter the padding you put in the LI. :)

This post has been edited by Martyr2: 29 April 2013 - 12:52 PM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3738
  • View blog
  • Posts: 13,067
  • Joined: 12-December 12

Re: Viewing a sub list on hover

Posted 29 April 2013 - 01:00 PM

Modify/add:

aside ul li:hover > ul {
    background: transparent;
    display:    block;
}

aside ul li:hover > ul li {
    margin-left: -5px;
}
aside li {
    width:    250px;
}

Added: margin-left: -5px doesn't need to be in this hover effect, it could be in the normal css-rules for these elements.

This post has been edited by andrewsw: 29 April 2013 - 01:06 PM

Was This Post Helpful? 1
  • +
  • -

#4 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Viewing a sub list on hover

Posted 29 April 2013 - 01:06 PM

Thanks Martyr2,

I tried doing the padding and margins by:

aside ul ul {
    display: none;
    margin:  -2px;
    padding: -10px -5px;
}



And I also tried:

aside ul li:hover > ul {
    display: block;
    margin: -2px;
    padding: -10px -5px;
}



But neither of those made a difference, or stopped the main list from stretching around the sub list. I've been doing some messing with margins and padding all through the lists, and nothing seems to change anything. Thank you for the input though.

Thanks,
Zel2008

Thanks andrewsw,

Your code got me closer -- the sub list items are staying in bounds. But, the background of "Two" still stretches, which messes up its colors, and isn't transparent like your "background: transparent;" would suggest it would be.

EDIT: It looks like that margin-left does need to be there, at least in Firefox. The li's won't line up if it's not there.

Thanks,
Zel2008

This post has been edited by Zel2008: 29 April 2013 - 01:09 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3738
  • View blog
  • Posts: 13,067
  • Joined: 12-December 12

Re: Viewing a sub list on hover

Posted 29 April 2013 - 01:28 PM

Quote

and isn't transparent like your "background: transparent;" would suggest it would be.

What do you mean "my background"? That was yours, he, he :whistling:

Glad I could help move you forward though :)
Was This Post Helpful? 0
  • +
  • -

#6 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Viewing a sub list on hover

Posted 29 April 2013 - 01:44 PM

Oops, sorry, typo. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1