/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] need help expanding the CSS

Copy linkTweet thisAlerts:
Jan 15.2009

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;
}
[/CODE]

to post a comment
CSS

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 15.2009 — Here is the HTML

[code=html]
<!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>

[/code]
Copy linkTweet thisAlerts:
@FangJan 16.2009 — 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
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 22.2009 — 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;
}
[/CODE]

how can I implement this into STU's menu bar as well?
Copy linkTweet thisAlerts:
@FangJan 22.2009 — #pmenu li:hover &gt; ul {display:block; position:absolute; top:-11px; left:[COLOR="Blue"]-150px[/COLOR]; 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:[COLOR="Blue"]-150px[/COLOR]; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 22.2009 — 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);}
[/CODE]

IE7 and FF work great :-)
Copy linkTweet thisAlerts:
@FangJan 22.2009 — Probably this, but I don't have IE6 to test it at the moment:#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:[COLOR="Blue"]-150px[/COLOR];
}
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 23.2009 — 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; left:-31px; top: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 */
[/CODE]
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 23.2009 — 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; left:-31px; top: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 */
[/CODE]

HTMl in the next post
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 23.2009 — [code=html]<!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>
[/code]
Copy linkTweet thisAlerts:
@anna55Jan 23.2009 — Ok I almost have it working but a few quarks.[/QUOTE]

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.
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 26.2009 — 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.
Copy linkTweet thisAlerts:
@FangJan 26.2009 — Like IE6/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover &gt; 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 &gt; ul.left {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 26.2009 — 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?
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 27.2009 — 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 :-)
Copy linkTweet thisAlerts:
@Phill_PaffordauthorJan 27.2009 — Here is the 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 NOTE: MUST ADD LEFT TAG TO EACH SUB LEVEL NAV <ul> */ #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; left:-31px; top: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 */
[/CODE]
×

Success!

Help @Phill_Pafford spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...