SitePoint Sponsor

User Tag List

Page 7 of 11 FirstFirst ... 34567891011 LastLast
Results 151 to 175 of 268
  1. #151
    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)
    That'd have to be Eureka...Nice wordplay.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  2. #152
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yeah yuriko
    not exactly what i had in mind xD, and thats why i said it might be confusing.

    my alias can be shortened only to yurik, or yurikolov
    but its such a weird name anyway xD (when you look at it, its all with sharp corners and things sticking out, almost like a cactus)

  3. #153
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I thought it was quite clever wordplay . I love the name.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #154
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Kudos to Maleika for solving this one, I gave up long ago when I got the dropdown to appear, but not stay showing on hover. Had this been discovered three years ago or so, I can just imagine the blogs buzzing on this, but now I think people are content to give IE6 a lesser version of pages.

    How about Dropper? Flopper?

  5. #155
    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)
    Oh, I like Dropper. Flopper sounds too much like failure to me, but Dropper sounds modern.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #156
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I've been playing around with the multi level version and came up with this which seems to be a little simpler for ie6.

    http://www.pmob.co.uk/temp/dropdown-nojs-multilevel.htm

  7. #157
    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)
    This is extremely clean. Brililant, thanks for that!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #158
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm registering with SitePoint just to say I'm excited. I've been trying out CSS Dropdowns for so long it made me bored. Thanks for putting the excitement back into CSS Dropdown menus again.

  9. #159
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome the forum summicron And yeah, this has brought lots of excitement back into the world of CSS dropdowns.

  10. #160
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Now someone's got to take all these quizzes of Paul's and list them somewhere-- with descriptive titles instead of Quiz #blah (I was looking for the scrolling table body one a few weeks ago and had to do a lot of clicking to find the right quiz!)

    They're a resource in their own right. They should be catalogued and listed (somewhere, I dunno where, but certainly in the CSS section).

  11. #161
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Now someone's got to take all these quizzes of Paul's and list them somewhere-- with descriptive titles instead of Quiz #blah (I was looking for the scrolling table body one a few weeks ago and had to do a lot of clicking to find the right quiz!)

    They're a resource in their own right. They should be catalogued and listed (somewhere, I dunno where, but certainly in the CSS section).
    Yes I was thinking of doing that because I also keep forgetting where the other quizzes are.

    I could make a sticky thread with links just to the previous quizzes and give a brief description of each to make them easier to find. I'll try and knock something up this week.

  12. #162
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul, if you want I'll make something up and give a brief description and everything..would that be ook or would you prefer it if you did it?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #163
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul, if you want I'll make something up and give a brief description and everything..would that be ook or would you prefer it if you did it?
    Thanks for the offer Ryan but it might be easier if I go through them as I would like to have a look at them all anyway while I'm gathering the data.

    Thanks for the offer though

  14. #164
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's some pretty interesting stuff going on in this quiz, and so I would like to take the opportunity to analyze the various approaches and present some conclusions.

    In this post, I'll cover the fixed-width two-level horizontal menus. In later posts I'll cover the fixed-width multi-level and fluid-width two-level menus.



    Timo's (YuriKolovski's) and Paul's single level methods are essentially the same. The technique uses negative margin-top offscreen on the top-level LIs and a large margin-top on the As, and relies on changes to the A's horizontal margin to induce float drop to trigger and sustain the submenus.

    All browsers use same css, although Opera needs a fix (either clear on the submenu or a wider margin on the submenu As when hovering) due to a bug.

    Keyboard "tabbing" works perfectly, and fixed heights are not needed on the submenu items.

    Either the top-level UL needs a fixed height and the submenu ULs need a large negative margin-bottom or else the menu container must be placed in a different block formatting context (eg by absolutely positioning it) from subsequent content, otherwise the use of floats causes unwanted interaction with subsequent content.

    Each submenu A or an ancestor needs to lie on a higher stacking context from subsequent text (by positioning it) else that text will overlay the submenus. Doing this on the As seems neatest.

    The menu container expands vertically when triggering the dropdowns in IE6, unless the submenu ULs have a large negative margin-bottom.



    Maleika's (kohoutek's) technique uses a large margin-bottom on the top-level As and position-relative top-offscreen on the submenu ULs, and relies on changes to the A's horizontal margin to induce float drop to trigger and sustain the submenus.

    The technique was presented for IE6 only (other browsers gets the classic dropdown menu); but I think it works for other browsers too.

    The submenu ULs need a large negative margin-bottom in IE6 else you can't interact with content below the menu due to the submenu's box remaining in place even when its content is relatively-positioned offscreen.

    Unfortunately keyboard "tabbing" fails, and there is strange background unpredictability in Opera for some reason.



    Stu Nicholls' technique also relies on changes to the A's horizontal margin to induce float drop to trigger and sustain the submenus, but instead of using a negative right margin on the top-level As to keep the submenu ULs in vertical alignment with the As and hence the top-level LIs narrow, he uses overflow:hidden on a container of each top-level LI to hide the horizontal overflow of the LI.

    All browsers use same css, although some browser fixes may be present in the CSS; I have not tested a reduced version.

    Keyboard "tabbing" works perfectly, and fixed heights are not needed anywhere.

    However, the method needs extra markup, and in a way which means that the usual nested list structure is not possible. (The top-level LIs each need their own container with overflow:hidden set.)

    Moreover, the use of overflow:hidden means that using a negative margin-bottom on the submenu ULs is not possible and so the menu container must be placed in a different block formatting context (eg by absolutely positioning it) from subsequent content, otherwise the use of floats causes unwanted interaction with subsequent content. (This is something of a restriction, compared to other techniques.)



    The first technique that I came up with myself is rather similar to Stu Nicholls', although hovering over the top-level A toggles it between floated and non-floated rather than alters the horizontal margin. It succeeds in preserving good markup structure, and browsers use same css, but it suffers from other problems such as the need to absolutely position the menu container to unwanted interaction of the floats with subsequent content and the failure of keyboard tabbing in Firefox.

    My second technique, which is essentially the offscreen-left equivalent of Timo's/Paul's, uses negative margin-left offscreen on the top-level LIs and a large margin-left on the right-floated As followed by right-floated ULs, and relies on toggling the A between floated and non-floated to trigger the submenu (although this method is interchangeable with the usual margin-induced float drop), and then the usual margin-induced float drop to preserve it.

    This "off-left" method has the same features, pros and cons of Timo's/Paul's method described above.



    Summary

    It seems clear that the most usable techniques are Timo's/Paul's "off-top" method, and the "off-left" method. These two techniques essentially do the same thing.

    Note that both can easily be tweaked to achieve a persistent background on the top-level A by using padding-top and background on the submenu UL: background-color in the case of "off-top", but only background-image in the case of "off-left" due to various IE6 bugs related to LIs and floats.

    In "off-left", there's also the overhead of having to set the z-index on the top-level LIs, and a frustrating bug in IE6 means that if you hover over the submenu As at any time after you've tabbed onto at least one of the menu As, there's a 1px horizontal jog on the unhovered submenu As.

    Both have the disadvantage of the LIs' background stretching offscreen and thus possibly covering the background of other on-screen content (and hence preventing a right-click context menu for that background, for example); but "off-left" has the advantage of this covered area being very narrow, thus mitigating the problem.

    Both techniques also have the potential disadvantage of relying upon "offscreen hiding", which, despite the fact that all browsers facilitate it, is in contravention of CSS21 and could potentially fail (be reachable by scrolling) in future browsers. However, this is unlikely, given that offscreen hiding is widely used on the web. In any case, it is easily solved in the "off-top" method using html {overflow-y:auto} body {overflow-y:hidden}. It's more dangerous to do the overflow-x equivalent for the "off-left" method in the common case of a fixed-width body.

    Both techniques have the considerable advantage over the traditional menus in that they fully support keyboard "tabbing" in all browsers, but have the disadvantage of requiring fixed-width menu items. (Note that keyboard "tabbing" /ought to/ work in all browsers with the traditional menus; it's a bug in all browsers that it doesn't.)


    Conclusions

    All techniques exhibited in this quiz make use of float-drop to keep the submenu in place when hovering its menu items.

    Of the two methods discussed in detail above, I would use Timo's/Paul's unless there's a good reason to believe that users will want to have context-menu access the background of other on-screen content above the menu.

    The choice between these float drop techniques and the traditional menu method come down to a trade-off between better tabbing and (significantly) less obvious/self-explanitory CSS. Normally I would eschew the less intelligible CSS if a more natural method exists, but in this case the better tabbing is certainly very persuasive; I'll certainly consider it for my next fixed-width two-level menu!


    Here are minimal, clean versions of both float-drop techniques:

    Timo's/Paul's "off-top" method:

    Code HTML4Strict:
    <!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></title>
    	<style type="text/css">
    #navigation {
    	background: #9cf;
    	height: 25px;
    }
     
    #navigation ul {
    	margin: 0;
    	padding: 0;
    	list-style: none none;
    }
     
    #navigation .nav .link {
    	float: left; _display: inline;
    	width: 300px;
    	margin-top: -1000px;
    }
     
    #navigation .nav a {
    	display: block;
    	width: 300px;
    	height: 25px;
    	text-decoration: none;
    }
     
    #navigation .nav a.main {
    	position: relative;
    	float: left; _display: inline;
    	margin-right: -299px;
    	margin-top: 1000px;
    }
    #navigation .nav a.main:hover,
    #navigation .nav a.main:focus,
    #navigation .nav a.main:active {
    	background: orange;
    	margin-right: 0;
    }
     
     
    #navigation .nav .sub {
    	background: green;
    	float: left; /* display:inline break IE6 here */
    	margin-top: -25px;
    	padding-top: 25px;
    	margin-bottom: -1000px;
    }
    /*Opera fix*/
    #navigation .nav .sub:hover {
    	clear: both;
    }
     
    #navigation .nav .sub a {
    	background: yellow;
    	position: relative;
    	margin-right: -1px;
    }
    #navigation .nav .sub a:hover,
    #navigation .nav .sub a:focus,
    #navigation .nav .sub a:active {
    	background: orange;
    	margin-right: 0;
    }
    	</style>
    </head>
    <body>
    <div style="color:#ccc; background-color: #999">
    	<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>
    <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><a href="#3">test3</a></li>
    				<li><a href="#4">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>
    <div style="color:#ccc; background-color: #999">
    	<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>

    My "off-left" method:

    Code HTML4Strict:
    <!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></title>
    	<style type="text/css">
    #navigation {
    	height: 25px;
    }
     
    #navigation ul {
    	margin: 0;
    	padding: 0;
    	list-style: none none;
    }
     
    #navigation li.link {
    	position: relative;
    	float: left; _display: inline;
    	margin-left: -1000px;
    	width: 1300px;
    }
    #navigation li.link-1 {
    	z-index: 2;
    }
    #navigation li.link-2 {
    	z-index: 1;
    }
     
    #navigation li.link a {
    	float: right; _display: inline;
    	width: 300px;
    	text-decoration: none;
    }
    #navigation li.link a.main {
    	background: #9cf;
    	position: relative;
    	margin-left: 1000px;
    }
    #navigation li.link a.main:hover,
    #navigation li.link a.main:active,
    #navigation li.link a.main:focus {
    	background: orange;
    	display: block;
    	float: none;
    }
     
    #navigation li.link ul {
    	float: right; _display: inline;
    	margin-left: -299px;
    	margin-bottom: -1000px;
    }
     
    #navigation li.link li a {
    	background: yellow;
    	position: relative;
    	clear: right; /* Op>=9.6 need this, tho earlier Ops ok! */
    	margin-left: -1px;
    }
    #navigation li.link li a:hover,
    #navigation li.link li a:active,
    #navigation li.link li a:focus {
    	background: #99f;
    	margin-left: 0;
    }
    	</style>
    </head>
    <body>
    <div style="color:#ccc; background-color: #999">
    	<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>
    	<div id="navigation">
    		<ul class="nav">
    			<li class="link link-1">
    				<a class="main" href="#">Main1</a>
    				<ul class="sub">
    					<li class="first-child"><a href="#">test11</a></li>
    					<li><a href="#">test12</a></li>
    					<li><a href="#">test13</a></li>
    					<li><a href="#">test14</a></li>
    				</ul>
    			</li>
    			<li class="link link-2">
    				<a class="main" href="#">Main2</a>
    				<ul class="sub">
    					<li class="first-child"><a href="#">test21</a></li>
    					<li><a href="#">test22</a></li>
    					<li><a href="#">test23</a></li>
    					<li><a href="#">test24</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    <div style="color:#ccc; background-color: #999">
    	<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>

  15. #165
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Good summary Anton - Thanks

  16. #166
    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 summary Anton P.


    edit:

    actually my first version was offscreen-left aligned, with witch i tried to do the fluid widths of menu, later i found out it is equally as hard to do this aligning things on the horizontal axis as it is on the vertical axis, further simplifications reached what we have now.
    My second technique, which is essentially the offscreen-left equivalent of Timo's/Paul's, uses negative margin-left offscreen on the top-level LIs and a large margin-left on the right-floated As followed by right-floated ULs, and relies on toggling the A between floated and non-floated to trigger the submenu (although this method is interchangeable with the usual margin-induced float drop), and then the usual margin-induced float drop to preserve it.
    but have the disadvantage of requiring fixed-width menu items.
    that is fixable, just have not figured out how... xD

    Normally I would eschew the less intelligible CSS if a more natural method exists, but in this case the better tabbing is certainly very persuasive; I'll certainly consider it for my next fixed-width two-level menu!
    the technique is more than natural, it does exactly what a dropdown is supposed to do, drop-down, aka float drop, does not get more natural than that in my opinion!

    All techniques exhibited in this quiz make use of float-drop to keep the submenu in place when hovering its menu items.
    i have some versions that dont work on float drop, the original ones didn't.

  17. #167
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Timo, You should get your original (think html) page updated to include the fixed width menu so that the comments by John on this page can be amended as the fixed width uses no extra elements and degrades gracefuly.

  18. #168
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i know, i really really should! been too busy with work, ill try and do it tomorrow as its sunday.
    ill probably call it dropper dropdown :D
    (in the end, unless someone says otherwise.)


    edit:
    when i made the dropdown one of the first websites i read was that one, and i was surprised to find stu's css only dropdown, but it did not work with keyboard tabbing.

  19. #169
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    FINAL - fixed width single level drop-down.
    Code CSS:
    <!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:25px;
        background:#ebebeb;
    }
    .nav {
        position:absolute;
    }
    .nav .link {
        width:300px;
        margin-top:-375px;
        float:left;
    }
    .nav a {
        position:relative;
        display:block;
        height:25px;
        line-height:25px;
        text-decoration:none;
        color:#000;
        z-index:10;
    }
    .nav .sub a {
        background:orange;
        margin:0 -1px 0 0;
        width:300px;
    }
    .nav .sub {
        float:left;
        background:#F90;
        padding-top:25px;
        margin-top:-25px;
    }
    .nav a.main li {
        width:300px;
    }
    .nav a.main {
        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:#000;
        color:#fff;
    }
    .nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {
        margin:0 0 0 0;
        background:#333;
        color:#fff;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
    a, a:hover, a:active, a:focus {}
    /*Opera fix*/
    .sub:hover {
        clear:both;
    }
    </style>
    </head>
    <body>
    <div id="navigation">
        <ul class="nav">
            <li class="link"> <a class="main" href="#m1">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>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#m2">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>
                </ul>
            </li>
            <li class="link"> <a class="main" href="#m3">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>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>

    Fully keyboard accessible via tabbing through links.

    To tab through links in Opera just use ctrl + up and ctrl + down. Other browsers can tab through using "tab" of course. Note that Safari users need tabbing turned on in Preferences/Advanced first.

    i did not bother with the styling or code minimization
    fixed occasional ie6 keyboard tabbing bug that happens even with normal lists (thanks to Paul!)
    Last edited by Paul O'B; Sep 21, 2009 at 01:47.

  20. #170
    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
    My second technique, which is essentially the offscreen-left equivalent of Timo's/Paul's, uses negative margin-left offscreen on the top-level LIs and a large margin-left on the right-floated As followed by right-floated ULs, and relies on toggling the A between floated and non-floated to trigger the submenu (although this method is interchangeable with the usual margin-induced float drop), and then the usual margin-induced float drop to preserve it.
    actually my first version was offscreen-left aligned, with witch i tried to do the fluid widths of menu, later i found out it is equally as hard to do this aligning things on the horizontal axis as it is on the vertical axis, further simplifications reached what we have now.
    Yes, the off-left method seems to offer few advantages.

    Normally I would eschew the less intelligible CSS if a more natural method exists, but in this case the better tabbing is certainly very persuasive
    the technique is more than natural, it does exactly what a dropdown is supposed to do, drop-down, aka float drop, does not get more natural than that in my opinion!
    Certainly, the CSS is itself semantically meaningful; that's why it works so well cross-browser. However, in my opinion, things like tiny margin-boxes on As and huge negative margins on LIs are not a natural way to approach a drop-down menu whose (only) requirements are that the drop-downs don't interfere with anything else (position:absolute) and stay open when you hover over the parent link (LI:hover + UL) or the drop-down itself (UL:hover). Regardless, the keyboard "tabbing" makes the method important, and the float-drop technique is interesting in its own right!

    All techniques exhibited in this quiz make use of float-drop to keep the submenu in place when hovering its menu items.
    i have some versions that dont work on float drop, the original ones didn't.
    Interesting! I'm looking forward to seeing some examples; do you plan to post them here?

  21. #171
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    there are far too many to post, and most of them are in format of backups, drafts, and are essentially broken from testing on them, searching for the working ones would take some time, i did not plan to post them, but i might post some more of the early ones later on.

    V1 dropdown
    v1.0.0

    Code CSS:
    <!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>Untitled Document</title>
    <style type="text/css">
    #link {
    	width:auto;
    	height:10.6em;
    	padding-bottom:1em;
    	border:solid red 1px;
    	overflow:hidden;
    }
    #link a {
    	background:red;
    	display:block;
    	float:left;
    }
    #link a.main {
    	display:block;
    	background:#333;
    	color:#fff;
    	padding:.2em;
    	float:left;
    	width:auto;
    	text-decoration:none;
    	margin-bottom:200px;
     
    }
    #link a.main:hover {
    	background:#ebebeb;
    	color:#000;
    	margin-bottom:0;
    }
    .links {
    	clear:both;	
    	margin:0;
    	list-style-type:none;
    	padding:0;
    }
    .links a {
     
    }
    </style>
    </head>
    <body>
    <div class="left"></div>
    <div class="right"></div>
    <div id="link">
        <a class="main" href="#">Test Link</a>
        <ul class="links">
        <a href="#">link1</a>
        <a href="#">link2</a>
        <a href="#">link3</a>
        <a href="#">link4</a>
        </ul>
    </div>
    <div style="clear:both;"><a href="#test">link</a><br><a href="#test2">link</a><br><a href="#test3">link</a></div>
    </body>
    </html>
    V1 dropdown
    v5.12
    Code CSS:
    <!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>NON JS DropDown Test</title>
    <style type="text/css">
    .link {
    	/*overflow:hidden;*/
    	position:relative;
    	float:right;
    	border:solid green 1px;
    }
    .link a {
    	background:#ebebeb;
    	display:block;
    	float:left;
    }
    .link a.main:hover {
    	/*background:#ebebeb;*/
    	color:#000;
    	margin-bottom:0;
    }
    .divlinks {
    	width:200px;
    	clear:both;
    	/*overflow:hidden;*/
    	position:absolute;
    	top:0;
    	/*margin-top:-2em;*/
    	border:solid orange 1px;
    	height:7em;
     
    }
    .link ul {
    	clear:both;	
    	margin:0;
    	list-style-type:none;
    	padding:0;
    	float:right;
    	/*margin-top:1.6em;*/
    	position:relative;
    }
    .link ul li {
    	clear:both;
    	position:relative;
    	float:left;
    }
    .link ul a {
    	display:block;
    	width:100px;
    	position:relative;
    }
    .link ul a:hover, .link ul a:active, .link ul a:focus {
    	border-left:solid red 100px;
    	left:-100px;
    }
    .link:hover a.main {
    	/*background:#222;*/
    	/*color:#fff;*/
    }
    .link a.main {
    	width:100px;
    	height:2em;
    	line-height:2em;
    	background:none;
    	position:relative;
    	z-index:10;
    	/*margin-right:100px;*/
    }
    .link a.main:hover {
     
    	border-left:100px solid #222;
    }
    .link a.main:active {
    	background:green;	
    }
    .mainlink {
    	position:relative;
    	width:200px;
    	/*overflow:hidden;*/
    	border:solid red 1px;
    	/*left:-100px;*/
    	float:left;
    }
    .linkcontainer {
    	width:100px;
    	/*overflow:hidden;*/
    	position:relative;
    }
    .linkcontainer a:hover {
    	/*background:#222;
    	color:#fff;*/
    	text-decoration:none;
    }
     
    /*valid browser fix*/
    body>.linkcontainer {
    	/*height:2em;*/
    }
    .linkcontainer:hover {
    	height:auto;
    }
    body>.linkcontainer:focus {/*not working, will have to comment the height:2em;*/
    	height:auto;
    }
     
    .bgthing {
    	width:100px;
    	background:red;
    	height:2em;
    	opacity:0.4;
    }
     
     
    .link a.main, .link ul {
    	left:-100px;
    }
    .link {
     
    }
    </style>
    <!--[if lt IE 6]>
    <style type="text/css">
    /*ie5 fix*/
    .link ul a:hover, .link ul a:active {
    	width:200px;/*for ie5*/
    }
    .link a.main:hover, .link a.main:active {
    	width:200px;/*for ie5*/
    }
    </style>
    <![endif]--> 
    </head>
    <body>
    <!--the idea behind this is that the link that you hover over extends the container, thus moving all the links in the container-->
    <div class="linkcontainer"><div class="mainlink"><div class="link">
        <a class="main" href="#main">Test Link</a>
        <div class="divlinks">
    		<ul><li class="bgthing">&nbsp;</li>
        	<li><a href="#link1">link1</a></li>
        	<li><a href="#link2">link two</a></li>
        	<li><a href="#link3">link THREE</a></li>
        	<li><a href="#link4">link four</a></li>
        	</ul>
        </div>
    </div></div></div>
     
     
    <div style="clear:both;"><a href="#test">background link</a><br><a href="#test2">background link</a><br><a href="#test3">background link</a></div>
    </body>
    </html>

    V2 dropdown
    v6.12
    Code CSS:
    <!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>DropDown Ver2</title>
    <style type="text/css">
    ul {
    	margin:0;	
    	padding:0;
    	list-style-type:none;
    	width:1px;
    	list-style-position:inside;
    }
    ul li {
    	margin:0;
    	list-style:none;
    	padding:0;
    }
    div {
    	position:relative;	
    }
    .mainlink {
    	position:relative;	
    	height:2em;
    }
    .bigbox {
    	z-index:10;
     
    	background:#ebebeb;
    	overflow:hidden;
    	position:absolute;
    	width:100px;/*make as wide as the sublinks*/
    }
    #box1 { 
    	height:100px;
    	width:300px;/*max linkwidth+linkborder*/
    	background:#333;
    	margin-top:-2000px;
    	padding-top:2em;
    }
    #box3 a {
    	display:block;
    	width:200px;
    }
     
     
    #box2 {
    	height:2000px;
    	width:100px;
    	background:#006;
    	float:left;
    }
    #box3 {
    	background:#C63;
    	float:left;
    }
    #box3 a:hover, #box3 a:active, #box3 a:focus {
    	margin-right:100px;
    	/*width:200px;*//*ie5*/
    	background:#333;
    	color:#fff;
    }
     
    a.main {
    	position:relative;
    	display:block;
    	left:-100px;
    	margin-top:-2em;
    	height:2em;
    	color:#fff;
    	background:#000;
    	z-index:10;
    	float:left;
    }
    a.main b {
    	position:relative;
    	top:2000px;
    	display:block;
    	cursor:pointer;
    	height:2em;
    }
    a.main:hover, a.main:active, a.main:focus {
    	padding-bottom:2000px;
    	/*border-bottom:220px solid red;*//*ie5*/
    }
     
     
    .bgthing {
    	background:red;
    	width:100px;/*same as main link or bigger*/
    	height:2em;
    	margin-top:-2em;
    	position:relative;
    }
    </style>
    </head>
    <body>
    <div class="mainlink">
    <div class="bigbox">
    	<div id="box1">
        	<div id="box2">
    		</div>
        	<a href="#" class="main"><b>MAIN</b></a>
        	<div id="box3">
    		<div class="bgthing"></div>
        	<a href="#test">test</a>
        	<a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
            <a href="#test2">test2</a>
    		</div>
    	</div>
    </div>
    </div>
    <a href="#clicable">stuff</a><br />
    <a href="#clicable2">stuff stuff stuff stuff stuff stuff stuff stuff stuff</a>
     
    </body>
    </html>

    V3 dropdown
    v23.0
    Code CSS:
    <!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>valid browser overflow test</title>
    <style type="text/css">
    ul {
    	list-style-type:circle;
    	list-style-position:insidel;
    }
    a {
    	color:#000;	
    }
    .navigation {
    	height:2em;	
    	width:56.25em;
    	background:#efefef;
    }
    .link {
    	height:2em;
    	position:relative;
    	float:left;
    	z-index:10;
    }
    a.main {
    	position:relative;
    	display:inline-block;
    	text-decoration:none;
    	line-height:2em;
    	height:2em;
    	z-index:10;
    }
    a.main b {
    	position:relative;
    	display:inline-block;
    	padding:0 .5em 0 .5em;
    	line-height:2em;
    	cursor:pointer;
    }
    .sublinkscontainer {
    	position:absolute;
    }
    .sublinks {
    	position:relative;
    	float:right;/*can be any float*/
    	margin-top:-2em;
    }
    .sublinks a {
    	display:block;
    	background:orange;
     
    	padding:.2em 0 .2em 0;
    	text-decoration:none;
     
    }
    .shifter {
    	position:relative;
    	float:right;
    }
    .sublinks .bgthing {
    	height:2em;
    	background:orange;
    	display:block;
    }
     
    ul, li {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
     
     
     
     
    /*height limit*/
    .link {
    	top:-25em;
    }
    a.main {
    	top:25em;
    }
    a.main:hover, a.main:active, a.main:focus {
    	margin-bottom:25em;
    	background:#000;
    	color:#fff;
    	outline:none;
    }
    a.main:active b, a.main:focus b {
    	outline: dotted thin;/*resetting the outline*/
    }
    .sublinkscontainer, .shifter {
    	height:25em;
    }
    /*valid browser height maximization*/
    .nav > .link {
    	top:-1000em;
    }
    .link > a.main {
    	top:1000em;
    }
    .link > a.main:hover, .link > a.main:active, .link > a.main:focus {
    	margin-bottom:1000em;
    }
    .link > .sublinkscontainer, .sublinkscontainer > .shifter {
    	height:1000em;
    }
    /*/valid browser height maximization*/
     
     
    /*width limit*/
    .sublinkscontainer {
    	width:12.563em;
    }
    .sublinks a {
    	width:12.5em;/*12.5 - padding*/
    }
     
     
    .sublinks a:hover, .sublinks a:active, .sublinks a:focus {
    	margin-right:0.063em;
    	background:#333;
    	color:#fff;
    }
    .sublinks:hover a {/*opera fix*/
    	margin-right:0.063em;	
    }
    a.main:focus + div .sublinks a, a.main:active + div .sublinks a {/*valid browser tab+hover fix*/
    	margin-right:0;
    }
     
    .shifter {
    	width:0.063em;
    }
    .sublinks .bgthing {
    	width:12.5em;
    }
     
     
     
    .content {
    	clear:both;	
    }
     
     
     
    a.main span {/*this nullifies the masks effects*/
    	position:absolute;
    	right:0;
    	top:0;
    	line-height:0;
    }
    a.main span i {/*the mask*/
    	display:block;
    	position:absolute;
    	width:12.5em;
    	background:#efefef;/*must be bg color for masking*/
    	height:2em;
    	top:0;
    	right:auto;
    }
     
     
     
    .hidehotspot {
    	position:relative;
    	float:left;
    	background:red;
    	height:2em;
    	z-index:10;
    }
    .hidehotspot b {
    	position:absolute;
    	background:#efefef;
    	height:2em;
    	width:56.25em;
    	display:block;
    }
     
     
    /*ie5 fault for not supporting paddings on links*/
    .sublinks a b {
    	font-weight:normal;
    	position:relative;
    	padding-left:.5em;
    	display:block;
    }
     
    /*valid browser height fix*/
    .link > a.main:hover,
    .link > a.main:active,
    .link > a.main:focus {
    	margin-bottom:0;
    }
    .link > a.main:hover + div .sublinks a,
    .link > a.main:active + div .sublinks a,
    .link > a.main:focus + div .sublinks a {
    	margin-right:0.063em;
    }
    /*/valid browser height fix*/
    </style>
     
    <!--[if lte IE 6]>
    <style type="text/css">
    .link {
    	margin-bottom:-2000px;/*only for ie5-6*/
    }
    /*ie5 fix*/
    li {
    	float:left;
    }
    .nav {/*only ie5-6 need this*/
    	height:25em;
    	position:absolute;
    	width:56.25em;
    	overflow:hidden;
    }
    </style>
    <![endif]--> 
    </head>
    <body>
    <div class="navigation">
    <div class="nav">
    <div class="link">
    	<a class="main" href="#MAIN"><b>MAIN LINK</b><span><i>&nbsp;</i></span></a>
        <div><!--IE6 needs this div-->
    		<div class="sublinkscontainer">
    			<div class="shifter"></div>
    			<ul class="sublinks">
                	<li class="bgthing">&nbsp;</li>
        			<li><a href="#test1"><b>test test</b></a></li>
        		    <li><a href="#test2"><b>test test test test test test test test test test test test </b></a></li>
        		    <li><a href="#test3"><b>test test</b></a></li>
        		    <li><a href="#test4"><b>test</b></a></li>
        		    <li><a href="#test5"><b>test test</b></a></li>
    			</ul>
    		</div>
    	</div>
    </div>
    <div class="link">
    	<a class="main" href="#MAIN"><b>MAIN CAN BE LONG</b><span><i>&nbsp;</i></span></a>
        <div><!--IE6 needs this div-->
    		<div class="sublinkscontainer">
    			<div class="shifter"></div>
    			<ul class="sublinks">
                	<li class="bgthing">&nbsp;</li>
        			<li><a href="#test1"><b>test test</b></a></li>
        		    <li><a href="#test2"><b>test test test</b></a></li>
        		    <li><a href="#test3"><b>test test</b></a></li>
        		    <li><a href="#test4"><b>test</b></a></li>
        		    <li><a href="#test5"><b>test test</b></a></li>
    			</ul>
    		</div>
    	</div>
    </div>
    <div class="link">
    	<a class="main" href="#MAIN"><b>MAIN</b><span><i>&nbsp;</i></span></a>
        <div><!--IE6 needs this div-->
    		<div class="sublinkscontainer">
    			<div class="shifter"></div>
    			<ul class="sublinks">
                	<li class="bgthing">&nbsp;</li>
        			<li><a href="#test1"><b>test test</b></a></li>
        		    <li><a href="#test2"><b>test test test test test test test test test test test test </b></a></li>
        		    <li><a href="#test3"><b>test test</b></a></li>
        		    <li><a href="#test4"><b>test</b></a></li>
        		    <li><a href="#test5"><b>test test</b></a></li>
    			</ul>
    		</div>
    	</div>
    </div>
     
     
    <div class="hidehotspot"><b>&nbsp;</b></div>
    </div>
    </div>
     
    <div class="content">
    stuff<br />
    stuff stuff stuff
    </div>
    </body>
    </html>

    V4
    v20.2
    Code CSS:
    <!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>41logo dropdown test</title>
    <style type="text/css">
    .navigation {
    	position:relative;
    	width:900px;
    	background:#b9b9b9;
    	height:55px;
    	overflow:hidden;
    	border-bottom:solid 2px #b9b9b9;
    }
    a.main {
    	position:relative;
    	display:block;
    	height:27px;
    	line-height:27px;
    	z-index:12;
    	min-width:1px;
    	width:auto!important;
    	width:1px;
    	margin-bottom:12em;
    }
    a.main:hover, 
    a.main:active, 
    a.main:focus {
    	margin-bottom:0;
    	background:#000;
    	color:#fff;
    	outline:pink solid 1px;
    }
    .link {
    	float:left;	
    }
    .link div {
    	list-style:none;
    	margin:0;
    	position:absolute;
    	left:0;
    	height:26px;
    	width:900px;
    	background:navy;
    }
    .link ul {
    	position:absolute;
    	left:0;
    	bottom:0;
    	margin:0;
    	padding:0;
    	list-style:none;
    }
     
    .link ul li {
    	float:left;
    }
    .link ul a {
    	display:block;
    	height:53px;
    	top:27px;
    	float:left;
    	line-height:26px;
    	position:relative;
    	background:navy;
    }
    .link ul a:hover,
    .link ul a:active,
    .link ul a:focus {
    	border-bottom:dashed transparent 12em;
    }
     
    .link ul .filler a span {/*space filler*/
    	position:absolute;
    	line-height:26px;
    	height:26px;
    	display:block;
    	top:0;
    	width:900px;
    	background:navy;
    }
    .link ul .filler a {
    	outline:none;
    }
    .link ul .filler a:hover {
    	background:navy;
    	cursor:default;
    }
     
    /*OPERA FIX*/
    a.main + div {
    	top:12em;
    	margin-top:27px;
    }
    a.main:hover + div,
    a.main:active + div,
    a.main:focus + div{
    	top:0;
    }
    /*/OPERA FIX*/
     
    /*STYLING*/
    a.main {
    	padding:0 .5em 0 .5em;	
    }
    .link ul a {
    	padding:0 .5em 0 .5em;
    	text-decoration:none;
    }
    .link ul a:hover {
    	background:#000;
    	color:#fff;
    }
    /*modern browser hover thing*/
    .link {
    	height:27px;
    }
    .link:hover a.main {
    	background:red;
    }
    /*modern browser tab+hover fix*/
    .link a.main:hover + div a {
    	border-bottom:0;
    }
    .link:hover ~ .link a.main:focus + div {
    	top:12em;
    	margin-top:27px;
    }
    a.main:focus + div ul a:hover {
    	border:0;
    }
    /*right/left*/
    .link .right ul {
    	left:auto;
    	right:0;
    }
    .link .right ul .filler a span {
    	right:0;
    }
    </style>
     
    <!--[if lt IE 6]>
    <style type="text/css">
    .link ul a {
    	height:26px;
    	top:0;
    }
    .link ul a:hover,
    .link ul a:active,
    .link ul a:focus {
    	border-bottom:0;
    	margin-bottom:12em;
    }
    </style>
    <![endif]--> 
    </head>
    <body>
    <div class="navigation">
    	<div class="link">
    	<a href="#" class="main">MAIN</a>
        	<div>
        	<ul>
            	<li><a href="#test">This</a></li>
                <li><a href="#test">works</a></li>
                <li><a href="#test">just like</a></li>
                <li><a href="http://www.sailinganarchy.com/fringe/2004/images/Skandia%20and%20crane%20ship%203.jpg">a crane</a></li>
                <li class="filler"><a href="#">&nbsp;<span>&nbsp;</span></a></li><!--needed for hovering on the rest-->
            </ul>
     
            </div>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        	<div>
        	<ul>
            	<li><a href="#tset">tset</a></li>
                <li><a href="#tset">tset</a></li>
                <li><a href="#tset">tset</a></li>
                <li class="filler"><a href="#">&nbsp;<span>&nbsp;</span></a></li><!--needed for hovering on the rest-->
            </ul>
            </div>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        	<div class="right">
        	<ul><li class="filler"><a href="#">&nbsp;<span>&nbsp;</span></a></li>
            	<li><a href="#tset">tset1 test 1</a></li>
                <li><a href="#tset">tset2 test 2</a></li>
                <li><a href="#tset">tset3 test 3</a></li>
            </ul>
            </div>
        </div>
        <div class="link">
        <a href="#" class="main">MAIN</a>
        	<div class="right">
        	<ul><li class="filler"><a href="#">&nbsp;<span>&nbsp;</span></a></li>
            	<li><a href="#tset">tset1</a></li>
                <li><a href="#tset">tset2</a></li>
                <li><a href="#tset">tset3</a></li>
            </ul>
            </div>
        </div>
    </div>
     
    <div class="content">
    stuff<br />
    stuff stuff stuff
    </div>
    </body>
    </html>


    very unpolished, testing material, enjoy .

  22. #172
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Continuing my analysis of these drop-down menu techniques, I'll now discuss the fixed-width multi-level menus.

    Timo's approach, naturally enough, was to treat each menu item which holds a submenu as a self-contained two-level menu, reusing the same off-top float-drop technique each time.

    The example which was presented in this quiz consisted of a straightforward method for good browsers and a more convoluted one for IE6. (As is often the case, IE7's bugs are a subset of IE6's in every technique discussed in this post.)

    In its original form, for LIs which do not contain submenus, no special styles were given to the LI and the A; whilst each LI which contains a submenu works as a self-contained version of two-level float drop menu, has the associated special styles, and is "reset" from its surroundings by being floated.

    Here is a minimal, clean version of the technique for standards-compliant browsers, in which I have chosen to apply the special styles to /all/ LIs and As, irrespective of whether the LI contains a submenu, since this avoids the need to distinguish such LIs in the CSS:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    	<style type="text/css">
    ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
     
    #navigation {
    	background: blue;
    	margin-top: 100px;
    	height: 30px;
    }
     
     
    /***** ALL LEVELS *****/
     
    ul.nav li {
    	float: left; _display: inline;
    }
     
    ul.nav a {
    	float: left; _display: inline;
    	width: 300px;
    	margin-right: -299px;
    }
    ul.nav a:hover,
    ul.nav a:focus,
    ul.nav a:active {
    	background: orange;
    	margin-right: 0;
    }
     
     
    /***** LEVEL 1 *****/
     
    ul.nav li.link {
    	width: 300px;
    	margin-top: -10000px; /* (1) set offscreen distance */
    }
     
    ul.nav a.main {
    	background: gray;
    	margin-top: 10000px; /* (2) bring back onscreen */
    }
     
     
    /***** LEVEL 2 AND BELOW *****/
     
    ul.nav ul {
    	float:left; _display: inline;
    	margin-bottom: -5000px; /* Avoid interaction with subsequent page elements */
    	                        /* any sufficiently large amount, but Opera has low upper limits */
    }
    ul.nav ul:hover {
    	clear:left; /* Opera needs this to ensure hovers fire correctly */
    }
     
    ul.sub li {
    	position: relative;
    	top: -10000px; /* (1) set offscreen distance. use relative positioning instead of negative margin-top in order to preserve the natural LI positions in the list */
    	clear: left;
    	height: 25px; /* height of child A */
    }
     
    ul.sub a {
    	background: #9C3;
    	margin-top: 10000px; /* (2) bring back onscreen */
    	height: 25px;
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.sub ul {
    	margin-top: -25px; /* pull up alongside the parent LI */
    }
     
    ul.sub ul li {
    	left: 300px; /* display the LIs to the side of the parent LI instead of in the same column */
    }
    .link-3 ul.sub ul li {
    	left: -300px; /* change submenu direction */
    }
     
    	</style>
    </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 link-1"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li class="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><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 link-2"> <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 link-3"> <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="has-sub"><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="has-sub"><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>
    	<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p>
    </div>
     
    </body>
    </html>
    It's incredibly simple! Unfortunately, various bugs in IE6 mean that this core technique fails horribly there. The bug which causes the root trouble is the expanding box bug; the LIs expand their height to contain their child A's tall margin box.

    Here is a minimal, clean version of the technique which Timo used for IE6, in which the IE6 styles are presented (using the underscore hack) alongside those for standards-compliant browsers, for ready comparison:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    	<style type="text/css">
    ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
     
    #navigation {
    	background: blue;
    	margin-top: 100px;
    	height: 30px;
    }
     
     
    /***** ALL LEVELS *****/
     
    ul.nav li {
    	float: left; _display: inline;
    }
     
    ul.nav a {
    	float: left; _display: inline;
    	width: 300px;
    	margin-right: -299px;
    }
    ul.nav a:hover,
    ul.nav a:focus,
    ul.nav a:active {
    	background: orange;
    	margin-right: 0;
    }
     
     
    /***** LEVEL 1 *****/
     
    ul.nav li.link {
    	width: 300px;
    	margin-top: -10000px;
    }
     
    ul.nav a.main {
    	background: gray;
    	margin-top: 10000px;
    }
     
     
    /***** LEVEL 2 AND BELOW *****/
     
    ul.nav ul {
    	float:left; _display: inline;
    	margin-bottom: -5000px; /* Avoid interaction with subsequent page elements */
    	                        /* any sufficiently large amount, but Opera has low upper limits */
    }
    ul.nav ul:hover {
    	clear:left; /* Opera needs this to ensure hovers fire correctly */
    }
     
    ul.sub li {
    	position: relative;
    	top: -10000px; /* (1) set offscreen distance. use relative positioning instead of negative margin-top in order to preserve the natural LI positions in the list */
    	_top: -20000px; /* (8) wide LIs mean that later ones cover earlier ones, so must do futher pull up */
    	                /* any sufficiently large amount, but Opera has low upper limits */
    	clear: left;
    	_width: 299px; /* (7) specifying the width is not theoretically necessary, but works around a bug in IE6/7 in which hovering (only) the first item of the parent menu causes all this-level submenus to appear */
    	_margin-top: -10000px; /* (4) IE6 correction for LI expanding to contain child UL, causing vertical gap in this menu; needs to be greater than half the magnitude of the child A's margin-top, with the remainder used to set top on child LIs; easiest to make this remainder zero */
    	                      /* in fact it would be easier to put negative margin-bottom on the child UL */
    	height: 25px; /* height of child A... */
    	_height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */
    	_height: 20025px; /* (4) + 10000=|margin-top| to counteract the overlap of these LIs */
    	_margin-bottom: -10000px; /* (3) undo the effect of increased height */
    	                         /* in fact it would be nicer to set margin-top instead, since then (8) comes for free without needing to increase top */
    }
     
    ul.sub a {
    	background: #9C3;
    	_position: relative; /* makes A visible outside of its margin box */
    	_top: 10000px; /* (6) restore position after pull-up */
    	_top: 20000px; /* (9) increased to correct for futher pull-up */
    	margin-top: 10000px; /* (2) bring back onscreen */
    	height: 25px;
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.sub ul {
    	margin-top: -25px; /* pull up alongside the parent LI */
    }
     
    ul.sub ul li {
    	left: 300px; /* display the LIs to the side of the parent LI instead of in the same column */
    	_top: auto; /* (5) see (4) */
    	_width: 298px; /* (7) IE6; see above */
    }
    .link-3 ul.sub ul li {
    	left: -300px; /* change submenu direction */
    }
     
     
    /***** LEVEL 4 and below *****/
     
    ul.sub ul ul li {
    	_width: 297px; /* (7) IE6; see above */
    }
     
    	</style>
    </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 link-1"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li class="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><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 link-2"> <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 link-3"> <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="has-sub"><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="has-sub"><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>
    	<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p>
    </div>
     
    </body>
    </html>
    I have annotated in some detail (in steps labelled 1 to 9) the precise reason for each extra rule needed for IE6. (Step 7 describes a nasty, nonsensical bug which is explicitly worked around in all the techniques presented in this post.)

    Although IE6 need several extra styles, the CSS is meaningful and as such, the IE6 technique also works in standards-compliant browsers.

    [Note that in this cleaned version, the menu no longer gets truncated at bottom of browser in IE6, which occured in the original code for some reason.]


    By finding alternative solutions to some of the issues and bugs described in the annotations, it is possible to simplify the logic a little. Here is a simplified version of the technique for all browsers (in which all browsers are given the IE6 method, for conciseness):

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    	<style type="text/css">
    ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    }
     
    #navigation {
    	background: blue;
    	margin-top: 100px;
    	height: 30px;
    }
     
     
    /***** ALL LEVELS *****/
     
    ul.nav li {
    	float: left; _display: inline;
    }
     
    ul.nav a {
    	float: left; _display: inline;
    	width: 300px;
    	margin-right: -299px;
    }
    ul.nav a:hover,
    ul.nav a:focus,
    ul.nav a:active {
    	background: orange;
    	margin-right: 0;
    }
     
     
    /***** LEVEL 1 *****/
     
    ul.nav li.link {
    	width: 300px;
    	margin-top: -10000px;
    }
     
    ul.nav a.main {
    	background: gray;
    	margin-top: 10000px;
    }
     
     
    /***** LEVEL 2 AND BELOW *****/
     
    ul.nav ul {
    	float:left; _display: inline;
    	margin-bottom: -5000px; /* (4) IE6 correction for LI expanding to contain child UL */
    	                        /* also avoids interaction with subsequent page elements */
    	                        /* any sufficiently large amount, but Opera has low upper limits */
    }
    ul.nav ul:hover {
    	clear:left; /* Opera needs this to ensure hovers fire correctly */
    }
     
    ul.sub li {
    	position: relative;
    	top: -10000px; /* (7) wide LIs mean that later ones cover earlier ones, so must do pull up */
    	clear: left;
    	width: 299px; /* (6) specifying the width is not theoretically necessary, but works around a bug in IE6/7 in which hovering (only) the first item of the parent menu causes all child submenus to appear */
    	                      /* in fact it would be easier to put negative margin-bottom on the child UL */
    	margin-top: -10000px; /* (1) set offscreen distance */
    	height: 25px; /* height of child A... */
    	height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */
    }
     
    ul.sub a {
    	background: #9C3;
    	position: relative; /* in IE6/7, makes A visible outside of its margin box */
    	top: 10000px; /* (8) correct for futher pull-up */
    	margin-top: 10000px; /* (2) bring back onscreen */
    	height: 25px;
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.sub ul {
    	margin-top: -25px; /* pull up alongside the parent LI */
    }
     
    ul.sub ul li {
    	left: 300px; /* display the LIs to the side of the parent LI instead of in the same column */
    	top: auto; /* (5) cancel top on child LIs; they're already offscreen-top */
    	width: 298px; /* (6) IE6; see above */
    }
    .link-3 ul.sub ul li {
    	left: -300px; /* change submenu direction */
    }
     
     
    /***** LEVEL 4 and below *****/
     
    ul.sub ul ul li {
    	width: 297px; /* (6) IE6; see above */
    }
     
    /***** LEVEL 5 and below *****/
     
    ul.sub ul ul ul li {
    	width: 296px; /* (6) IE6; see above */
    }
    	</style>
    </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 link-1"> <a class="main" href="#">Main</a>
                <ul class="sub">
                    <li><a href="#1">test1</a></li>
                    <li class="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><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="has-sub"><a class="submain" href="#sub7">SUB test7</a>
                                <ul>
                                    <li><a href="#subtest1">sub sub test 1</a></li>
    		                        <li class="has-sub"><a class="submain" href="#sub7">SUB SUB test2</a>
    		                            <ul>
    		                                <li><a href="#subtest1">sub sub sub test 1</a></li>
    		                                <li><a href="#subtest2">sub sub sub test 2</a></li>
    		                                <li><a href="#subtest3">sub sub sub test 3</a></li>
    		                                <li><a href="#subtest4">sub sub sub test 4</a></li>
    		                                <li><a href="#subtest5">sub sub sub test 5</a></li>
    		                                <li><a href="#subtest6">sub sub sub test 6</a></li>
    		                            </ul>
    		                        </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 link-2"> <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 link-3"> <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="has-sub"><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="has-sub"><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>
    	<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p>
    </div>
     
    </body>
    </html>



    I now move on to Paul's version, in which the techniques used are different from Timo's in both sets of browsers.

    Each LI which contains a submenu works as a self-contained version of two-level float drop menu, and is "reset" from its surroundings. In standards-compliant browsers, this reset is done by absolutely-positioning the LIs with submenus, whilst in IE6 this reset is done by floating the LIs with submenus.

    It requires distinguishing each LI which immediately precedes an LI which contains a submenu, which also means that submenu-LI cannot be the first item in its menu.

    In its original form, the method for good browsers required the content preceding the menu to form a new stacking context (which is a rather onerous requirement). Moreover, keyboard "tabbing" failed for both sets of browsers.

    Here is a minimal, clean version of the technique for IE6, in which the IE6 styles are presented (using the underscore hack) alongside those for standards-compliant browsers, for ready comparison:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    	<style type="text/css">
    #navigation {
    	background: #ccc;
    	height: 25px;
    }
     
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0
    }
     
    #navigation a {
    	text-decoration: none;
    	color: #000;
    }
     
    ul.nav {
    	position: absolute;
    }
     
     
    /***** ALL LEVELS *****/
     
    ul.nav li {
    	zoom: 1;
    }
     
    ul.nav a {
    	background: #ddd;
    	display: block;
    	width: 150px;
    	margin-right: -149px;
    	height: 25px;
    }
    ul.nav a:hover,
    ul.nav a:focus,
    ul.nav a:active {
    	background: yellow;
    	margin-right: 0;
    }
     
    ul.nav a.main {
    	position: relative;
    	float: left;
    	margin-top: 9999px;
    }
     
     
    /***** LEVEL 1 *****/
     
    ul.nav li.link {
    	float: left;
    	width: 150px;
    	margin-top: -9999px;
    }
     
     
     
    /***** LEVEL 2 AND BELOW *****/
     
    ul.nav ul.sub {
    	background: green;
    	float: left;
    	margin-top: -25px;
    	padding-top: 25px;
    }
    ul.nav ul.sub:hover {
    	clear: both;
    }
     
    ul.nav ul.sub li.pre-sub {
    	padding-bottom: 25px;
    }
    ul.nav ul.sub li.has-sub {
    	position: absolute;
    	_position: static;
    	_float: left; /* remove gap underneath */
    	width: 150px;
    	_margin-right: -1px;
    	margin-top: -9999px;
    	height: 25px;
    }
     
    ul.nav ul.sub a {
    	_position: relative;
    }
    ul.nav ul.sub a.main {
    	background: green;
    	position: relative;
    	float: left;
    	margin-top: 9974px;
    }
    ul.nav ul.sub a.main:hover,
    ul.nav ul.sub a.main:active,
    ul.nav ul.sub a.main:focus {
    	_margin-right: 1px;
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.nav ul.sub ul.sub {
    	background: transparent; /* submenu ULs get progressively wider, so need to hide the background */
    	position: relative;
    	left: 150px;
    	padding-top: 0;
    	_margin-bottom: -999em;
    }
     
    ul.nav ul.sub ul.sub a:hover,
    ul.nav ul.sub ul.sub a:active,
    ul.nav ul.sub ul.sub a:focus {
    	_margin-right: 1px;
    }
    ul.nav ul.sub ul.sub a.main:hover,
    ul.nav ul.sub ul.sub a.main:active,
    ul.nav ul.sub ul.sub a.main:focus {
    	_margin-right: 2px;
    }
     
     
     
    ul.nav ul.sub ul.sub ul.sub a:hover,
    ul.nav ul.sub ul.sub ul.sub a:active,
    ul.nav ul.sub ul.sub ul.sub a:focus {
    	_margin-right: 2px;
    }
     
    .header {
    	position: relative;
    	z-index: 1;
    }
    	</style>
    </head>
    <body>
    <div class="outer">
    	<div class="header">
    		<h1>Drop down in IE6 with no javascript</h1>
    		<h2>Based on an idea and code by Timo Huovinen (aka <a href="http://www.sitepoint.com/forums/member.php?u=219847">YuriKolovsky</a>) &copy; 2009</h2>
    	</div>
    	<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 class="pre-sub"><a href="#">test2</a></li>
    					<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<li><a href="#">sub test1</a></li>
    							<li><a href="#">sub test2</a></li>
    							<li class="pre-sub"><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test3</a></li>
    							<li><a href="#">sub test4</a></li>
    							<li class="pre-sub"><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test5</a></li>
    							<li><a href="#">sub test6</a></li>
    						</ul>
    					</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 class="pre-sub"><a href="#">test2</a></li>
    					<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<li><a href="#">sub test1</a></li>
    							<li><a href="#">sub test2</a></li>
    							<li class="pre-sub"><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test3</a></li>
    							<li><a href="#">sub test4</a></li>
    							<li class="pre-sub"><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test5</a></li>
    							<li><a href="#">sub test6</a></li>
    						</ul>
    					</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>
    	<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p>
    </div>
    </body>
    </html>
    In the process of producing this cleaned version, the stacking context issue became fixed and the keyboard "tabbing" issue became fixed for IE6 (but still fails for good browsers).



    Finally, Paul's method can be simplified to remove the need to identify those LIs which precede LIs that contain submenus, and to ensure that keyboard "tabbing" works for all browsers.

    Here is a simplified version of the technique for all browsers, using the code needed for IE6 since also works in standards-compliant browsers:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                   "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title></title>
    	<style type="text/css">
    #navigation {
    	background: #ccc;
    	height: 25px;
    }
     
    ul {
    	list-style: none;
    	margin: 0;
    	padding: 0
    }
     
    #navigation a {
    	text-decoration: none;
    	color: #000;
    }
     
     
    /***** ALL LEVELS *****/
     
    ul.nav li {
    	zoom: 1;
    }
     
    ul.nav a {
    	position: relative;
    	display: block;
    	width: 150px;
    	margin-right: -148px; /* (6) 2px margin box instead of 1px one, due to (5) */
    	height: 25px;
    }
    ul.nav a:hover,
    ul.nav a:focus,
    ul.nav a:active {
    	margin-right: 0;
    }
     
    ul.nav a.main {
    	float: left; _display: inline;
    	margin-top: 10000px; /* (2) bring back onscreen */
    }
     
     
    /***** LEVEL 1 *****/
     
    ul.nav li.link {
    	float: left; _display: inline;
    	width: 150px;
    	margin-top: -10000px; /* (1) set offscreen distance */
    }
     
    ul.nav li.link a {
    	background: transparent; /* enables persistent background */
    }
    ul.nav li.link a:hover,
    ul.nav li.link a:focus,
    ul.nav li.link a:active {
    	background: yellow;
    }
     
     
    /***** LEVEL 2 AND BELOW *****/
     
    ul.nav ul.sub {
    	background: green; /* provides persistent background for parent A */
    	float: left; /* display:inline breaks IE6 here */
    	margin-top: -25px;
    	padding-top: 25px;
    	margin-bottom: -5000px; /* (4) avoid interaction with subsequent page elements */
    	                        /* any sufficiently large amount, but Opera has low upper limits */
    }
    ul.nav ul.sub:hover {
    	clear: both; /* Opera fix */
    }
     
    ul.nav ul.sub li {
    	clear: left; /* must clear any immediately preceding LI.has-sub */
    	margin-right: -1px; /* (5) reducing the margin box of the LI is not theoretically necessary, but works around a bug in IE6/7 in which hovering (only) the first item of the parent menu causes all child submenus to appear */
    }
    ul.nav ul.sub li.has-sub {
    	float: left;
    	margin-top: -10000px; /* (1) set offscreen distance */
    	height: 25px; /* height of child A... */
    	height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */
    }
     
    ul.nav ul.sub a {
    	background: #ddd;
    }
    ul.nav ul.sub a:hover,
    ul.nav ul.sub a:focus,
    ul.nav ul.sub a:active {
    	background: yellow;
    	margin-right: 1px; /* (7) increasingly large margin-boxes, due to (5) */
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.nav ul.sub ul.sub {
    	background: transparent; /* submenu ULs get progressively wider, so need to hide the background */
    	position: relative;
    	left: 150px;
    	padding-top: 0;
    }
     
    ul.nav ul.sub ul.sub a:hover,
    ul.nav ul.sub ul.sub a:active,
    ul.nav ul.sub ul.sub a:focus {
    	margin-right: 2px; /* (7) increasingly large margin-boxes, due to (5) */
    }
     
     
    /***** LEVEL 4 and below *****/
     
    ul.nav ul.sub ul.sub ul.sub a:hover,
    ul.nav ul.sub ul.sub ul.sub a:active,
    ul.nav ul.sub ul.sub ul.sub a:focus {
    	margin-right: 3px; /* (7) increasingly large margin-boxes, due to (5) */
    }
    	</style>
    </head>
    <body>
    <div class="outer">
    	<div class="header">
    		<p>Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background1">background 2</a></p>
    	</div>
    	<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 class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<li><a href="#">sub test1</a></li>
    							<li><a href="#">sub test2</a></li>
    							<li><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test3</a></li>
    							<li><a href="#">sub test4</a></li>
    							<li><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test5</a></li>
    							<li><a href="#">sub test6</a></li>
    						</ul>
    					</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 class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<li><a href="#">sub test1</a></li>
    							<li><a href="#">sub test2</a></li>
    							<li><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test3</a></li>
    							<li><a href="#">sub test4</a></li>
    							<li><a href="#">test2</a></li>
    							<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    								<ul class="sub">
    									<li><a href="#">sub test1</a></li>
    									<li><a href="#">sub test2</a></li>
    									<li><a href="#">sub test3</a></li>
    									<li><a href="#">sub test4</a></li>
    								</ul>
    							</li>
    							<li><a href="#">sub test5</a></li>
    							<li><a href="#">sub test6</a></li>
    						</ul>
    					</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>
    	<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.  Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p>
    </div>
    </body>
    </html>

    I have annotated in some detail (in steps labelled 1 to 7) the precise reason for each main rule needed.

    The simplified version above turns out to also be a simplified version of the simplified version of Timo's method! :-D (The key difference is the way in which the nasty IE6 bug in step 5 is fixed.) So this method is about as concise as it can be. It is also possible to apply the rules for LIs which contain submenus to /all/ LIs, to avoid needing to distinguish such LIs.

    The only unsatisfactory thing is that while Opera can "tab" through the menus correctly, if there are other hyperlinks in the subsequent content which are overlain by the drop-down menus, this browser leaves the menu and starts tabbing these other hyperlinks instead. This issue affects all the techniques which I've analysed in this quiz. Unfortunately, Opera's tabbing support is rather flaky; probably this particular problem can be fixed using tabindex.


    Of course, these multi-level techniques can be adapted easily for menus whose first level is vertical rather than horizontal.

  23. #173
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Code CSS:
    a, a:hover, a:active, a:focus {}
    fixed occasional ie6 keyboard tabbing bug that happens even with normal lists (thanks to Paul!)
    Interesting bug and solution! Does anyone have a test case when I can see this bug in action?

  24. #174
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    nice work simplifying the dropdown's! I especially like the last one!

    may i ask your full name and a link to some of your personal website so that i can put your simplified version on my blog? (and give credit for the simplification)

  25. #175
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Anton P
    Interesting bug and solution! Does anyone have a test case when I can see this bug in action?
    1. just use the same code in post 169 without the fix.
    2. then open it in IE6
    3. then click on the gray area on the right (on the #navigation div, where there are no links)
    4. then start tabbing through the links with your keyboard. (be sure to tab at least 5 times)


    repeat 3 and 4 until the bug becomes visible.
    do not move mouse while tabbing.

    you can try clicking in different areas of the page, above the dropdown and in the div seem to trigger it the most, it is a IE6 specific bug, happens from time to time, and seems to be affected by the mouse position.

    the symptoms are that the links stop dropping down, any :active effect is simply ignored even though IE6 is tabbing through them.

    i have not found any documentation on the bug, Paul tracked it down and showed me how to fix it.


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
  •