SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Menu Not Showing Siblings On Hover :-(

    Buongiorno from 9 degrees C sunny York UK :-)

    On this page http://tutorial.davidclick.com/philpotts-clone.html Ive been trying in vein to trigger a drop down menu when you hover over the About menu tab.

    Ive been following this tutorial but i just cant replicate it http://aext.net/2009/09/elegant-drop...with-css-only/

    Here is the css causing the problem:
    Code:
    #navigation .sibling
     {
    display:none;	 
    }
    	 
    	 
    #navigation .sibling li:hover ul
    {
    display:block;
    }
    and here is the HTML
    Code:
    <div id="navigation">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a>
                <ul>
                <li class="sibling"><a href="">Take out the competition</a></li>
                <li class="sibling"><a href="">In you face domination</a></li>
                </ul>
                </li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Contact us</a></li>
    		</ul>
    A fix would be great & a bit of theory why mine didnt even better!

    Grazie tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Tha ought try sommat like this:

    Code:
    #navigation li {
    position:relative;
    float: left;
    }
    
    #navigation li ul {
    position: absolute;
    left: 0;
    width: 100px;
    background: red;
    top: 100%;
    }
    
    #navigation li ul {
    position: absolute;
    left: -9999px;
    }
    
    #navigation li:hover ul {
    left: 0;
    }
    The red background is just to make it easier to see.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent that worked but.... the repetition of #navigation li ul has thrown me in that its done twice but with a -9999px bit in the second.

    If any ones got the time to give me a bit of theory of how this works much appreciated :-)

    #navigation li ul {
    position: absolute;
    left: 0;
    width: 100px;
    background: red;
    top: 100%;
    }

    #navigation li ul {
    position: absolute;
    left: -9999px;
    }

    Grazie tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zygoma View Post
    the repetition of #navigation li ul has thrown me
    Sometimes you can credit people with too much intelligence. I was in a hurry, and made a mess of it. This is what I should have posted:

    Code:
    #navigation li {
    position:relative;
    float: left;
    }
    
    #navigation li ul {
    position: absolute;
    left: -9999px;
    width: 100px;
    background: red;
    top: 100%;
    }
    
    
    #navigation li:hover ul {
    left: 0;
    }

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •