www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: [RESOLVED] need help expanding the CSS

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    resolved [RESOLVED] need help expanding the CSS

    Hi All I have this CSS navigation using un-order tags with lists, but it only goes to 3 levels.

    level-1-menu
    level-2-sub-menu
    level-3-sub-link-menu

    if I add another sub-level menu on the third level down it displays when hovering over the second level.

    I would ask the guy who made it but the site is down :-(

    Code:
    /*-----------------------------------------------------------
      Pure CSS Drop-down Menu
      Last Updated: 12/31/2007 by Justin Spegele
      Author: Justin Spegele
              Spegele Design and Development
              http://www.spegele.com/
      This code is free to modify and use for any purpose, as
      long as proper credit is given to the original designer.
    ----------------------------------------------------------- */
    
    /* Overarching Menu
        -----------------------------------*/
        .cssnav {
            position:relative; 
            z-index:1000;
            font-size:12px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-weight:bold;
            text-align:center;
            height: 25px;
            overflow: visable;
            width: 100%;
            background:#467aa7;
            border: 1px solid #fff;
        }
        .cssnav ul {
            padding:0;
            margin:0;
            list-style-type:none;
        }
        .cssnav ul ul {
            width:149px;
            text-align:left;
    }
    /*	Main list 
        -----------------------------------*/
        .cssnav li {
            float:left;
            width:150px;		/* This controls the width of the topnav was 106 or 150 */
            position:relative;
            _top: 1px;			/* IE6 will read this only */
            background:none; 	/* Added to override style */
            padding:0px;		/* Added to override style */
        }
    /*	First Level
        -----------------------------------*/
        /* Links */
        .cssnav a, .cssnav a:visited {
            display:block;
            text-decoration:none; 
            color:#fefefe; 
            border-bottom: 1px solid #fff;
    		border-left: 1px solid #fff;	
            background:#467aa7; 
            line-height:25px;
        }
        /* Added to fix div span for IE6 */
        .cssnav li li a {		
        	border-bottom: 1px solid #fff;
        	border-top: 1px solid #fff;
        	_top: 0px;			/* IE6 will read this only */
    	}
        /* Links on hover */
        .cssnav a:hover, .cssnav ul ul a:hover{
            color:#fff; 
            background:#80b0da;
        }
        .cssnav :hover > a, .cssnav ul ul :hover > a {
            color:#fff;
            background:#80b0da;
        }
    /*	Second Level
        -----------------------------------*/
        /* Links */
        .cssnav ul ul a, .cssnav ul ul a:visited {
            background:#578bb8;
            line-height:1em; 
            padding:5px 10px; 
            width:128px;		
            border-width: 0px 2px 1px 0px;
        }
        /* Links on hover */
        .cssnav ul ul a:hover {
            background:#80b0da;
        }
        /* Visibility */
        .cssnav ul li:hover ul, .cssnav ul a:hover ul{
            visibility:visible; 
        }
    /*	Third Level
        -----------------------------------*/
        /* Links */
        .cssnav ul ul ul a, .cssnav ul ul ul a:visited {
            background:#578bb8;
        }
        /* Links on hover */
        .cssnav ul ul ul a:hover {
            background:#80b0da;
        }
        /* Positioning */
        .cssnav ul ul ul{
            left:150px; 
            top:-1px; 
        }
        .cssnav ul ul ul.left {
            left:-150px;
        }
        /* Visibility */
        .cssnav ul :hover ul ul{
            visibility:hidden;
        }
        .cssnav ul :hover ul :hover ul{
            visibility:visible;
        }
    /*	All Sub Levels 
        -----------------------------------*/
        /* Default visibility */
        .cssnav ul ul {
            visibility:hidden;
            position:absolute;
            top:26px;
            left:0; 
            border-top:1px solid #fff;
        }
    /*	IE Table 
        -----------------------------------*/
        .cssnav table {
            position:absolute;
            top:0;
            left:0;
            border-collapse:collapse;
        }

  2. #2
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Here is the HTML

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Demo Test Nav</title>
            <link rel="stylesheet" type="text/css" href="testnav.css" media="screen" />
        </head>
        <body>
            <div class="cssnav">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Pages
                            <!--[if IE 7]><!--></a>
                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li>
                                <a href="#" title="Page 1">Page 1</a>
                            </li>
                            <li>
                                <a href="#" title="Page 2">Page 2</a>
                            </li>
                            <li>
                                <a href="#" title="Page 3">Page 3</a>
                            </li>
                            <li>
                                <a href="#" title="Page 4">Page 4</a>
                            </li>
                            <li>
                                <a class="drop" href="#" title="Page5">Page 5
                                    <!--[if IE 7]><!--></a>
                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li>
                                        <a href="#" title="Sub Page 1">Sub Page 1</a>
                                    </li>
                                    <li>
                                        <a href="#" title="Sub Page 1">Sub Page 2</a>
                                    </li>
                                    <li>
                                        <a href="#" title="Sub Page 1">Sub Page 3</a>
                                    </li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li>
                        <a href="#">Links
                            <!--[if IE 7]><!--></a>
                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li>
                                <a href="#" title="Link 1">Link 1</a>
                            </li>
                            <li>
                                <a href="#" title="Link 2">Link 2</a>
                            </li>
                            <li>
                                <a href="#" title="Link 3">Link 3</a>
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li>
                        <a href="#">More Links
                            <!--[if IE 7]><!--></a>
                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li>
                                <a href="#" title="More Links 1">More Links 1</a>
                            </li>
                            <li>
                                <a class="drop" href="#" title="More Links 2">More Links 2
                                    <!--[if IE 7]><!--></a>
                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="left">
                                    <li>
                                        <a href="#" title="More Sub Links 1">More Sub Links 1</a>
                                    </li>
                                    <li>
                                        <a href="#" title="More Sub Links 2">More Sub Links 2</a>
                                    </li>
                                    <li>
                                        <a href="#" title="More Sub Links 3">More Sub Links 3</a>
                                    </li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li>
                                <a href="#" title="More Links 3">More Links 3</a>
                            </li>
                            <li>
                                <a href="#" title="More Links 4">More Links 4</a>
                            </li>
                            <li>
                                <a href="#" title="More Links 5">More Links 5</a>
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                </ul>
            </div>
        </body>
    </html>

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I would suggest you look at CSSplay, where the menus use the same table layout for IE
    http://www.cssplay.co.uk/menus/simple_vertical.html

  4. #4
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Thanks Fang,

    I have one other request, since I'm a newbi (Kinda) at CSS.

    I have converted the STU menu into the other menu (for more look and feel than anything), but how can I display the drop downs left instead of right? need a class for this.

    In the other menu bar CSS it had a display left option

    Code:
     .cssnav ul ul ul.left {
            left:-150px;
        }
    how can I implement this into STU's menu bar as well?

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    #pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
    
    * html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

  6. #6
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Thanks Fang,

    Still having issues with IE6

    Here is what I have

    Code:
    * html #pmenu li ul.left {visibility:hidden; display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
    IE7 and FF work great :-)

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Probably this, but I don't have IE6 to test it at the moment:
    Code:
    #pmenu li a:hover ul a:hover ul{ 
    visibility:visible; top:-11px; left:-150px;
    }

  8. #8
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    I would suggest Multi IE for testing websites.

    Works great for me :-)

    Hmm,

    I would like to also keep the right default display and add a new left display as well.

    Here is the code so far

    Code:
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/simple_vertical.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    
    /* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
    #menu_container {margin:25px 0 100px 15px; position:relative; height:25px; z-index:1000;}
    
    /* Get rid of the margin, padding and bullets in the unordered lists */
    #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
    
    /* Set up the link size, color and borders */
    #pmenu a, #pmenu a:visited {display:block;width:150px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #fff; border-width:1px 0 1px 1px;}
    
    /* Set up the sub level borders */
    #pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
    #pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}
    
    /* Set up the list items */
    #pmenu li {float:left; background:#467aa7;}
    
    /* For Non-IE browsers and IE7 */
    #pmenu li:hover {position:relative;}
    /* Make the hovered list color persist */
    #pmenu li:hover > a {background:#80b0da; color:#fff;}
    /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
    #pmenu li ul {display:none;}
    /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
    #pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
    
    /* Adding display left */
    #pmenu li:hover > ul.left {display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
    /* End Add */
    
    /* Position the first sub level beneath the top level liinks */
    #pmenu > li:hover > ul {left:-30px; top:16px;}
    
    /* get rid of the table */
    #pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
    
    /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
    * html #pmenu li a:hover {position:relative; background:#80b0da; color:#fff;}
    
    /* For accessibility of the top level menu when tabbing */
    #pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}
    
    /* Set up the pointers for the sub level indication */
    #pmenu li.fly {background:#467aa7 url(http://www.cssplay.co.uk/menus/fly.gif) no-repeat right center;}
    #pmenu li.drop {background:#467aa7 url(http://www.cssplay.co.uk/menus/drop.gif) no-repeat right center;}
    
    
    /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
    
    /* change the drop down levels from display:none; to visibility:hidden; */
    * html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
    
    /* Adding Diaplay left */
    * html #pmenu li ul.left {visibility:hidden; display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
    /* end add */
    
    /* keep the third level+ hidden when you hover on first level link */
    #pmenu li a:hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level+ hidden when you hover on second level link */
    #pmenu li a:hover ul a:hover ul ul{
    visibility:hidden;
    }
    /* keep the fifth level hidden when you hover on third level link */
    #pmenu li a:hover ul a:hover ul a:hover ul ul{
    visibility:hidden;
    }
    /* keep the sixth level hidden when you hover on fourth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
    visibility:hidden;
    }
    
    /* make the second level visible when hover on first level link and position it */
    #pmenu li a:hover ul {
    visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
    }
    
    /* make the third level visible when you hover over second level link and position it and all further levels */
    #pmenu li a:hover ul a:hover ul{ 
    visibility:visible; top:-11px; left:80px;
    }
    /* make the fourth level visible when you hover over third level link */
    #pmenu li a:hover ul a:hover ul a:hover ul { 
    visibility:visible;
    }
    /* make the fifth level visible when you hover over fourth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
    visibility:visible;
    }
    /* make the sixth level visible when you hover over fifth level link */
    #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
    visibility:visible;
    }
    /* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

  9. #9
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Ok I almost have it working but a few quarks.

    IN FF(pic) and IE7(pic) the work on the 3rd level down (the flyout menus), but in IE6(pic) it works on the sub level as I would like it to in all versions.

    So I want to know how to combine the looks (get the FF3 and IE6 to display correctly).

    CSS
    Code:
    /* ================================================================
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/simple_vertical.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
    =================================================================== */
    
    /* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */ #menu_container {margin:25px 0 100px 15px; position:relative; height:25px; z-index:1000;}
    
    /* Get rid of the margin, padding and bullets in the unordered lists */ #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
    
    /* Set up the link size, color and borders */ #pmenu a, #pmenu a:visited {display:block;width:150px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#fff; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #fff; border-width:1px 0 1px 1px;}
    
    /* Set up the sub level borders */
    #pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;} #pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}
    
    /* Set up the list items */
    #pmenu li {float:left; background:#467aa7;}
    
    /* For Non-IE browsers and IE7 */
    #pmenu li:hover {position:relative;}
    /* Make the hovered list color persist */ #pmenu li:hover > a {background:#80b0da; color:#fff;}
    /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #pmenu li ul {display:none;}
    /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
    
    /* Adding display left */
    #pmenu li:hover > ul.left {display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
    /* End Add */
    
    /* Position the first sub level beneath the top level liinks */ #pmenu > li:hover > ul {left:-30px; top:16px;}
    
    /* get rid of the table */
    #pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
    
    /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
    * html #pmenu li a:hover {position:relative; background:#80b0da; color:#fff;}
    
    /* For accessibility of the top level menu when tabbing */ #pmenu li a:active, #pmenu li a:focus {background:#dfd7ca; color:#c00;}
    
    /* Set up the pointers for the sub level indication */ #pmenu li.fly {background:#467aa7 url(http://www.cssplay.co.uk/menus/fly.gif) no-repeat right center;} #pmenu li.drop {background:#467aa7 url(http://www.cssplay.co.uk/menus/drop.gif) no-repeat right center;}
    
    
    /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */
    
    /* change the drop down levels from display:none; to visibility:hidden; */
    * html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
    
    /* Adding Diaplay left */
    #pmenu li a:hover ul.left a:hover ul{
    visibility:visible; top:-11px; left:-150px; }
    /* end add */
    
    /* keep the third level+ hidden when you hover on first level link */ #pmenu li a:hover ul ul{ visibility:hidden; }
    /* keep the fourth level+ hidden when you hover on second level link */ #pmenu li a:hover ul a:hover ul ul{ visibility:hidden; }
    /* keep the fifth level hidden when you hover on third level link */ #pmenu li a:hover ul a:hover ul a:hover ul ul{ visibility:hidden; }
    /* keep the sixth level hidden when you hover on fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul { visibility:hidden; }
    
    /* make the second level visible when hover on first level link and position it */ #pmenu li a:hover ul { visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px; }
    
    /* make the third level visible when you hover over second level link and position it and all further levels */ #pmenu li a:hover ul a:hover ul{ visibility:visible; top:-11px; left:80px; }
    /* make the fourth level visible when you hover over third level link */ #pmenu li a:hover ul a:hover ul a:hover ul { visibility:visible; }
    /* make the fifth level visible when you hover over fourth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; }
    /* make the sixth level visible when you hover over fifth level link */ #pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility:visible; }
    /* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */
    HTMl in the next post

  10. #10
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Demo Test Nav</title>
            <link rel="stylesheet" type="text/css" href="testnav.css" media="screen" />
        </head>
        <body>
            <div id="menu_container">
                <ul id="pmenu">
                    <li>
                        <a href="#nogo">Home</a>
                    </li>
                    <li>
                        <a href="#nogo">About us</a>
                    </li>
                    <li>
                        <a href="#nogo">Products
                            <!--[if IE 7]><!--></a>
                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li>
                                <a href="#nogo" class="enclose">Tripods</a>
                            </li>
                            <li>
                                <a href="#nogo">Films</a>
                            </li>
                            <li>
                                <a href="#nogo">Cameras
                                    <!--[if IE 7]><!--></a>
                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul class="left">
                                    <li>
                                        <a href="#nogo" class="enclose">Compact</a>
                                    </li>
                                    <li>
                                        <a href="#nogo">Digital
                                            <!--[if IE 7]><!--></a>
                                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                            <li>
                                                <a href="#nogo" class="enclose">Canon</a>
                                            </li>
                                            <li>
                                                <a href="#nogo">Nikon
                                                    <!--[if IE 7]><!--></a>
                                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                                <ul>
                                                    <li>
                                                        <a href="#nogo" class="enclose">Lenses</a>
                                                    </li>
                                                    
                                                    <li>
                                                        <a href="#nogo">Coolpix
                                                            <!--[if IE 7]><!--></a>
                                                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                                        <ul>
                                                            <li>
                                                                <a href="#nogo" class="enclose">Coolpix S10</a>
                                                            </li>
                                                            
                                                        </ul>
                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                                    </li>
                                                    <li>
                                                        <a href="#nogo">D200</a>
                                                    </li>
                                                    
                                                </ul>
                                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                            </li>
                                            <li>
                                                <a href="#nogo">Minolta</a>
                                            </li>
                                            
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </li>
                                    <li>
                                        <a href="#nogo">SLR</a>
                                    </li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li>
                                <a href="#nogo">Flash</a>
                            </li>
                            <li>
                                <a href="#nogo">Video</a>
                            </li>
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li>
                        <a href="#nogo">Products
                            <!--[if IE 7]><!--></a>
                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li>
                                <a href="#nogo" class="enclose">Tripods</a>
                            </li>
                            <li>
                                <a href="#nogo">Films</a>
                            </li>
                            <li>
                                <a href="#nogo">Cameras
                                    <!--[if IE 7]><!--></a>
                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                <ul>
                                    <li>
                                        <a href="#nogo" class="enclose">Compact</a>
                                    </li>
                                    <li>
                                        <a href="#nogo">Digital
                                            <!--[if IE 7]><!--></a>
                                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                        <ul>
                                            <li>
                                                <a href="#nogo" class="enclose">Canon</a>
                                            </li>
                                            <li>
                                                <a href="#nogo">Nikon
                                                    <!--[if IE 7]><!--></a>
                                                <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                                <ul>
                                                    <li>
                                                        <a href="#nogo" class="enclose">Lenses</a>
                                                    </li>
                                                    <li>
                                                        <a href="#nogo">Speedlight</a>
                                                    </li>
                                                    <li>
                                                        <a href="#nogo">Coolpix
                                                            <!--[if IE 7]><!--></a>
                                                        <!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                                                        <ul>
                                                            <li>
                                                                <a href="#nogo" class="enclose">Coolpix S10</a>
                                                            </li>
                                                            
                                                        </ul>
                                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                                    </li>
                                                    <li>
                                                        <a href="#nogo">D200</a>
                                                    </li>
                                                    
                                                </ul>
                                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                            </li>
                                            <li>
                                                <a href="#nogo">Minolta</a>
                                            </li>
                                            
                                        </ul>
                                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                                    </li>
                                    <li>
                                        <a href="#nogo">SLR</a>
                                    </li>
                                </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li>
                                <a href="#nogo">Flash</a>
                            </li>
                            
                        </ul>
                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li>
                        <a href="#nogo">FAQs</a>
                    </li>
                    
                </ul>
            </div>
        </body>
    </html>

  11. #11
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    Quote Originally Posted by Phill Pafford View Post
    Ok I almost have it working but a few quarks.
    OMG Have you got a second to think of your visitors? Left and right on the same menu? Stu has developed some flyout-menus up to five or perhaps more levels.
    Examples:
    http://www.cssplay.co.uk/menus/pro_variable3.html
    http://www.cssplay.co.uk/menus/skeleton3.html
    Please keep dealing with only one side flyout.

  12. #12
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Thanks Anna55 for your concerns but ths is an internal website and this is what they want.

    The reason for the left displaying menu is for the far right drop down menu, if it has multi levels that display right the screen shifts (adds more pixels to the right of the screen). This causes the user to scroll over to view the flyout menus (In some browsers). They just wanted to use the left menu on the last right menu to avoid this action. The pictures in the examples are just for testing the left CSS code NOT how the navigation will look.

    Thanks for your input, but anyway you or anyone else could help with my problem?

    Thanks in advance.

  13. #13
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Like IE6
    Code:
    /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ 
    #pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:-150px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
    
    /* Adding display left */
    #pmenu li:hover > ul.left {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}

  14. #14
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Thanks Fang,

    BUt for the NON-IE and IE7 I do need both directions, does this work for both left and right on all sub nav levels?

    Dp I need to add the left class for each sub level nav?

  15. #15
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Ok almost there, FF and IE7 are working correctly now it's just IE6 thats having the issue.

    I have added the class="left" tag to each sub <ul> element to correct the FF and IE7 issues.

    In IE6 still the same issues (see pic) and other thoughts on how to resolve this?

    BTW thats for all the effort on this, I would still be stuck if it weren't for you help. Much props :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles