/* ----- top level category list ----- */
ul.dropdown {
position: relative;
margin: 0;
padding: 0;
}
ul.dropdown a:hover {
color: #000;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li {
font-weight: bold;
float: left;
zoom: 1;
background: #ccc;
vertical-align: middle;
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown li a {
display: block;
padding: 4px 10px;
border-right: 1px solid #333;
color: #222;
text-decoration: none;
}
/* Reiterated here because IE6 won't recognize like all the other browsers. */
.ie6 ul.dropdown li a {
color: #222;
text-decoration: none;
}
ul.dropdown li:last-child a {
border-right: none;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background: #f3d673;
color: #000;
position: relative;
}
ul.dropdown li.hover a {
color: #000;
}
ul.dropdown code {
padding: 0 0 0 10px;
}
/* ----- second level category list ----- */
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
}
ul.dropdown ul li {
font-weight: normal;
background: #f6f6f6;
color: #000;
border-bottom: 1px solid #ccc;
float: none;
}
.ie6 ul.dropdown ul li,
.ie7 ul.dropdown ul li {
display: inline;
width: 100%;
}
ul.dropdown ul li a {
border-right: none;
display: block;
}
/* IE 6 & 7 Needs Inline Block */
.ie6 ul.dropdown ul li a,
.ie7 ul.dropdown ul li a {
display: inline-block;
}
ul.dropdown .sub-menu code {
padding: 0;
display: inline;
position: absolute;
right: 10px;
}
/* ----- third level category list ----- */
ul.dropdown ul ul {
left: 100%;
top: 0;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* ----- use to convert the menu to a vertical layout for the category tree ----- */
ul.flyout {
width: 200px;
}
ul.flyout li {
float: none;
}
ul.flyout ul {
top: 0;
left: 100%;
}