Menu Tutor CSS<html><pre>
<center><b><font face="Verdana" color=yellow>Return to Menu Tutor </b><a href="/gallery/2011077"><b><font color=white>Click Here</a></font></b></center>
<font color=red><b>
*************** Please Read First **************</font><font color=white>
This menu will not work correctly with the Carbonite theme.
*** Update: might work in Carbonite theme now ***
Note: This is just a starting point, it will need to be
tweaked for width's, positions and colors. etc.
Some elements might not be used and some are
still unknown.
The navBar at the top of this page uses this code
with different color combinations so they can
easily be found below.
If you have the Webdeveloper extension for Firefox
you can play with the CSS and HTML settings and see
in real time how it effects the navBar above.
<a href="http://www.mozilla.com/en-US/firefox" target="_blank">Firefox webpage</a>
<a href="http://chrispederick.com/work/webdeveloper" target="_blank">Web Developer Extension webpage</a>
</font>
This code goes in your CSS.
<font face="Courier New" color="#ffffcc">
/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* Common Styling */
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; <font color=#ffccff>/* spacing around menu - top right bottom left */</font>
height: 20px; <font color=#ffccff>/* menu container (div .menu) */</font>
width: 616px; <font color=#ffccff>/* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */</font>
margin: 0 auto; <font color=#ffccff>/* this should center navbar, if not tweak with left's below */</font>
}
.menu ul {
padding: 10px 0px 10px 0px; <font color=#ffccff>/* this effects menu centering if too big */</font>
margin:0 auto; <font color=#ffccff>/* this maybe not needed? */</font>
list-style-type: none;
}
.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; <font color=#ffccff>/* WARNING: float right reverses menu */</font>
position:relative !important; /* ***** Carbonite fix ***** */
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; <font color=#ffccff>/* main buttons */</font>
color:<span style="background-color: white"><font color=black> black </font></span>; <font color=#ffccff>/* main buttons text non-hover*/</font>
text-decoration:none;
text-align: center; <font color=#ffccff>/* centers text in buttons */</font>
width: 100px; <font color=#ffccff>/* main box width */</font>
height: 20px; <font color=#ffccff>/* main box height */</font>
border: 1px solid <font color=red> red</font>; <font color=red>/* start your design with borders on, easier to position DD's & FO's */</font>
border-width: 1px 1px 1px 1px;
background:<font color=#00ff00> #00ff00</font>; <font color=#ffccff>/* main button color */</font>
padding-left: 0px;
line-height: 20px; <font color=#ffccff>/* positions text up/down in box */</font>
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; <font color=#ffccff>/* IE main button */</font>
}
.menu ul li ul {
display: none;}
<font color=#ffccff> /* +++++++++++++++++++++++++++ */</font>
<font color=#ffccff> /* Specific to Non-IE browsers */</font>
<font color=#ffccff> /* +++++++++++++++++++++++++++ */</font>
.menu ul li:hover a {
color:<font color=#33ccff> blue</font>; <font color=#ffccff>/* main when hover DD */</font>
background:<font color=white> white</font>; <font color=#ffccff>/* main when hover DD */</font>
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -4px; <font color=#ffccff>/* FF DD up down */</font>
margin-top: 17px; <font color=#ffccff>/* FF main mouse active vertical */</font>
left: 0px; <font color=#ffccff>/* FF DD right left */</font>
width: 104px; <font color=#ffccff>/* unknown */</font>
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background:<font color=yellow> yellow</font>; <font color=#ffccff>/* DD FO non-hover */</font>
color:<font color=#00ee00> green</font>; <font color=#ffccff>/* DD FO non-hover */</font>
height: auto;
line-height: 20px; <font color=#ffccff>/* DD FO box height */</font>
padding: 0px 0px;
width: 100px; <font color=#ffccff>/* DD FO box width */</font>
}
.menu ul li:hover ul li a:hover {
background:<font color=red> red</font>; <font color=#ffccff>/* DD FO hover */</font>
color:<font color=white> white</font>; <font color=#ffccff>/* DD FO hover */</font>
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; <font color=#ffccff>/* FF FO right left */</font>
top: -27px; <font color=#ffccff>/* FF FO up down */</font>
width: 146px; <font color=#ffccff>/* FF FO box width */</font>
}
<font color=#ffccff>/* +++++++++++++++++++++++++++ */</font>
<font color=#ffccff>/* Specific to IE browsers */</font>
<font color=#ffccff>/* +++++++++++++++++++++++++++ */</font>
.menu ul li a:hover {
/* text-decoration: none; */ <font color=#ffccff>/* might be needed */</font>
color:<font color=#33ccff> blue</font>; <font color=#ffccff>/* main hover */</font>
background:<font color= yellow>yellow</font>; <font color=#ffccff>/* main hover */</font>
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; <font color=#ffccff>/* DD container up down */</font>
background: none; <font color=#ffccff>/* gets rid of DD container */</font>
margin-top: 7px; <font color=#ffccff>/* DD container up down */</font>
left: 0px; <font color=#ffccff>/* DD right left */</font>
}
.menu ul li a:hover ul li a {
display: block;
background:<font color=white> white</font>; <font color=#ffccff>/* IE DD color non-hover */</font>
color:<font color=red> red</font>; <font color=#ffccff>/* IE DD color non-hover */</font>
height: auto;
line-height: 20px; <font color=#ffccff>/* IE DD FO box height */</font>
padding: 0px;
width: 145px; <font color=#ffccff>/* IE DD FO box */</font>
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}
.menu ul li a:hover ul li a:hover {
background:<font color=#33ccff> blue</font>; <font color=#ffccff>/* DD FO hover includes menu 6 */</font>
color:<font color=gold> gold</font>; <font color=#ffccff>/* DD FO hover includes menu 6 */</font>
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; <font color=#ffccff>/* FO up down */</font>
color: #000000; <font color=#ffccff>/* unknown */</font>
left: 147px; <font color=#ffccff>/* FO right left */</font>
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top: 30px;
t\op: 31px; <font color=#ffccff>/* IE gap between main bar and the dropdown items */</font>
}
<font color=#ffccff>/* style the table so that it takes no part in
the layout - required for IE to work */</font>
.menu table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 125px; <font color=#ffccff>/* unknown */</font>
w\idth: 104px; <font color=#ffccff>/* DD FF width */</font>
}
/*END EXTRA ADDS FOR IE*/
/* ADD TO HIDE EXTRA LEVELS */
/* make the <font color=white>2nd</font> level visible when
hover on <font color=white>1st</font> level list OR link */
.menu ul a:hover ul, <font color=#ffccff>/* IE */</font>
.menu ul:hover ul { <font color=#ffccff>/* FF */</font>
visibility:visible;
}
/* keep the <font color=white>3rd</font> level hidden when you
hover on <font color=white>1st</font> level list OR link */
.menu ul a:hover ul ul, <font color=#ffccff>/* IE */</font>
.menu ul:hover ul ul { <font color=#ffccff>/* FF */</font>
visibility:hidden;
}
/* keep the <font color=white>4th</font> level hidden when you
hover on <font color=white>2nd</font> level list OR link */
.menu ul li a:hover ul li a:hover ul ul, <font color=#ffccff>/* IE */</font>
.menu ul li:hover ul li:hover ul ul { <font color=#ffccff>/* FF */</font>
visibility:hidden;
}
/* make the <font color=white>3rd</font> level visible when you hover
over <font color=white>2nd</font> level list OR link */
.menu ul a:hover ul a:hover ul, <font color=#ffccff>/* IE */</font>
.menu ul:hover ul:hover ul { <font color=#ffccff>/* FF */</font>
visibility:visible;
}
/* make the <font color=white>4th</font> level visible when you
hover over <font color=white>3rd</font> level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, <font color=#ffccff>/* IE */</font>
.menu ul li:hover ul li:hover ul li:hover ul { <font color=#ffccff>/* FF */</font>
visibility:visible;
}
<font color=red> /* ==== END NAVBAR CODE ==== */ </font>
<font color=#33ffff>
/* ============ Advanced option =============== */
/* The following code allows the right most menu */
/* item dropdown flyouts to fly out to the left. */
/* Also need to assign the classes in the header code. */
/* <ul class="main6DD"> and <ul class="main6FO"> */
/* i.e <ul class="main6FO"> */
/* <li><a href="http ....... */
/* </ul> <!--[if ....... */
/* =================================================== */
/* FF right most menu box dropdown/flyout */
.menu ul li:hover ul.<font color=red>main6DD</font> li a {
display:block;
background:<font color=gray> gray</font>; <font color=#ffccff>/* DD FO non-hover FF */</font>
color:<font color=white> white</font>; <font color=#ffccff>/* DD FO non-hover FF */</font>
height: auto;
line-height: 20px; <font color=#ffccff>/* DD FO box height */</font>
padding: 0px 0px;
width: 100px; } <font color=#ffccff>/* DD box width */</font>
/* IE right most menu box dropdown/flyout */
.menu ul li a:hover ul.<font color=red>main6DD</font> li a,
.menu ul li a:hover ul.<font color=red>main6FO</font> li a, {
width: 100px; <font color=#ffccff>/* IE DD FO box */</font>
background:<font color=gray> gray</font>; <font color=#ffccff>/* DD FO non-hover IE */</font>
color:<font color=white> white</font>; } <font color=#ffccff>/* DD FO non-hover IE */</font>
/* right most menu box dropdown */
.menu ul li:hover ul.<font color=red>main6DD</font> {
left: 0px;} <font color=#ffccff>/* FF DD move right left */</font>
.menu ul li a:hover ul.<font color=red>main6DD</font> {
left: 0px;} <font color=#ffccff>/* IE DD move right left */</font>
/* right most menu box flyout */
.menu ul li:hover ul li:hover ul.<font color=red>main6FO</font> {
left: -102px;} <font color=#ffccff>/* FF FO move right left */</font>
.menu ul li a:hover ul li a:hover ul.<font color=red>main6FO</font> {
left: -102px;} <font color=#ffccff>/* IE FO move right left */</font>
.menu ul li:hover ul.<font color=red>main6DD</font> li a:hover {
background:<font color=red> red</font>; <font color=#ffccff>/* DD FO hover FF */</font>
color:<font color=white> white</font>;} <font color=#ffccff>/* DD FO hover FF */</font>
</font>
<font color=red> /* ==== END NAVBAR OPTIONAL CSS CODE ==== */ </font>
</b>
<font color=#ff99ff><b>
Key: Do not add to CSS
---------------------------------------
Abreviations: | DD = Dropdown
used above | FO = Flyout
in comments | IE = Internet Explorer
| FF = Firefox
</font></b>
<center><b><font color=yellow>Return to Menu Tutor </b><a href="/gallery/2011077"><b><font color=white>Click Here</a></font></b></center>
</pre></font>
</html>http://allen-steve.smugmug.com/Other/Menu-Tutor-CSS/spacer/127829993_XhUgg-Ti.gifhttp://allen-steve.smugmug.com/gallery/2078255_Pu5Dc/2007-02-05T06:48:47ZCopyright 2009, the copyright holder of each photograph. Some portions copyright SmugMug. All rights reserved.SmugMugSteve Allen (allen-steve)'s photo<p><a href="http://allen-steve.smugmug.com">Steve Allen (allen-steve)</a> </p><p><a href="http://allen-steve.smugmug.com/Other/Menu-Tutor-CSS/2078255_Pu5Dc#127829993_XhUgg" title="Steve Allen (allen-steve)'s photo"><img src="http://allen-steve.smugmug.com/Other/Menu-Tutor-CSS/spacer/127829993_XhUgg-Th.gif" width="1" height="1" alt="Steve Allen (allen-steve)'s photo" title="Steve Allen (allen-steve)'s photo" style="border: 1px solid #000000;" /></a></p>2009-02-14T12:09:38ZSteve Allen (allen-steve)http://allen-steve.smugmug.comhttp://allen-steve.smugmug.com/Other/Menu-Tutor-CSS/spacer/127829993_XhUgg-Th.gif