Return to Snippet

Revision: 12705
at March 25, 2009 13:05 by conspirator


Initial Code
/* MenuBegin:(SampleMenu) */
ul.(SampleMenu) { margin: 0; border: 0; padding: 0; list-style: none; line-height: 22px; }
ul.(SampleMenu) li { margin: 0; border: 0; padding: 0; float: left;/*Gecko*/ display: inline; list-style: none; position: relative; }
ul.(SampleMenu) ul { margin: 0; border: 0; padding: 0; list-style: none; width: 140px; display: none; position: absolute; top: 22px; left: 0; }
ul.(SampleMenu) ul li { position: relative; display: block !important; display: inline;/*For IE*/ float: left;/*IE 7*/ position: relative; }

/* 1st Level */
ul.(SampleMenu) a { color: #000; background: #ffc; text-decoration: none; width: 120px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; border-right: 1px solid #ddd; text-align: left; padding: 0px 10px; font: normal 11px/22px Verdana, Geneva, sans-serif; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; height: auto !important; height: 1%; /*For IE*/ }
ul.(SampleMenu) a:hover,
ul.(SampleMenu) li:hover a,
ul.(SampleMenu) a:hover,
ul.(SampleMenu) li.over a { color: #fff; background: #777; text-decoration: none; }
ul.(SampleMenu) a.first { border-left: 1px solid #aaa; }
ul.(SampleMenu) a.last { border-right: 1px solid #aaa; }

/* 2nd Level */
ul.(SampleMenu) li:hover li a,
ul.(SampleMenu) li.over li a { color: #000; background: #ffc; text-decoration: none; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-top: 1px solid #ddd; border-bottom:0; float: none; }
ul.(SampleMenu) li:hover li a:hover,
ul.(SampleMenu) li:hover li:hover a,
ul.(SampleMenu) li.over li a:hover,
ul.(SampleMenu) li.over li.over a { color: #fff; background: #777; text-decoration: none; }
ul.(SampleMenu) li:hover li a.first,ul.(SampleMenu) li.over li a.first { border-top: 1px solid #aaa; }
ul.(SampleMenu) li:hover li a.last,ul.(SampleMenu) li.over li a.last { border-bottom: 1px solid #aaa; }

/* 3rd Level */
ul.(SampleMenu) li:hover li:hover li a,
ul.(SampleMenu) li.over li.over li a { color: #000; background: #ffc; text-decoration: none; border-left: 1px solid #aaa; border-right: 1px solid #aaa; border-top: 1px solid #ddd; border-bottom:0; }
ul.(SampleMenu) li:hover li:hover li a:hover,
ul.(SampleMenu) li:hover li:hover li:hover a,
ul.(SampleMenu) li.over li.over li a:hover,
ul.(SampleMenu) li.over li.over li.over a { color: #fff; background: #777; text-decoration: none; }
ul.(SampleMenu) li:hover li:hover li a.first,ul.(SampleMenu) li.over li.over li a.first { border-top: 1px solid #aaa; }
ul.(SampleMenu) li:hover li:hover li a.last,ul.(SampleMenu) li.over li.over li a.last { border-bottom: 1px solid #aaa; }

ul.(SampleMenu) ul ul { display: none; position: absolute; top: 0; left: 141px; }

/* Do Not Move - Must Come Before display:block for Gecko */
ul.(SampleMenu) li:hover ul ul,ul.(SampleMenu) li.over ul ul { display: none; }
ul.(SampleMenu) li:hover ul,ul.(SampleMenu) ul li:hover ul,ul.(SampleMenu) li.over ul,ul.(SampleMenu) ul li.over ul { display: block; }
ul.(SampleMenu) .nav ul :after /*IE 7*/ { clear: both; display: block; font: 1px/0px serif; content: ; height: 0; visibility: hidden; }
/* MenuEnd:(SampleMenu) */

Initial URL


Initial Description


Initial Title
Freedom's Nav CSS

Initial Tags
css, textmate, navigation

Initial Language
Other