SitePoint Sponsor

User Tag List

Page 8 of 11 FirstFirst ... 4567891011 LastLast
Results 176 to 200 of 268
  1. #176
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's a percentage width single level version. The submenus still need to be the same size as the parent though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Dropdown</title>
    <style type="text/css">
    /* Based on an idea by Timo Huovinen (aka YuriKolovsky) &copy; 2009*/
    .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;
        margin:auto;
        background:#ebebeb;
        width:80&#37;;
    }
    .nav {
        position:absolute;
        margin:auto;
        width:100%;
    }
    .nav .link {
        width:25%;
        margin-top:-32767px;
        float:left;
    }
    * html .nav .link{width:24.9%}
    * + html .nav .link{width:24.9%}
    
    .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 -1% 0 0;
        width:100%;
    }
    .nav .sub {
        float:left;
        background:#F90;
        padding-top:25px;
        margin-top:-25px;
        width:100%;
        margin-right:-1%
    }
    .nav a.main {
        width:100%;
        height:25px;
        line-height:25px;
        margin-top:32767px;
        margin-right:-100%;
        float:left;
    }
    * html .nav a.main{margin-right:-99%;}
    * + html .nav a.main{margin-right:-99%;}
    
    .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 1px 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;
    }
    .nav {
     top:-20000px;/*firefox div transparency fix*/
    }
    .nav a.main, .nav .sub { position:relative;
     top:20000px;/*firefox div transparency fix*/
    }
    
    </style>
    </head>
    <body>
    <div id="navigation">
        <ul class="nav">
            <li class="link"> <a tabindex="1" class="main" href="#m1">Main</a>
                <ul class="sub">
                    <li><a tabindex="2" href="#1">test1</a></li>
                    <li><a tabindex="3" href="#2">test2</a></li>
                    <li><a tabindex="4" href="#3">test3</a></li>
                    <li><a tabindex="5" href="#4">test4</a></li>
                </ul>
            </li>
            <li class="link"> <a tabindex="6" class="main" href="#m2">Main</a>
                <ul class="sub">
                    <li><a tabindex="7" href="#1">test1</a></li>
                    <li><a tabindex="8" href="#2">test2</a></li>
                    <li><a tabindex="9" href="#3">test3</a></li>
                    <li><a tabindex="10" href="#4">test4</a></li>
                </ul>
            </li>
            <li class="link"> <a tabindex="11" class="main" href="#m3">Main</a>
                <ul class="sub">
                    <li><a tabindex="12" href="#1">test1</a></li>
                    <li><a tabindex="13" href="#2">test2</a></li>
                    <li><a tabindex="14" href="#3">test3</a></li>
                    <li><a tabindex="15" href="#4">test4</a></li>
                </ul>
            </li>
            <li class="link"> <a tabindex="16" class="main" href="#m3">Main</a>
                <ul class="sub">
                    <li><a tabindex="17" href="#1">test1</a></li>
                    <li><a tabindex="18" href="#2">test2</a></li>
                    <li><a tabindex="19" href="#3">test3</a></li>
                    <li><a tabindex="20" href="#4">test4</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>

  2. #177
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    excellent, very useful, because percentage widths are always easy to use, all you have to do is change the width of the container.

  3. #178
    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
    Interesting bug and solution! Does anyone have a test case when I can see this bug in action?
    just use the same code in post 169 without the fix.
    I can't reproduce this bug on my machine (native IE6 on Windows 2000). I wonder if it only affects XP?

  4. #179
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anton P View Post
    I can't reproduce this bug on my machine (native IE6 on Windows 2000). I wonder if it only affects XP?
    it is very possible, I'm not sure though, it could recreate it 1 in 3 tries on my XP with IE tester IE6, its possible that the bug was in this program and not in IE6, as I've seen it have bug's in the past.

  5. #180
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,590
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul, when is next quiz?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #181
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul, when is next quiz?
    I'm still recovering from this one

    I'll see if I can get something together this weekend for next week.

  7. #182

  8. #183
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I just wanted to add that a person has discovered a bug in Anton P's Simplified version of the multilevel dropdown.

    when you add more than 1 sublinks to the main dropdown link then the successive sublinks remain permanently open in IE5-7.

    i fixed ie5-6 by adding the conditional comments from my version
    i was unable to find a fix for ie7 after 2 hours of trying.

    mainly because i don't fully understand his version.

  9. #184
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I just wanted to add that a person has discovered a bug in Anton P's Simplified version of the multilevel dropdown.

    when you add more than 1 sublinks to the main dropdown link then the successive sublinks remain permanently open in IE5-7.

    i fixed ie5-6 by adding the conditional comments from my version
    i was unable to find a fix for ie7 after 2 hours of trying.

    mainly because i don't fully understand his version.
    Hi Timo,

    Do you have an example of the code as I just copied from Anton's post what I thought was the one you were talking about and it already has several sub menus in place and seems to work fine.
    Code:
    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 */
    }
    Code:
    <!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 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="#">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>

  10. #185
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I just wanted to add that a person has discovered a bug in Anton P's Simplified version of the multilevel dropdown.

    when you add more than 1 sublinks to the main dropdown link then the successive sublinks remain permanently open in IE5-7.
    Thanks for the report. The problem appears to be when two consecutive submenu items both have a subsubmenu. This problem doesn't affect my "simplified version of Timo's method for all browsers", but it does affect my "simplified version of Paul's method for all browsers". The two methods differ in the way in which they fix the nasty IE bug (described in my comment highlighted by Paul just now) and so perhaps the fix needs enhancing in the simplification of Paul's method.

    [Note that this issue doesn't affect Paul's original method, so it's something which has arisen in the (rather aggressive) simplification.]

    For now, I recommend using the "simplification of Timo's method for all browsers" until I find time to examine if and how the other simplification can be fixed.

  11. #186
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    "simplification of Timo's method for all browsers"

    on which post was that?

  12. #187
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    "simplification of Timo's method for all browsers"

    on which post was that?
    The third code-block of Post 172

  13. #188
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thanks Anton, i was just unsure on which one you meant before.

  14. #189
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that bug report turned out to be a blessing in disguise (and a good reminder of how important it is, when doing IE6 research, to test a sufficient number of mark-up variants). The bug in my "simplified version of Paul's method for all browsers" has been fixed and the CSS is even more concise than before!

    The problem arose from applying clear to all submenu LIs, and it only manifests itself when there are multiple consecutive LIs with submenus. The clear cannot be removed completely or else another bug appears when an LI with submenu is the first item of its parent UL, so we apply it only to those LIs without a submenu.

    Happily, fixing this bug also means that the nasty bug mentioned in my previous post no longer occurs! This allows us to remove all the width and margin-right tweaking, which means that third- and lower-level menus no longer need any extra CSS at all, other than positioning them to the right place next to their parent menu item

    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: -149px;
    	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 for A:hover background colours */
    }
     
    ul.nav ul.sub li {
    	clear: left; /* must clear any immediately preceding LI.has-sub */
    }
    ul.nav ul.sub li.has-sub {
    	float: left; _display: inline;
    	_clear: none; /* (5) don't clear any immediately preceding LI.has-sub in IE6 since clearing is not necessary anyway in this browser,
                           * and doing so on an LI.has-sub causes breakage when there are at least two consecutive submenu items both with subsubmenus;
                           * however, we keep the clear on other LIs to work around another bug in which, whenever the first item of a submenu is an
                           * li.has-sub with clear:none and the second item is a normal LI, a one-item-high vertical gap appears before normal LI
                           * unless it has clear: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;
    }
     
     
    /***** LEVEL 3 and below *****/
     
    ul.nav ul.sub ul.sub {
    	position: relative;
    	left: 150px;
    	padding-top: 0;
    }
    ul.nav li.last-child ul.sub ul.sub {
    	left: auto;
    	right: 150px; /* optionally reverse the submenu direction for the rightmost main menu item */
    }
     
    	</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 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="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 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="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="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 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="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="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 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="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="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="#">sub test1</a></li>
    					<li><a href="#">sub 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="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 class="link last-child"> <a class="main" href="#">Main</a>
    				<ul class="sub">
    					<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<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 test1</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 test2</a></li>
    						</ul>
    					</li>
    					<li><a href="#">test1</a></li>
    					<li class="has-sub"> <a class="main" href="#">Sub menu &raquo;</a>
    						<ul class="sub">
    							<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 test1</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 test2</a></li>
    						</ul>
    					</li>
    					<li><a href="#">test2</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>

    Unfortunately there's also some bad news. IE7 also suffered from a bug when there were multiple consecutive LIs with submenus, and alas the IE6 fix does nothing to help with that. In this bug, hovering or focusing any child of the first LI in a sequence of consecutive LIs with submenus causes all the submenus of all the other LIs in the sequence to display at once! Whilst there was an easy workaround for hover, I could not find a fix for focus (actually, IE6 and IE7 respond to :active, not :focus). I was able to mitigate this slightly so that the submenus of the first LI will pop up over the top of the mass-displayed submenus of the following LIs, which means that the menu is still fully navigable using the keyboard.

    Here is the IE7 almost-fix:

    Code CSS:
    ul.nav ul.sub li.has-sub:hover ~ li ul {
    	display: none; /* (6) prevents breakage in IE7 when there are at least two consecutive submenu items both with subsubmenus */
    }
    ul.nav ul.sub li.has-sub:hover ul {
    	display: block;
    }
    ul.nav ul.sub li.has-sub ul {
    	z-index: 2; /* (6) see above; alas the fix won't work with :active, but at least we can ensure that menu is visible with keyboard navigation */
    }
    ul.nav ul.sub li.has-sub ~ li ul {
    	z-index: 1; /* (6) see above */
    }

    And finally here is some JavaScript which makes the menu work fully using focus in IE7 when JS is enabled:

    Code JavaScript:
    window.onload = function() {
    	/*@cc_on
    	@if (@_jscript_version == 5.7)
    	if (typeof document.body.style.maxHeight != "undefined") { //IE7
    		//Define getElementsByClassName for IE<8
    		function walkTheDOM (node, func) {
    			func(node);
    			node = node.firstChild;
    			while (node) {
    				walkTheDOM(node, func);
    				node = node.nextSibling;
    			}
    		}
    		function getElementsByClassName(el, className) {
    			var results = [];
    			walkTheDOM(el, function (node) {
    			               	var a, c = node.className, i;
    			               	if (c) {
    			               		a = c.split(' ');
    			               		for (i=0; i<a.length; i++) {
    			               			if (a[i] === className) {
    			               				results.push(node);
    			               				break;
    			               			}
    			               		}
    			               	}
    			               });
    			return results;
    		}
     
    		 // For an element el which is the A child of an li.has-sub, this function finds all following sibling LIs of
    		 // that li.has-sub and sets their child UL, if it exists, to display:none while setting the child UL of li.has-sub
    		 // to display:block
    		var fixSubmenuDisplay = function(el) {
    			var siblings = el.parentNode.parentNode.childNodes;
    			var elParentFound = false;
    			var siblingChildren;
    			for (var j=0; j<siblings.length; ++j) {
    				if (!elParentFound && siblings[j].nodeType == 1 && siblings[j].tagName == "LI" && siblings[j] == el.parentNode) {
    					elParentFound = true;
    				}
    				if (elParentFound) {
    					siblingChildren = siblings[j].childNodes;
    					for (var k=0; k<siblingChildren.length; ++k) {
    						if (siblingChildren[k].nodeType == 1 && siblingChildren[k].tagName == "UL") {
    							if (siblings[j] == el.parentNode) {
    								siblingChildren[k].style.display = "block";
    							} else {
    								siblingChildren[k].style.display = "none";
    							}
    						}
    					}
    				}
    			}
    		}
     
    		// For an A child of an li.has-sub, sets the onfocus and onmouseover event to call the fixSubmenuDisplay function
    		var nav = document.getElementById("navigation");
    		var hasSubs = getElementsByClassName(nav, "has-sub");
    		var children;
    		var aChild;
    		for (var i=0; i<hasSubs.length; ++i) {
    			children = hasSubs[i].childNodes;
    			for (var j=0; j<children.length; ++j) {
    				if (children[j].nodeType == 1 && children[j].tagName == "A") {
    					aChild = children[j];
    					break;
    				}
    			}
    			aChild.onfocus = function() {
    				fixSubmenuDisplay(this);
    			}
    			aChild.onmouseover = function() {
    				fixSubmenuDisplay(this);
    			}
    		}
    	}
    	@end
    	@*/
    }

    (The JS is pretty long-winded but it's not doing much at all, other than providing a getElementsByClassName method and traversing the DOM looking for the right elements. It just boils down to setting the mass-displayed ULs to display:none when hovering or focusing a descendant A of the first LI in the sequence, while setting that LI's own UL to display:block. This work could be condensed to just a couple of lines using a JS framework such as JQuery.)

    All in all, I'm not too concerned by the IE7 problems (which were not present in Paul's original version) since there are also problems in IE8 with this technique (both in my simplification and in Paul's original version).

    I would use this technique if you only wish to cater for IE6, whereas I would use the "simplification of Timo's method for all browsers" (the third code-block of Post 172) if you wish to give all browsers the same code. The latter might be desirable, since no other menu method has such good support for keyboard navigation AFAIK.

    There really aren't many differences between the simplifications of Timo's method and Paul's method; it's strange that one is so robust and the other so troublesome! I wonder if it's possible to merge them somehow, to get the simplified CSS without the cross-browser issues....

  15. #190
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good work Anton

    I haven't had a chance to look at this since the bug was reported but I'll certainly make some time this week and check out the code and your fixes and simplifications.

    Thanks for taking the time to go through it in detail

  16. #191
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    WOW! very impressive anton, and "I" know what it takes to do something like that!!!

    im planning to go over the full code and simplify it to the fullest, to try and get it to work equally even in IE7.
    im still wondering what is causing the bug in IE7 in your version...

  17. #192
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! But the fix itself was trivial. The surprising and fortunate thing was that it was sufficient to avoid the other nasty bug, enabling us to remove the dirty CSS.

    I wouldn't like to guess what's causing the IE7 problem in my simplification of Paul's method. From experience, I would say that it's one of those bugs that defies any kind of rationalization and that it depends on a fairly complex and specific set of mark-up/CSS conditions. I very much doubt that there's an "intelligent" solution, beyond throwing various CSS tweaks (clear or not, float or not, position or not, negative margin or not....) and the main actors and seeing if anything works. (I didn't get lucky when I tried that briefly myself.)

    (IE7 is by far my most hated browser, much more so than IE6. IE7 has many fewer bugs than IE6, but the ones it has tend to be viciously difficult to fix. Whilst playing around with the IE7 almost-fix which I posted above, I came across the following two selector bugs:

    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>IE7 general sibling selector (~) bug 1</title>
    	<style type="text/css">
     
    /* The ruleset below (empty or otherwise) is required for the bug! */
    .holder b {
    }
     
    .holder ~ span b {
    	background: red;
    }
     
    	</style>
    </head>
    <body>
     
    <div class="holder">
    	<i>
    		<!-- HTML COMMENT OR ANY ELEMENT -->
    		<span>
    			<span><b>My background shouldnt be red!</b></span>
    		</span>
    	</i>
    </div>
     
    </body>
    </html>

    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>IE7 general sibling selector (~) bug 2</title>
    	<style type="text/css">
     
    /* The ruleset below (empty or otherwise) is required for the bug! */
    .holder ~ div p {
    }
     
    .holder ~ div div p {
    	background: red;
    }
     
    .holder ~ div div p span {
    	color: green;
    }
     
    	</style>
    </head>
    <body>
     
    <!-- HTML COMMENT OR ANY ELEMENT -->
    <div class="holder">
    	<div>
    		<p>
    			<span>My parents background shouldnt be red; but if it is then I should be green!</span>
    		</p>
    	</div>
    </div>
     
    </body>
    </html>

    Bonkers! In the first one the general sibling selector (~) acts like a descendant selector, and in the second it acts like an "equality selector" (all the while requiring the existence of certain selector sequences and completely unrelated elements in specific places in the document). A Trident classic

    Didn't know IE7 supported some CSS3 selectors? Nor did I, or rather I did years ago but I'd forgotten, locked as we are in a world of IE6 selector limitations. I was pleasantly surprised to rediscover them!)

  18. #193
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes we documented the comment bug in the reference but it seems from your examples that problems run deeper. (The adjacent selector has a similar comment bug also.)

  19. #194
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    paul, your version on post 176 is broken.
    just remove the opera fix and look, that only works in older IE's.

    plus i have worked on the dropdowns and merged anton's and mine, to use the best of both!
    and here is the best multilevel menu so far.

    edit:
    sitepoint go advanced thing seems to be broken.

  20. #195
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    New and Improved - Multilevel Dropdown

    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 Multilevel Dropdown</title>
    <style type="text/css">
    /***reset default styling***/
    .nav,
    .nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav a {
    	text-decoration:none;
    }
    /*CUSTOMIZATION*/
    /*i have split the code to have the width/height/color separate from the rest of the code*/
    /*COLORS*/
    /*here are some default colors, funky colors used for distinctive visibility*/
    /*i hope that you can handle colors customization on your own :p*/
    .nav {
        background:yellow;
    }
    .nav a {
        background:#9C3;
    	color:#000;
    }
    .nav ul {
        background:red;/*top link persistent background color*/
    }
    .nav a.main {
        background:transparent;/*so that the top link persistent background works*/
    }
    .nav ul a.main {
        background:yellow;
    }
    .nav a.main:hover {
        background:orange;
    }
    .nav .sub ul a {
        background:#CC6;
    }
    .nav .sub ul a.main {
        background:yellow;
    }
    .nav .sub ul a.main:hover {
        background:orange;
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        background:orange;
    }
    .nav .sub li a:hover,
    .nav .sub li a:focus,
    .nav .sub li a:active{
        background:#C93;
    }
    .nav .sub .sub ul a {
        background:#099;
    	color:#fff;
    }
    .nav .sub .sub ul a:hover,
    .nav .sub .sub ul a:focus,
    .nav .sub .sub ul a:active{
        background:#06F;
    }
    .nav .sub .sub .sub ul a {
        background:#036;
    }
    .nav .sub .sub .sub ul a:hover,
    .nav .sub .sub .sub ul a:focus,
    .nav .sub .sub .sub ul a:active{
        background:#006;
    }
    .nav .colored li a {
    	background:purple;
    }
     
     
     
    /*HEIGHT*/
    .nav {
    	height:25px;/*you could remove this and clear the float differently, but to me this makes the most sense*/
    }
    .nav a {
    	padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
    }
    .nav a.main {
        height:25px;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
    	line-height:25px;/*not really necessary, but in this specific case it vertically centers the main link text*/
    	overflow:hidden;/*making it more bulletproof*/
    	padding:0;/*remove the padding that was applied above*/
    }
    .nav ul {
    	padding-top:25px;/*persistent background trick*/
    	margin-top:-25px;/*persistent background trick*/
    }
    .nav ul ul li {
        top:-25px;/*this is the sole reason why the main links must have a fixed height*/
    }
     
     
    /*WIDTH (!IMPORTANT)*/
    /*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
    /*set the link width here*/
    .nav .link, 
    .nav a {
        width:150px;/*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
    	max-width:150px;/*same as width*/
    }
    /*set the sublink left shift width here (same as width)*/
    .nav ul ul li {
    /*move the sublinks to the side, so they dont overlap*/
        left:150px;/*same as width*/
    }
    .nav li.reversed li {/*reverse the direction of sublinks for the last dropdown*/
    	left:auto;
        right:150px;/*same as width*/
    }
    /*add the negative value of "width - 1px" here (because css can't do math)*/
    .nav a {
    /*makes the links very thin, so that the sublinks can hide inside the main link*/
    	margin-right:-149px;/*make this width - 1px*/
    }
     
     
    /*Dropper Dropdown*/
    /*supports up to 4 sub-levels in IE5-7, more can be added*/
    /*modern browsers already support any amount of sublevels*/
    /*made by Timo Huovinen*/
     
    .nav li {
        float:left;/*fixes several IE related bugs, and allows for clearing*/
    }
    .nav ul {
        float:left;/*necessary for float drop*/
    }
    .nav ul li {
        clear:left;/*must clear the floated list item inside sublist*/
    }
    .nav a {
        position:relative;/*needs to have a position, to be above the rest*/
        display:inline-block;/*could be block, but i trust this more*/
    }
    .nav ul li li {
        position:relative;/*so that it can be moved using top: and left:*/
    }
    .nav a.main {
        float:left;/*necessary for float drop*/
    	margin-top:10000px;/*bring the links back into view*/
    }
    .nav .link,
    .nav .sub {
    	margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/
    }
    .nav ul {
    	margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/
    }
    /*the main trick, removes the negative right-margin and causes float drop*/
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:0;
    }
     
    /*OPERA fix*/
    .nav ul:hover,
    .nav ul ul:hover {
        clear:left;/*fix for opera sublinks flickering on :hover*/
    }
    /*firefox "opera fix" inconsistency fix, and hides anything that might be unwanted*/
    .nav .sub {
    	visibility:hidden;
    }
    .nav .sub a {
    	visibility:visible;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    /*IE5-6 + 7 bug fixes*/
     
    /*sublevel support, add more to support more sublevels*/
    .nav .sub {
    /*add the negative value of "100% - 1%" here*/
        width:99%;
    }
    .nav .sub .sub {
    /*add the negative value of "100% - 2%" here*/
        width:98%;
    }
    .nav .sub .sub .sub {
    /*add the negative value of "100% - 3%" here*/
        width:97%;
    }
     
     
    /*IE5-6 overlay problems fix, i would have used visibility:hidden, but that bugs ie5-6 out*/
    /*and it does not hurt ie7 in any way*/
    .nav ul ul {
    	position:relative;
    	left:-400px;
    }
    /*each sublevel needs +400px size, if you add more sublevels you have to add more of these, or find another way to fix ie5-6 overlay problem*/
    /*sublevel support, add more to support more sublevels*/
    .nav ul ul a {
    	left:400px;
    }
    .nav ul ul ul a {
    	left:800px;
    }
    .nav ul ul ul ul a {
    	left:1200px;
    }
    .nav ul ul ul ul ul a {
    	left:1600px;
    }
    /*ie does not support visibility properly*/
    .nav .sub {
        visibility:visible;
    }
    /*background for sub levels no longer needed*/
    .nav ul ul {
        background:transparent;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
    it seems that this indexes the links together as one?*/
    a, a:hover, a:active, a:focus {}
    </style>
    <![endif]-->
    <!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better-->
    </head>
    <body>
    <a href="#background1">background 1</a>
    <ul class="nav">
    <li class="link">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li class="sub"><a class="main" href="#3">main 1 </a>
                        <ul class="colored">
                            <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 class="sub"><a class="main" href="#sub4">SUB main 1 </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>
                        </ul>
            </li>
            <li class="sub"><a class="main" href="#4">main 2 </a>
                        <ul>
                        	<li class="sub"><a class="main" href="#sub4">SUB main 2 </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="#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">long text link showing what happens</a></li>
            <li><a href="#8">test8</a></li>
            <li class="sub"><a class="main" 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="sub"><a class="main" 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 class="sub"><a class="main" href="#sub7">Ultra 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>
                                            <li class="sub"><a class="main" href="#sub7">Ultra SUB test8 </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="#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="sub"><a class="main" href="#sub7">SUB test7 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                        </ul>
            </li>
        </ul>
    </li>
    <li class="link">
        <a class="main" href="#">Main</a>
        <ul>
            <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 reversed">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li class="sub"><a class="main" 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="sub"><a class="main" 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 class="sub"><a class="main" 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>
                            <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>
    <a href="#background2">background 2</a>
    </body>
    </html>

  21. #196
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Timo,

    Good work Timo

    I think I was using the opera fix for other browsers anyway so as to keep it simple for ie. Just leave it in the code.

    Regarding your new one it looks very good though I notice the IE fixes are creeping up again but I guess that's unaviodable

    You may be interested in a small problem with the menu from a recent thread. When the user clicks to go to another page and then navigates back with the back button then the flyout menus are displayed on the page with the link that was pressed still in focus. We needed to add javascript to remove the focus when the user navigated away from the site.

  22. #197
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Regarding your new one it looks very good though I notice the IE fixes are creeping up again but I guess that's unaviodable
    anton's version is broken in IE7, which has the same bug in IE5-6 if you tweak some properties to be block instead of inline.
    it is a ie bug which causes the list items to open up if you hover over the first link, it has to do with IE mistakenly still counting the float even though it has a huge negative margin, and so hovering over the first link, causes its floating container to expand, thus pushing all of the sublinks to the side (that took ages to find out).
    so there are no versions that work in ie without the ie fix.

    You may be interested in a small problem with the menu from a recent thread. When the user clicks to go to another page and then navigates back with the back button then the flyout menus are displayed on the page with the link that was pressed still in focus. We needed to add javascript to remove the focus when the user navigated away from the site.
    that is a browser issue and not the menu issue, anything that is highlighted has the sublinks open, and the browsers just remember what was last highlighted when pressing the back button (this also shows what was last clicked to the user, which is not such a bad thing)

    but it is different from the standard css dropdowns, but they dont support keyboards...

    so the only fix i can suggest you is to remove the :active, and :focus, and live with a normal dropdown without keyboard support, as it still work in all browsers without javascript.

    or javascript if you really want to keep the keyboard support...
    you could also add javascript to delay the closing of the sublinks which is also preferable.

  23. #198
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Timo,

    Great work with the merged version! (Just one thing to note: have you tested it when an LI with submenu is the first item of its parent UL? That situation caused a problem in my previous simplification in certain circumstances.)

    Could you give us a summary of what is new in this new version? For example, I note that you've switched to percentage 'width's and increasing 'left' in IE. Looks like the "Opera fix" is causing problems in Firefox now, too. Damn Opera!

    Quote Originally Posted by YuriKolovsky View Post
    anton's version is broken in IE7, which has the same bug in IE5-6 if you tweak some properties to be block instead of inline.
    Are you talking about the focus problem in IE7 when there are multiple consecutive LIs with submenus (described in my recent post) or are you talking about a different problem?

    As for changing the display type from block to inline for some elements, could you be more specific? I'm not sure why you'd want to use inline formatting, and I wouldn't recommend it since all the important boxes in this type of menu are naturally block-level things. What does inline formatting offer us here?

    Quote Originally Posted by YuriKolovsky View Post
    it is a ie bug which causes the list items to open up if you hover over the first link, it has to do with IE mistakenly still counting the float even though it has a huge negative margin, and so hovering over the first link, causes its floating container to expand, thus pushing all of the sublinks to the side (that took ages to find out).
    so there are no versions that work in ie without the ie fix.
    Interesting, but I'm not sure I understand you! What does crazy IE think when you hover over the first link?

    Quote Originally Posted by Paul O'B View Post
    You may be interested in a small problem with the menu from a recent thread. When the user clicks to go to another page and then navigates back with the back button then the flyout menus are displayed on the page with the link that was pressed still in focus. We needed to add javascript to remove the focus when the user navigated away from the site.
    Quote Originally Posted by YuriKolovsky View Post
    that is a browser issue and not the menu issue, anything that is highlighted has the sublinks open, and the browsers just remember what was last highlighted when pressing the back button (this also shows what was last clicked to the user, which is not such a bad thing)
    I haven't tried, but perhaps this is fixable by undoing the :focus drop-down effect on :active? (However, whilst this might work for good browsers, it wouldn't in IE<=7 since that browser is already using :active to do the job of :focus.)

  24. #199
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    (Just one thing to note: have you tested it when an LI with submenu is the first item of its parent UL? That situation caused a problem in my previous simplification in certain circumstances.)
    no bugs there last time i checked, and i specifically did check (feel free to stress test it some more :P )

    Are you talking about the focus problem in IE7 when there are multiple consecutive LIs with submenus (described in my recent post) or are you talking about a different problem?
    yes, if you remove all your fixes, hover also breaks.

    As for changing the display type from block to inline for some elements, could you be more specific? I'm not sure why you'd want to use inline formatting, and I wouldn't recommend it since all the important boxes in this type of menu are naturally block-level things. What does inline formatting offer us here?
    IE5-7 do not support display:block
    haha im not joking here, it breaks like mad in so many different occasions (several newline/whitespace/random bugs) when using it with lists, while display:inline for the list item, and display:block for the link in the list item with the same width as the list item seems to be the most stable method.

    Interesting, but I'm not sure I understand you! What does crazy IE think when you hover over the first link?
    i drew it on a piece of paper, now imagine the ul (that contains the sublinks)
    now we know its floated, and we know its dropping below the main link
    and what happens if a float hits another float below it?
    this makes the floated ul's below it shift to the side, or something along the lines of that (not sure what crazy stuff happens then)
    i think the other ul's start to shrink, causing float drop at all levels, so my manual percentage width's stop that shrinking.

    I haven't tried, but perhaps this is fixable by undoing the :focus drop-down effect on :active? (However, whilst this might work for good browsers, it wouldn't in IE<=7 since that browser is already using :active to do the job of :focus.)
    only fix i know, is to remove :focus and :active completely... (not really a fix, i know)



    ok to summarize what has changed.
    first i took my old version and swapped out the top, margin-top and all that top trickery with your (anton p) much improved method, and removed position:relative from some sublinks so that now firefox does not block the links above the navigation! yay!
    after that i cleaned up all of my code so that minmal markup and css is used, where i also split the color/width/height away from the rest of the code.

    in all of the versions so far the area below the sublinks caused the dropdown to maintain itself open, which was not supposed to happen, but also not a bad thing, but i decided to hide away all of the content except the links with ul { visibility:hidden } ul a {visibility:visible}, just to make sure no unnecessary content slips out, and this caused IE5-6 to break, supposedly it does not support visibility too good either, and because IE5-6 were the only ones who actually blocked the links the ul, they were the only ones who needed a way to hide the .sub but not the li, so you can see it under
    /*overlay problem fix*/

    then after hours of experimenting (about 2 days straight) i came up with a some select code that magically worked in all browsers (at first i tried to customize your version to work, then i failed, and switched back to mine, and tweaked that, and keps jumping back and forth, until my customized version merged with yours started to work)(in your version IE6 relied on explicit display:inline tricks to make it work in IE5-6, removing them made IE5-6 act just like IE7 with the sublinks opening all at once, also IE5 does not work in your version, you need to remove the zoom:1 and add position:relative instead, and IE7 has the ever persistent :focus bug (and hover bug if you remove the fix), and IE8 also bugged out not float dropping some sublinks on some occasions, the random tabbing disabling bug was also present, i mean i do my best to stress test things).
    IE8 had weird shifting instead of float drop, so after hours of trying random things i found out that max-width fixed ie8.
    the old fix with IE7 still remained, where i used min-width for ie7, and width for ie5-6 to set the subs width manually, so that it does not go crazy, then i found out that i could merge the IE7 fixes and the IE5-6 fixes together, so i did, now IE7 and IE5-6 both use width's (and no longer use min-width) to set the sublinks width manually, then a week ago i was fiddling with pauls &#37; width version, which DID NOT WORK damnit! xD
    you can imagine me working on it for hours, thinking that it works, where it does not, there i found out that IE uses the top parents width for its calculation (ive seen this before, from a css quiz) basically it will traverse all the parents until it finds some width, and it will use that, its a IE bug, that i abused on the IE fix for the dropdown, at least now you dont need to manually customize it for a specific width.
    then i also made all the links use the margin-right trick, so now there is even less class specific code.


    i hope you understood some of the gibberish above, and if you did not, the heres a recap:

    uses less css rules to do more
    fixed IE8 (and IE5-7 sort of)
    minimized amount of things that need to be customized
    minimized css and html (mainly reduced classes and removed the top level #navigation div)
    minimized the amount of conditional comments
    improved readability and comments
    removed the "level" dependency completely (firefox supports any amount of levels, IE5-6 need just some more width tweak's added, pretty easy copy/paste)
    fixed slight bugs with overly large amounts of sublevels
    overall more stable now
    added your last-child class anton, but i called it "reversed" instead.

    so now its the best i could come up with, and i even made a em (instead of px) version.
    less css rules, easier to understand.

    i mean, now its a beast that i can safely be proud of.

  25. #200
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed info; I'll work through it as soon as I can!

    Just one quick point:

    anton's version is broken in IE7
    Are you talking about the focus problem in IE7 when there are multiple consecutive LIs with submenus (described in my recent post) or are you talking about a different problem?
    yes, if you remove all your fixes, hover also breaks.
    Of course! The fixes are required for IE7: the CSS rules make hover work in IE7 while the JavaScript helps to improves focus.


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
  •