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;
}
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?
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 */
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 */
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?
/* 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;}
At least 98% of internet users' DNA is identical to that of chimpanzees
[RESOLVED] need help expanding the CSS
Reply With Quote
Originally Posted by Phill Pafford
Bookmarks