SitePoint Sponsor

User Tag List

Page 6 of 11 FirstFirst ... 2345678910 ... LastLast
Results 126 to 150 of 268
  1. #126
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Solution Time.

    Thanks to all who participated in this epic quiz and especially to Timo (Yurokilovsky) for coming up with the idea and pushing us all to solve something we had previously thought was impossible to do in a valid and semantic way.

    I know some of you spent a long time on trying this quiz so thanks even if you didn't make the final hurdle I'm gad you were along for the race.

    The winner of the quiz has to be Maleika (Kouhotec) who through grit and determination finally came up with answer we were looking for. Congratulations Maleika and sorry I don't have a prize for you other than the satisfaction you got from solving this (I think Stomme Poes was going to buy some cakes as a prize ) .

    Thanks also to Eric Watson who came second although his entry was posted through a small loophole and I should have outlawed duplicate content but none the less it was an admirable effort

    Thanks also to Stu Nichols for popping in and taking time out with us and who's entry would have won should he have wished it entered.

    Before I post Timo's versions and the other entries I think I should just quickly explain the main technique needed to make this drop down work.

    How this works

    I dropped quite a few hints through the thread and if you didn't catch on what I was talking about the I'll make it clear now.

    Float Drop.

    We've all suffered from float drop at some time or another (and no it's not a manly complaint) especially if you have browsed a layout using IE6 that contains floats.

    If you have say two floats of 300px width each side by side in a 600px width container then everything is fine. If however one of the floats contains fixed with content that is wider than 300px then IE6 will stretch the parent float wider and the floats will no longer line up but will drop down below each other. Not only does the float drop downwards but so of course does all the content in the float.

    (Earlier in the thread I posted some code in spoiler tags that should this in action so refer back If you need to see it again.)

    Other browsers would not drop the float because they would respect the 300px width on the parent and the parent element would never get any bigger. However if we had one float of 300px width and the other float had no width then it would be as wide as its content dictates. That means we could have inner content at 300px width and the floats would be side by side - but if we increased the inner content to 301px then the whole float would drop below the other float.

    What use is this to us then?

    The use is quite obvious and by changing the width of say a 300px width anchor while you were hovering would cause the whole float to drop down below another float. This is the key to solving this because this dropping float will be our fly out menu. Once it is in position it will stay there while we hover any anchor in the block as long as each anchor keeps triggering the float drop.

    With a bit of lateral thinking you can first move the sublist upwards with a negative margin so that is hidden above the viewport or above the top of the div that has overflow:hidden. Then the main links that trigger the float drop down can be moved into view with a margin so that they are visible to start with. Some negative margin trickery is involved but basically the main level link is at the top of the screen and the submenu is now out of sight miles above it.

    When we hover the main link its negative margin is removed thus exerting pressure on the sublist which drops into view beneath the main menu. When we now hover on the sublist the float drop effect takes place and all the links stay below the floated main anchor. the fact that our focus has moved from the hovered main item is of no matter now because even though the main item reverts to its original styling with negative margins our cursor is now over the floated submenu and causing it to expand and clear the float above.

    I have constructed a minimalist and non semantic version to show you using the smallest amount of code how this all ties together. the versions you will see later all use the same techniques but also use semantic code.

    Here is the very little code needed to construct a single level fixed drop down. (I have used divs and not nested uls only for my explanation):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    a {
        display:block;
        height:25px;
        text-decoration:none;
        color:#000;
        background:#ccc;
        width:200px;
        margin:0 -1px 0 0;
    }
    a.main{
        float:left;
        margin:1000px -199px 0 0;
    }
    div{width:200px;float:left;margin-top:-1000px}
    div div {width:auto;margin:0}
    a:hover{margin-right:1px;background:red;}
    </style>
    </head>
    <body>
    <div><a class="main" href="#">Target</a>
        <div><a href="#1">link 1</a> 
               <a href="#2">link 2</a> 
               <a href="#3">link 3</a> 
                <a href="#4">link 4</a> 
        </div>
    </div>
    </body>
    </html>
    As you can see its only a few lines long and needs very little code indeed. There is however quite a lot going on in there so I have commented out a version for you to help you understand.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    a {
        display:block;
        height:25px;
        text-decoration:none;
        color:#000;
        background:#ccc;
        width:200px;
        margin:0 -1px 0 0;/* negative right margin effectively makes this 199px wide */
    }
    a:hover{background:red;}
    a.main{
        float:left;
        margin:1000px -199px 0 0;/* 199px negative margin effectively makes this 1px wide. The 1000px bottom margin pushes the main link into view to counteract the fact that the parent div has been pulled upwards. */
    }
    div{width:200px;float:left;margin-top:-1000px}/* this pulls the whole menu above the viewport to make it invisible except for the main link which we have pushed downwards to counteract this movement. The floated main link moves downwards but doesn't bring the static text that follows with it. */
    div div {width:auto;margin:0}/* submenu div must be with auto because we want it to expand and cause the float drop */
    a.main:hover{margin:1000px 0 0;}/* remove the right negative margin which has the effect of blocking the negative top margin on the submenu so that the sub menu is now pushed below the main link once again.*/
    div div a:hover{margin-right:1px;}/* This is the key ...... the sub links which are now in view  are made wider than the space allowed and cause the element to drop below the floated anchor. As usual with float drop all links that are in this sub div will be pulled with it as this is a feature of float drop. */
    </style>
    </head>
    <body>
    <div><a class="main" href="#">Target</a>
        <div><a href="#1">link 1</a> 
               <a href="#2">link 2</a> 
               <a href="#3">link 3</a> 
                 <a href="#4">link 4</a> 
        </div>
    </div>
    </body>
    </html>
    There are a few different ways the effect can be triggered but all basically mean making the link bigger than it should be. In the above you could use a width to do this but that seems to trigger the opera bug so margins are more stable.

    So there you have the basics of the following demos and it should make sense as you try to unravel the code.

    The fixed width single drop down is really very simple and stable and in terms of accessibility must win hands down against the old display:none methods and the fact that this drop down can be operated wholly via the keyboard with the simplest of ease.

    The multiple level drop down is a lot more complicated and I don't believe it will be as useful as the single level drop down but it may yet evolve into a simpler version (after all the final version of the single level dropdown has lost all the extra code that we started out with as it became more refined). I had some small input on the refinements but most of the hard work was Timos.

    Timos Single Level Version (I believe he has slightly modified this already and added tabindex and removed the opera fix so I'll ask him to post the final solution also):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Dropdown</title>
    <style type="text/css">
    .nav, .nav ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav .sub li {
        float:left;
    }
    .nav .sub > li {
        float:none;
    }
    #navigation {
        position:relative;
        height:35px;
        background:#093;
    }
    .nav {
        position:absolute;
    }
    .nav .link {
        width:300px;
        margin-top:-375px;
        float:left;
    }
    .nav a {
        display:block;
        height:25px;
        line-height:25px;
        text-decoration:none;
    }
    .nav .sub a {
        background:yellow;
        margin:0 -1px 0 0;
        width:300px;
        position:relative;
    }
    .nav .sub {
        float:left;
        background:green;
        padding-top:25px;
        margin-top:-25px;
    }
    .nav a.main {
        position:relative;
        float:right;
        width:300px;
        height:25px;
        line-height:25px;
        margin-top:375px;
        margin-right:-299px;
        float:left;
    }
    .nav a.main:hover, .nav a.main:focus, .nav a.main:active {
        margin-right:0;
        background:orange;
    }
    .nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {
        margin:0 0 0 0;
        background:orange;
    }
    /*Opera fix*/
    .sub:hover {
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="navigation">
        <ul class="nav">
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test2</a></li>
                    <li><a href="#">test3</a></li>
                    <li><a href="#">test4</a></li>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test2</a></li>
                    <li><a href="#">test3</a></li>
                    <li><a href="#">test4</a></li>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test2</a></li>
                    <li><a href="#">test3</a></li>
                    <li><a href="#">test4</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>
    Timo Multi Level Drop down:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Multilevel Dropdown</title>
    <style type="text/css">
    /*made by Timo Huovinen*/
     
    ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }
    #navigation {
        height:25px;
    }
    .nav {
        position:absolute;
        width:1000px;
    }
    li {
        float:left;
    }
    .link {
        position:relative;
        width:300px;
        height:10025px;/*10000 + 25*/
        margin-top:-10000px;
    }
    .nav a {
        position:relative;
        display:inline-block;
        width:300px;
        background:#9C3;
        height:25px;
    }
    .nav ul {
        float:left;
    }
    .sub li {
        clear:left;
        position:relative;
    }
    .sub li a {
        margin-right:-1px;
    }
    a.main, .sub a.submain {
        height:25px;
        background:yellow;
        float:left;
        margin-right:-299px;
        margin-top:10000px;
    }
    .subs {
        visibility:hidden;
        height:25px;
        top:-10000px;
    }
    .subs a {
        visibility:visible;
    }
    .sub ul li {
        left:300px;
        top:-25px;
    }
    .subs ul a {
        background:#CC6;
        margin-right:-2px;
    }
    .nav a:hover, .nav a:focus, .nav a:active {
        background:orange;
        margin-right:0;
    }
    .subs li a:hover, .subs li a:focus, .subs li a:active {
        background:#C93;
    }
    /*OPERA fix*/
    .sub:hover {
        clear:left;
    }
    .sub ul:hover {
        clear:left;
    }
    /*multi multilevel*/
    .subs .subs {
        top:-10025px;
    }
    .subs .subs ul a {
        background:#099;
        margin-right:-3px;
        color:#fff;
    }
    .subs .subs ul a:hover, .subs .subs ul a:focus, .subs .subs ul a:active {
        background:#06F;
        margin-right:0;
    }
    </style>
    <!--[if IE 7]>
    <style type="text/css">
    .subs {
        visibility:visible;
        min-width:299px;
    }
     
    /*multi multilevel*/
    .subs .subs {
        min-width:298px;
    }
    </style>
    <![endif]-->
    <!--[if lte IE 6]>
    <style type="text/css">
    .subs {
        width:299px;
        height:20025px;/*10000 + 10000 + 25*/
       
        margin-top:-10000px;
        margin-bottom:-10000px;
       
        position:relative;
        top:-20000px;/*10000 + 10000*/
        visibility:visible;
    }
    .subs a.submain, .subs ul li {
        position:relative;
        top:20000px;/*10000 + 10000*/
    }
    .subs ul li {
        top:19975px;/*10000 + 10000 - 25*/
    }
     
    /*multi multilevel*/
    .subs .subs {
        top:-25px;
        width:298px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div style="position:relative;z-index:1;"><a href="#background1">background 1</a></div>
    <div id="navigation">
        <ul class="nav">
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li><a href="#2">test2</a></li>
                    <li class="subs"><a class="submain" href="#2">test2</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
                    </li>
                    <li><a href="#3">test3</a></li>
                    <li class="subs"><a class="submain" href="#4">test4</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
                    </li>
                    <li><a href="#5">test5</a></li>
                    <li><a href="#6">test6</a></li>
                    <li><a href="#7">test7</a></li>
                    <li><a href="#8">test8</a></li>
                    <li class="subs"><a class="submain" href="#9">Everything is possible</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li class="subs"><a class="submain" href="#sub4">SUB test4</a>
                                <ul>
                                    <li><a href="#subtest1">sub sub test 1</a></li>
                                    <li><a href="#subtest2">sub sub test 2</a></li>
                                    <li><a href="#subtest3">sub sub test 3</a></li>
                                    <li><a href="#subtest4">sub sub test 4</a></li>
                                    <li><a href="#subtest5">sub sub test 5</a></li>
                                    <li><a href="#subtest6">sub sub test 6</a></li>
                                </ul>
                            </li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                            <li class="subs"><a class="submain" href="#sub7">SUB test7</a>
                                <ul>
                                    <li><a href="#subtest1">sub sub test 1</a></li>
                                    <li><a href="#subtest2">sub sub test 2</a></li>
                                    <li><a href="#subtest3">sub sub test 3</a></li>
                                    <li><a href="#subtest4">sub sub test 4</a></li>
                                    <li><a href="#subtest5">sub sub test 5</a></li>
                                    <li><a href="#subtest6">sub sub test 6</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li><a href="#2">test2</a></li>
                    <li><a href="#3">test3</a></li>
                    <li><a href="#4">test4</a></li>
                    <li><a href="#5">test5</a></li>
                    <li><a href="#6">test6</a></li>
                    <li><a href="#7">test7</a></li>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li><a href="#2">test2</a></li>
                    <li><a href="#3">test3</a></li>
                    <li class="subs"><a class="submain" href="#4">test4</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
                    </li>
                    <li><a href="#5">test5</a></li>
                    <li><a href="#6">test6</a></li>
                    <li class="subs"><a class="submain" href="#7">test7</a>
                        <ul>
                            <li><a href="#subtest1">sub2 test 1</a></li>
                            <li><a href="#subtest2">sub2 test 2</a></li>
                            <li><a href="#subtest3">sub2 test 3</a></li>
                            <li><a href="#subtest4">sub2 test 4</a></li>
                            <li><a href="#subtest5">sub2 test 5</a></li>
                            <li><a href="#subtest6">sub2 test 6</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div><a href="#background2">background 2</a></div>
    </body>
    </html>
    (Continued in next thread)...........

  2. #127
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maleikas Live solution can be found here:

    http://rockatee.com/temp/sp_quiz27e.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Maleika - http://rockatee.com/temp/sp_quiz27e.html</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    body {
        font:85&#37;/1 "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
        color:#222;
    }
    ul.nav {
        list-style: none;
        position: absolute; /* take menu out of the flow */
        float: left;
        left:100px;
        top:0;
    }
    ul.nav li {
        list-style: none;
        float:left;
    }
    ul.nav a {
        text-decoration: none;
        display: block;
    }
    ul li.menu-container {
        float: left;
        width:200px;
        position: relative;
        top:0;
        margin-left:-100px; /* make use of ie6's margin bug */
    }
    a.main {
        line-height: 35px;
        color: white;
        width:100px;
        background: black;
        display: block;
        float:left;
        position: relative;
        z-index:10;
        margin-bottom:999px;
    }
    /* reset bottom margin for modern browsers */
    
    li > a.main {
        margin-bottom:0;
    }
    a.main:hover {
        width:101px;
        position: relative;
        background: maroon;
    }
    ul ul {
        background: brown;
        width:100px;
        float: left;
        position: relative;
        z-index:1;
        top:-999px;
    }
    /* hide dropdown menu from view in modern browsers */
    
    ul li > ul {
        position: absolute;
        margin-left:-999px;
        top:0;
    }
    /* pull back down dropdown menu into view in modern browsers */
    
    li:hover ul {
        margin-left:0;
    }
    ul ul li {
        width:100px;
        line-height: 35px;
        float:none;
    }
    ul ul li a {
        color: white;
        display: block;
        top:0;
        line-height: 35px;
        width:100px;
    }
    ul ul li a:hover {
        width:101px;
        position: relative;
        line-height: 35px;
        background: beige;
        color: #333;
    }
    #content {
        margin-top:60px;
    }
    </style>
    </head>
    <body>
    <ul class="nav">
        <li class="menu-container"> <a class="main" href="#">Link 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http://www.yahoo">Yahoo</a></li>
                <li><a href="http://www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
        <li class="menu-container"> <a class="main" href="#">Link 1</a>
            <ul class="dropdown">
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http://www.yahoo">Yahoo</a></li>
                <li><a href="http://www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
        <li class="menu-container"> <a class="main" href="#">Link 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http://www.yahoo">Yahoo</a></li>
                <li><a href="http://www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
        <li class="menu-container"> <a class="main" href="#">Link 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http://www.yahoo">Yahoo</a></li>
                <li><a href="http://www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
        <li class="menu-container"> <a class="main" href="#">Link 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http://www.yahoo">Yahoo</a></li>
                <li><a href="http://www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
    </ul>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </body>
    </html>
    Eric Watson example can be found here:(only working in IE6)

    http://www.visibilityinherit.com/projects/quiz27-d.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } CSS Drop Down Menu</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #nav {
        list-style:none;
        height:120px;
        overflow:hidden;
        position:relative;
    }
    #nav li {
        float:left;
        text-align:center;
        position:relative;
        width:100px;
    }
    #nav a {
        float:left;
        width:100px;
        line-height:30px;
        background:#fff;
        text-decoration:none;
        padding-bottom:200px;
    }
    #nav a:hover {
        margin-bottom:-200px;
    }
    /* --------- Drop Down -------- */
    #nav ul {
        list-style:none;
    }
    #nav ul a {
        padding-bottom:0;
    }
    #nav ul a:hover {
        margin-bottom:0;
        position:relative;
        top:-200px;
        background:pink;
    }
    #nav a b {
        position:absolute;
        left:0;
        width:80px;
        font-weight:normal;
        cursor:pointer;
        margin:5px 10px;
        line-height:20px;
    }
    #nav #top1 {
        top:30px;
    }
    #nav #top2 {
        top:60px;
    }
    #nav #mid1 {
        top:-30px;
    }
    #nav #mid2 {
        top:30px;
    }
    #nav #bot1 {
        top:-60px;
    }
    #nav #bot2 {
        top:-30px;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a>
            <ul>
                <li><a href="http://www.visibilityinherit.com">Drop1<b id="top1">Drop2</b><b id="top2">Drop3</b></a></li>
                <li><a href="http://www.google.com">Drop2<b id="mid1">Drop1</b><b id="mid2">Drop3</b></a></li>
                <li><a href="http://www.sitepoint.com">Drop3<b id="bot1">Drop1</b><b id="bot2">Drop2</b></a></li>
            </ul>
        </li>
        <li><a href="#">Link3</a></li>
    </ul>
    </body>
    </html>
    My earlier version that used a "b" element as a pusher for the float drop.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body{height:100%}
    * {
        margin:0;
        padding:0
    }
    ul {list-style:none}
    .wrap {
        width:600px;
        margin:auto;
        background:#ddd;
        position:relative;
        height:35px;
    }
    .nav {
        width:600px;
        position:absolute;
        left:0;
        top:-375px;
    }
    .nav li {
        width:150px;
        float:left;
    }
    .nav li li {
        display:inline;
        float:none;
    }
    .nav a {
        display:block;
        height:25px;
        text-decoration:none;
        color:#000;
        line-height:25px;
    }
    .nav ul a {
        float:left;
        background:#ddd;
        clear:left;
        width:138px;
        border:1px solid #000;
        margin:-1px -1px 0 0;
        padding:0 5px;
        position:relative;
    }
    .nav b {
        float:left;
        width:1px;
        height:400px;
    }
    .nav ul {float:left;}
    .nav a.main {
        position:relative;
        top:375px;
        float:right;
        width:138px;
        padding:0 5px;
        color:#fff;
        font-weight:bold;
    }
    .nav li li{width:auto}
    * html ul.nav li a{width:150px;w\idth:138px}
    
    .nav a.main:hover, .nav a.main:active, .nav a.main:focus {
        margin-bottom:375px;
        background:#000;
        color:#fff;
    }
    .nav ul a:hover, .nav ul a:active, .nav ul a:focus {
        margin:0 0 -1px 0;
        background:#000;
        color:#fff;
    }
    .nav li ul {
        border-top:24px solid #333;
        margin-top:-25px;
        background:#333;
        padding:1px 0 0;
    }
    .content {
        width:600px;
        margin:auto;
        clear:both;
    }
    .outer {
        width:600px;
        margin:auto;
        overflow:hidden;
        position:relative;
        min-height:100%;
    }
    * html .outer{height:100%}
    h1, h2 {text-align:center}
    h1 {font-size:140%}
    h2 {font-size:120%}
    </style>
    </head>
    <body>
    <div class="outer">
    <h1>Drop down in IE6 with no javascript</h1>
    <h2>Based on an idea by Timo Huovinen (aka YuriKolovsky) &copy; 2009</h2>
        <div class="wrap">
            <ul class="nav">
                <li><b></b><a class="main" href="#">Main 1</a>
                    <ul>
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.yahoo.com">Yahoo</a></li>
                        <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                        <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
                    </ul>
                </li>
                <li><b></b><a class="main" href="#">Main 2</a>
                    <ul>
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.yahoo.com">Yahoo</a></li>
                        <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                        <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
                        <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                        <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
                    </ul>
                </li>
                <li><b></b><a class="main" href="#">Main 3</a>
                    <ul>
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.yahoo.com">Yahoo</a></li>
                        <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                        <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
                    </ul>
                </li>
                <li><b></b><a class="main" href="#">Main 4</a>
                    <ul>
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.yahoo.com">Yahoo</a></li>
                        <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                        <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="content">This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : This is the following content : </div>
    </div>
    </body>
    </html>
    Stu Nichols version with nice rounded tabs.

    http://www.cssplay.co.uk/test//menu2a.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>CSS dropdown menu | Stu Nicholls http://www.cssplay.co.uk/test//menu2a.html</title>
    <style type="text/css">
    #menuHolder {
        position:absolute;
        z-index:100;
        font:normal 11px/25px verdana, sans-serif;
    }
    ul.ulTop {
        padding:0;
        margin:0;
        list-style:none;
        width:150px;
        overflow:hidden;
        float:left;
        margin-right:1px;
    }
    ul.ulTop a {
        text-decoration:none;
        color:#fff;
        padding-left:5px;
    }
    ul.ulTop li.liTop {
        float:left;
        width:300px;
        margin:-32767px -150px 0 0;
        background:green url(tab.gif) no-repeat left bottom;
    }
    ul.ulTop li.liTop a.aTop {
        position:relative;
        z-index:50;
        display:block;
        float:left;
        width:145px;
        margin-top:32767px;
        background:transparent;
    }
    ul.ulTop li.liTop a.aTop:hover, ul.ulTop li.liTop a.aTop:focus, ul.ulTop li.liTop a.aTop:active {
        margin-right:1px;
    }
    ul.sub {
        float:left;
        padding:25px 0 0 0;
        margin:0;
        list-style:none;
        background:blue url(tab-over.gif) no-repeat left top;
        margin-top:-25px;
    }
    ul.sub li a {
        float:left;
        width:145px;
        background:#099;
        clear:left;
    }
    ul.sub li a.last {
        background:red url(tab-bottom.gif);
    }
    ul.sub li a.last:hover, ul.sub li a.last:focus, ul.sub li a.last:active {
        background: greenurl(tab-bottom-over.gif);
    }
    ul.sub a:hover, ul.sub a:focus, ul.sub a:active {
        background:#06c;
        margin-right:5px;
    }
    .page {
        margin-top:25px;
        padding-top:25px;
    }
    </style>
    </head>
    <body>
    <div id="menuHolder">
        <ul class="ulTop">
            <li class="liTop"> <a tabindex="1" class="aTop" href="#top1">Products</a>
                <ul class="sub">
                    <li><a tabindex="2" href="#top1a">Cameras</a></li>
                    <li><a tabindex="3" href="#top1b">Lenses</a></li>
                    <li><a tabindex="4" href="#top1c">Flashguns</a></li>
                    <li><a tabindex="5" class="last" href="#top1d">Tripods</a></li>
                </ul>
            </li>
        </ul>
        <ul class="ulTop">
            <li class="liTop"> <a tabindex="6" class="aTop" href="#top2">Services</a>
                <ul class="sub">
                    <li><a tabindex="7" href="#top2a">Printing</a></li>
                    <li><a tabindex="8" href="#top2b">Framing</a></li>
                    <li><a tabindex="9" href="#top2c">Retouching</a></li>
                    <li><a tabindex="10" href="#top2d">Enlarging</a></li>
                    <li><a tabindex="11" class="last" href="#top2e">Copying</a></li>
                </ul>
            </li>
        </ul>
        <ul class="ulTop">
            <li class="liTop"> <a tabindex="12" class="aTop" href="#top3">Outlets</a>
                <ul class="sub">
                    <li><a tabindex="13" href="#top3a">Bristol</a></li>
                    <li><a tabindex="14" href="#top3b">Keynsham</a></li>
                    <li><a tabindex="15" class="last" href="#top3c">Gloucester</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="page">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus ullamcorper nunc non blandit. Sed convallis iaculis faucibus. Nam egestas, elit vitae fringilla pellentesque, mauris ligula cursus elit, ac egestas mi ligula at erat. Morbi non dolor felis. Maecenas risus quam, volutpat at sollicitudin ac, faucibus ac leo. Aenean tellus nisl, blandit non adipiscing vitae, pretium nec velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non luctus turpis. Curabitur facilisis tempus elit sit amet condimentum. Integer bibendum tempor feugiat. Morbi vehicula nisl vitae nisl dignissim at blandit mauris interdum. </p>
    </div>
    </body>
    </html>
    Once again thanks for taking part in these quizzes and thanks to Timo for this weeks quiz which has proved challenging and interesting. I am sure that he will want to add his own comments and explanations as he had a myriad of versions and I may have posted an earlier version in error.

    Keep an eye out for the next quiz in a week or so when we will try and solve perpetual motion

    PS: Sorry if i forgot to mention anyone along the way as it's been a very long thread.

  3. #128
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Quote Originally Posted by Anton P View Post
    it's entirely unlikely that anyone here was the first to "invent" it in any case.
    remember that it is equally likely as it is unlikely.
    I disagree, although of course I have nothing with which to argue either way. For me it comes down to numbers; only a very small proportion of website authors advertise their techniques, so we know very little of what CSS is out there in the wild.

    Quote Originally Posted by YuriKolovsky View Post
    Quote Originally Posted by Anton P View Post
    There are hundreds of thousands of professional web developers out there and most of them don't publish their discoveries
    thus to the general public they have not invented it, the person who publishes his idea first is the inventor, not the person who thinks of it first.
    you can even steal an idea and publish it, and you will be the inventor.
    But in the case of web development, all it takes to demonstrate prior art is exhibit an existing page using that technique. Thus the title of inventor, as you define it, is a rather fragile one, as said prior art could arise at any time from a vast pool of potential resources. This is less likely in other disciplines where the pool of potential resources is usually (orders of magniture) smaller.

    Quote Originally Posted by YuriKolovsky View Post
    2. helping others (not all people consider this a reward, but i do)
    Absolutely; in my experience most good front-end developers do. (I've never really thought about why this is before!)

    Quote Originally Posted by YuriKolovsky View Post
    Quote Originally Posted by Anton P View Post
    'Technically' is all that matters.
    no, not always, what matters depends on the person making the website
    for me maintainability, browser support and result matter a lot.
    and i would never use excessive amounts of conditional comments in the html (one is enough, but only if you really need it) because it severely affects the maintainability of the html/css.
    Maintainability of conditional comments was something I explicitly discussed in the previous post. Too many conditional comments can make code hard to read, since one has to mentally process what compliant HTML parsers see and what IE6 sees. But that has nothing to do with the HTML-validity or otherwise of what ends up in IE6's document tree. In other words, HTML-invalidity in IE6's document tree is not a reason to avoid conditional comments, but dislike of conditional comments can be!

    Quote Originally Posted by YuriKolovsky View Post
    i do not care if code is valid or not, but if i have a option between the two, then i choose valid.
    As far as IE6-only code is concerned, the choice is unimportant. What's important is understanding how IE6 behaves with that code, HTML-valid or otherwise.


    Anyway, enough of this side-topic; the solutions have been posted in the meantime! Time for me to take a look :-)

  4. #129
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll go and buy some cookies for me tomorrow.

    It took me a bit before my brain would give me any sensible answers. I have spent quite a few hours during the last few days trying various methods, but none would work very well and they certainly didn't make much sense. I was extremely frustrated, albeit motivated at the same time.

    I was determined to not let this go and this morning I sat down and, within a few minutes, I knew what had to be done. Weird that.

    I'm quite happy, but this quiz also demonstrated to me that I really need to spend more time with CSS. I'll certainly spend more time in the CSS forum from now on.

    Anyway, time to read through all the solutions!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #130
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Congratulations Maleika for persevering to the solution!
    Here is a slice of German Chocolate Cake for you!

    Very impressive use of this expanding container bug in IE6!
    Well done Timo, I can only imagine how useful this would have been several years ago. Just think of all the sites using the sfhover script out there that could be replaced with an extra 1px width on hover.

    I'll have to look through all the different versions but I see the basics of it now.

    Congratulations to everyone who participated and thanks for your submission Stu, very helpful.

  6. #131
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Dankesch&#246;n and that was most kind of you, Ray. And a German cake at that! Please excuse that I won't share any of it with you. Too selfish.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #132
    SitePoint Guru rageh's Avatar
    Join Date
    Apr 2006
    Location
    London, Formerly Somalia
    Posts
    612
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was quite a challenge. Well done for all those who solved or tried the quiz. I congratulate all the winners, and Timo for coming up with it. And Paul for organising it.

    Kohoute, your version does not display the dropdown menu properly in IE7. Are you aware of that? The dropdown is not below the top menu but is shifted to the right about the width of the menu itself.

    Also, Eric's version does not work in Opera. No dropdown appears at all.
    ------------------

  8. #133
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    rageh, no, I didn't check other than in IE6 as that was my main focus. I'll add a modified version tomorrow (ready for bed).

    Thanks for letting me know!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #134
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Wow I'm an effing idiot...

    @Anton-Everyone pretty much knows that a dropdown without JS or valid markup isn't possible in IE6, so if someone did do it without that I'm pretty darn sure they would tell someone.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #135
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Congratulation Maleika!! This is for you.

    Well done.

  11. #136
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yuri, now that I understand this can you post your multi level? I want to see if I can minimalize the HTML and make it fluid width .
    Edit:

    And usable in real life
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #137
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My much older fluid width version,
    it requires a set height for the flyout menu in ie5-6 (not for other browsers)
    and it is buggy if you tab and hover at the same time.

    the next challenge is getting this to work as smoothly as the fixed width versions.


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS ONLY DROPDOWN</title>
    <style type="text/css">
    /*
    known limitations:
    tabbing and hovering at once is buggy in ie5-6
    (tabbing can be removed completely or use a different version i have that has no tabbing bugs but needs fixed width for the mainlinks.)
    in internet explorer 6 you need to manually set the max height in which the sublinks will fit in, currently its 400px (i am looking for a way around this, does not apply to modern browsers)
    
    original example used em's, changed to px to make example clearer
    
    it uses a margin on the main link to shift down the sublinks
    then while you hover over the sublinks, they get a right margin, which causes them to float-drop below the shifter and maintain themselves visible
    
    notes:
    you can do this float drop 2 times, for example replacing the shifter with the actual main link, and instead of giving the main link a margin-bottom, you give it a margin-left, which extends the container, causing the sublinks to float drop, because they are already float dropped, hovering over the sublinks is not going to do anything except maintain them open, but this has a big advantage, you can now tab and hover at the same time without causing any excessive drops for the sublinks,
    but this forces you to use a fixed width main link, because its contained within the float drop box.
    
    you can also make this dropdown into a multilevel dropdown, you can put the .link into one of its subsections, and shift it to the top and left using top:-25px and left:200px for example, have not tried, only theory.
    
    TIMO HUOVINEN
    */
    /*RESET default styles*/
    #navigation ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #navigation a {
    	color:#000;
    	text-decoration:none;
    }
    /*IE5 list item bug fix*/
    .sublinks li {float:left;}
    .sublinks > ul li {float:none;}
    
    
    /*NAV FUNCTIONALITY (hiding the dropdown)*/
    /*25px will be the nav height, and 400 will be the default allowed height in IE5-6*/
    #navigation {
    	position:relative;
    	height:25px;
    }
    #nav {
    	position:relative;
    	top:-425px; /*400px + 25px*/
    }
    
    /*MAIN link FUNCTIONALITY*/
    #nav .link {
    	position:relative;
    	float:left;
    	height:25px;/*for modern browsers*/
    }
    #nav .main {
    	display:inline-block;
    	height:25px;
    	line-height:25px;/*center verticalle the main link text*/
    	top:425px;/*400px + 25px*/
    	position:relative;/*move the link to the level of its sublinks*/
    	z-index:2;/*must remain above all*/
    }
    #nav .main:hover,
    #nav .main:focus,
    #nav .main:active{
    	margin-bottom:400px;
    }
    #nav .sublinks {
    	margin-right:-1000px;
    	margin-bottom:-20000px;
    	height:25px;
    	display:block;
    	position:relative;
    }
    /*BACKGROUND for the MAIN link when hovering over the dropdowns*/
    #nav .bg {
    	height:25px;
    	width:200px;
    	display:block;
    }
    /*sublinks FUNCTIONALITY*/
    #nav .sublinks {
    	width:201px;
    }
    #nav .sublinks ul {
    	float:left;
    }
    #nav span {
    	width:1px;
    	float:right;
    	height:400px;
    	visibility:hidden;
    }
    #nav .sublinks a {
    	display:inline-block;
    	width:200px;
    }
    #nav .sublinks a:hover,
    #nav .sublinks a:focus,
    #nav .sublinks a:active {
    	margin-right:1px;
    }
    /*OPERA not detecting hover bug FIX*/
    #nav .link:hover .sublinks a{
    	margin-right:1px;/*this pushes against the shifter*/
    }
    #nav .link:hover .main {
    	margin-bottom:0;/*reset the 400px margin*/
    }
    /*HIDE THE MAIN BACKGROUND OVERFLOW*/
    #nav .mask {
    	position:relative;
    	float:left;
    	height:25px;
    	z-index:10;
    	top:425px;/*400px + 25px*/
    }
    #nav .mask b {
    	position:absolute;
    	height:25px;
    	width:56.25em;
    	display:block;
    }
    #nav .link b {/*this is the default non hover background, i would prever to get rid of it somehow*/
    	display:block;
    	width:100&#37;;
    	top:425px;/*400px + 25px*/
    	height:25px;
    	position:absolute;
    }
    
    /*FIREFOX not trans-clickable div background fix (you cant click links behind a transparent div in firefox)*/
    /*the nav needs to be hidden, but at the same time it must not be display:none; else tabbing aint gonna work.
    so instead we will hide the .sublinks very very very high up (20000px, this also removes the 400px limitation)*/
    #nav > .link {
    	top:-20000px;
    }
    #nav > .link a.main {
    	top:20425px;/*400px + 25px + 20000px*/
    }
    #nav .sublinks > span {
    	height:20400px;/*400px + 20000px*/
    }
    #nav > .mask {
    	top:425px;/*400px + 25px*/
    }
    #nav > .link b {
    	top:20425px;/*400px + 25px + 20000px*/
    }
    
    
    
    
    /*FORMATTING (STYLING) OF sublinks BELOW*/
    #nav .sublinks a {
    	background:#ffa500;
    }
    #nav .sublinks a:hover,
    #nav .sublinks a:focus,
    #nav .sublinks a:active{
    	background:#333333;
    	color:#fff;
    }
    #nav .sublinks i {/*you could apply these paddings and styles to the link directly if it was not for IE5 broken box model*/
    	display:block;
    	cursor:pointer;
    	font-style:normal;
    	padding:1px 5px;
    	border-bottom:solid #000 1px;
    }
    /*FORMATTING (STYLING) OF MAIN link BELOW*/
    #nav .link b {/*this is the default non hover background, i would prever to get rid of it somehow*/
    	background:#efefef;
    }
    #nav .main {
    	padding:0 7px;
    }
    #nav .bg {
    	background:#ffa500;
    }
    #nav .main:hover,
    #nav .main:focus,
    #nav .main:active{
    	background:#000;
    	color:#fff;
    }
    /*BACKGROUND STYLING*/
    #nav .mask b {
    	background:#efefef;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    /*NAV FUNCTIONALITY (hiding the dropdown)*/
    #navigation {
    	overflow:hidden;
    	height:425px;/*25px + 400px*/
    	margin-bottom:-400px;
    }
    /*IE Expanding box problem fix*/
    #nav {
    	position:absolute;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="navigation">
    <ul id="nav">
    	<li class="link">
    		<b></b><!--this is the default background for the mainlink, to mask the other links hover states-->
    		<a class="main" href="#example">MAIN LINK</a>
    		<div class="sublinks"><!--float drop container-->
    			<span></span><!-- the SHIFTER that does the float-drop -->
    			<ul>
    				<li class="bg"></li><!--this is the colorful maintaining background on the main link-->
    				<li><a href="http://thinkhtml.blogspot.com/"><i>My very Quick blog <br>(still in progress)</i></a></li>
    	 				<li><a href="#"><i>test test test test test test test test test test test test test test </i></a></li>
    					<li><a href="#"><i>these sublinks are withing a fixed with container</i></a></li>
    					<li><a href="#"><i>test</i></a></li>
    					<li><a href="#"><i>test</i></a></li>
    			</ul>
    				</div>
    		</li>
    		<li class="link">
    		<b></b><!--you can remove this and the mask if you don't need fancy backgrounds-->
    		<a class="main" href="#random-stuff">STUFF</a>
    		<div class="sublinks">
    			<span></span>
    			<ul>
    						<li class="bg"></li><!--and you can remove this too-->
    	 				<li><a href="http://www.youtube.com/watch?v=wUDqQSwdBjM"><i>Sandwich</i></a></li>
    					<li><a href="http://www.the-art-of-web.com/css/css-animation/"><i>CSS selectors and transforms</i></a></li>
    					<li><a href="http://2advanced.com/"><i>2much flash</i></a></li>
    					<li><a href="http://stommepoes.nl/Menus/maphover.html"><i>Nice CSS Map</i></a></li>
    								<li><a href="http://www.visibilityinherit.com/tools.php"><i>Visibility inherit</i></a></li>
    					<li><a href="http://accessify.com/"><i>Accessibility</i></a></li>
    								<li><a href="http://www.sitepoint.com/books/"><i>Ultimate CSS reference, Ultimate HTML reference - must read</i></a></li>
    			</ul>
    				</div>
    		</li>
    		<li class="link">
    		<b></b>
    		<a class="main" href="#very-useful-indeed">VERY USEFUL LINKS</a>
    		<div class="sublinks">
    			<span></span>
    			<ul>
    				<li class="bg"></li>
    	 				<li><a href="http://reference.sitepoint.com/css"><i>CSS REFERENCE</i></a></li>
    								<li><a href="http://www.webdevout.net/browser-support-css#support-css2propsbasic-verticalalign"><i>CSS Support</i></a></li>
    								<li><a href="http://www.quirksmode.org/css/display.html"><i>CSS Support 2</i></a></li>
    					<li><a href="http://www.pmob.co.uk/"><i>Paul's CSS Examples</i></a></li>
    					<li><a href="http://meyerweb.com/eric/css/edge/"><i>Eric Meyer on css</i></a></li>
    					<li><a href="http://www.positioniseverything.net/"><i>Because it is</i></a></li>
    								<li><a href="http://www.alistapart.com/articles/taminglists/"><i>A List Apart</i></a></li>
    								<li><a href="http://www.csszengarden.com/"><i>CSS Zen Garden</i></a></li>
    			</ul>
    				</div>
    		</li>
    		<li class="mask"><b></b></li><!--maks the hover background on the last link in list-->
    </ul>
    </div>
    <h3>Valid CSS ONLY DROPDOWN</h3>
    <p>
    feel free to use it for anything you want,
    this example is far from perfect and as such can use improvements.
    <br>
    this is some content below the dropdown to demonstrate that it does not affect anything<br />
    as you can see this content stays below the dropdown and does not move anywhere</p>
    <p>Look at source (Ctrl+U) for further info.</p>
    <p>Made by Timo Huovinen aka YuriKolovsky &copy; 2009</p>
    
    </body>
    </html>

    Quote Originally Posted by kohoutek View Post
    I was determined to not let this go and this morning I sat down and, within a few minutes, I knew what had to be done. Weird that.
    i use that for everything that i do, its because your brain keeps thinking about it even when you do other things, but your brain gets the most done when you relax or sleep.

    this means that relaxing and sleeping is also getting work done!


    Quote Originally Posted by Rayzur View Post
    Well done Timo, I can only imagine how useful this would have been several years ago.
    I was imagining this too, too bad i was not around back then.


    Quote Originally Posted by RyanReese View Post
    Yuri, now that I understand this can you post your multi level? I want to see if I can minimalize the HTML and make it fluid width .
    Edit:

    And usable in real life
    hahaha thanks for the offer ryan, i would love to see it fluid width and multi level, AND usable in real life.
    although it might be harder than you think, or it might not! xD
    i have posted my fluid width try, not the best but it works, and paul has posted my multi-level dropdown.

    the idea that by using a link to affect the web page around it was quite new to me, i have not seen it mentioned anywhere else, and everyone seems to forget that its there, it can be used for much more than just dropdowns, and it also enables things to be done that previously could not be done even in modern browsers! (like the tabbing for example)

  13. #138
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yuri, now that I understand this can you post your multi level? I want to see if I can minimalize the HTML and make it fluid width .
    Edit:

    And usable in real life
    I already posted one of Timos multi level versions above

  14. #139
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    Are you like some sort of ninja god of CSS or something? I always thought that Paul O'B was the almighty of CSS but if you can pull this off I might have to relegate Paul to #2 status

    If are indeed a CSS god we may need to sacrifice a small virtual goat in your honour to stop you striking our invalid CSS down with a bolt of lightning.
    As promised .... http://test.pixopoint.com/goats/


    And no it doesn't use the new technique :P

    BTW, does this technique have a name? You should call it something original like they did with the Suckerfish!

  15. #140
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahahah thank you ryanhellyer
    you have made me laugh the most so far!

    no i haven't thought of a name, although i agree that its important that it has one.
    so what about you give some suggestions at naming it? anyone can suggest a name really, so that we all can agree on some name!

    floatdrop menu maybe, but after paul's joke in the solution, the name is no longer appealing... xD

    FDmenu maybe... ThinkersMenu.... G.O.A.T. dropdown menu.... hhahah im not that good at this... xD

  16. #141
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about the "Piranha menu"?

    Piranha's are infinitely cooler than Suckerfish and since your menu is way cooler than a suckerfish menu it seems like an appropriate name. Plus your menu could chomp a suckerfish menu to pieces if it wanted since it has those mega "IE5-6 without javascript" powers to call on.

    Or maybe the "Great White dropdown"? Could be confusing for people though since they're not necessarily white in colour (the dropdown, not the shark).

  17. #142
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yes, definitely a cool name

    also

    nLife menu... hahahhaha
    blowfish menu (the menu links expand after all)(forgot to add...yumm, although i myself don't eat fish)


    edit:
    ill wait and see if other people suggest names, and probably decide on the one which most prefer.

  18. #143
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Goatfish menu?

    I have no idea what a Goatfish is, but if they do exist I'm sure they don't taste good.

  19. #144
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Keep an eye out for the next quiz in a week or so when we will try and solve perpetual motion
    Uh, I've been waiting my whole life for the Flying Cars of the Future. Where are they? Perpetual motion, pfff.

    I would be very wary of a name like goatfish because someone's going to call it a goatse menu and that's just ew.

    If Stu's menu is called Stu's hidden-table CSS-only dropdown menu then this oe should be
    Yuri's float-drop CSS-only dropdown menu. I suppose bump-down could also work since that's how I see it.

    Paul's joke doesn't dirty the name for me since I've never heard of such things floating. It's a Float-Drop menu. Drop means something tasty in Dutch.

    Since my birthday is coming up, I must provide tasty cakes to my friends and coworkers soon, in Dutch tradition; since in this case it was Paul giving the quiz, or Yuri who came up with it, one of them must provide the tasty cakes. Though chocolate chip cookies are also nice and Stu wanted some wine or a steak or both.

    So when are the FedEx Quizes going to start? I'll take time off work to try them out if I can get cookies for winning. Delivered to my door! I'm such a chocoholic.

  20. #145
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    bumpdown menu

    Quote Originally Posted by Stomme poes View Post
    Uh, I've been waiting my whole life for the Flying Cars of the Future. Where are they? Perpetual motion, pfff.
    don't worry about it poes, i have invented flying cars too, just publishing them is much harder! xD


    the closest ive seen to Perpetual motion was a thing that was spinning on its own forever, it was spinning because of the earth spinning.
    you could also probably use the ionosphere to get constant energy for the device to spin.

  21. #146
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    greatwhite dropdown menu
    sharkdown menu xD
    ryanhellyer
    Plus your menu could chomp a suckerfish menu to pieces if it wanted since it has those mega "IE5-6 without javascript" powers to call on.
    its more on the cross browser css side than on the ie5-6 side, because were using "float DROP" for a "DROP down", its completely natural.
    you can add javascript easily to improve some features (for example delay the closing of the dropdown on mouseout), and even closing effects, very extensible.

    now ill have to polish/finish my very new and unfinished blog and feature some final versions of the dropdown on it and maybe find the time to make some complete tutorials too.

  22. #147
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Here are some ideas from me:

    - The Yuriko Method (TYM)
    - JFD Method (Javascript Free Method)
    - NOMI (Non-obstrusive Menu Injection)
    - Triple L (Literal Lateral Logic)
    - No-Frills Dropdown (NFD)
    - PRAT (Pragmatic Thinking) Menu
    - LED (Lateral Engineering Dropdown)

    As you can see, I don't very much like fish references.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #148
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thanks for the suggestions kohoutek!!
    dropping the fish reference is a good idea, because this dropdown has nothing to do with the suckerfish dropdown.
    i like how JFD Method sounds like but stu's table based method is also non javascript, although the name is still usable (and good).
    NOMI i also like, and i like PRAT too.
    LED and TYM might be confusing i think.

    you forgot to mention the triple L as:
    LLL dropdown

    no-frills? how did you come up with that? xD
    google:define
    frilling - a method of killing trees by inflicting a series of cuts around a stem and applying a herbicide to the wounds. Frilling or girdling of trees is used to reduce stand density or kill individual undesirable trees.
    frill - an external body part consisting of feathers or hair about the neck of a bird or other animal
    frill - The fur around the head that is brushed up to form a frame for the cat's face.

    lots of ideas so far, can we add a poll on this forum somehow? to vote for the name from the suggested?

  24. #149
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    you could also probably use the ionosphere to get constant energy for the device to spin.
    Wasn't Tesla going to do that but JPMorgan pulled the plug? That would have been lawlz.

    - The Yuriko Method (TYM)
    It sounds cool but Yoriko is a chick's name in Japanese isn't it?
    Off Topic:


    BTW there's a name for that hyphen... the "Hyphen Bullet!" It even has its own Unicode! A hyphen specifically used for a bullet! Amazing. & #8259; or \u2043. I swear there's a different type of hyphen for everything.

  25. #150
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    How about Yurika? Like YURIKA I FIGURED SMOEHTING OUT.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •