Drop Down Menu for Custom Template

Tags: drop down menu custom template css codes html drop down

This guide will help you to activate drop down menus on custom templates.

First of all you have to replace these codes (in HTML box)

Find this {include file="../static_javascript_includes.tpl"}

and replace with {include file="../static_javascript_includes.withmenu.tpl"}

Find this {include file="../menu.tpl"} or {include file="../menu_igloo.tpl"}

and replace with {include file="../menu.dropdown.tpl"}

There is an exceptional issue for INVENTION template. You have to replace this code (in HTML box)

{if not $no_menu}

{foreach item=tab from=$tabs}

{if $tab.module neq ''}

{if $module eq $tab.module}

{if $tab.rename == ""}

{translate}{$tab.title}{/translate}

{else}

{$tab.rename}

{/if}

{else}

{if $tab.rename == ""}

{translate}{$tab.title}{/translate}

{else}

{$tab.rename}

{/if}

{else}

{translate}{$tab.title}{/translate}

{/if}

{/foreach}

{/if}

with {include file="../menu.dropdown.tpl"}

Here is the CSS codes. Just find your template name and paste these codes to CSS Box

3quarters

/* Drop down menu */

#nav li.unselected a {
background: none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #606b83;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0px 9px 0px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

backpacker

/* Drop down menu */

#nav li.unselected a {
background:#e0d9c5 url(http://grou.ps/templates/tpl/backpacker/images/but_bg.jpg);
color: #47473d;
font-size:14px;
text-decoration: none;
padding: 7px 14px;
font-weight: bold;
display: block;
margin: 0 4px 4px 0;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

coffee

/* Drop down menu */

#nav li.unselected a {
background: none;
color: #574215;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
text-align:left;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #c6ab78;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: left;
width: 150px;
margin: 0;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 4px 0 12px;
border-bottom: 1px solid #fff;
width: 134px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #70634e;
color: #fff;
}

/* End Drop down menu */

--------------------------------------------------------------------------

dark - dark_neo

/* Drop down menu */

#nav li.unselected a {
padding:0 15px;
display:block;
color:#0784bd;
text-decoration: none;
background: #272727;
margin-right: 1px;
line-height:31px;
font-size: 12px;
font-weight: bold;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #272727;
border-top: 1px solid #272727;
border-right: 1px solid #272727;
background: #444444;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #272727;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

dreamy

/* Drop down menu */

#nav li.unselected a {
background:none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0px 9px 0px 15px;
height: 35px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-image: none;
background-color: #242424;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

fruitopia

/* Drop down menu */

#nav li.unselected a {
background:none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
color: #e75e02;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

gothic_fire

/* Drop down menu */

#nav li.unselected a {
background-image:none;
background-color:#450102;
padding:0 15px;
display:block;
color:#ffffff;
font-weight: bold;
line-height:31px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #450102;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0px 9px 0px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

greenlush

/* Drop down menu */

#nav li.unselected a {
padding:0 15px;
display:block;
color:#2a3704;
text-decoration: none;
background: #fff url(http://grou.ps/templates/tpl/greenlush/images/menuoff.png);
line-height:29px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #41500c;
}

/* End Drop down menu */

--------------------------------------------------------------------------

grunge

/* Drop down menu */

#nav li.unselected a {
padding: 10px 13px 20px 15px;
color: #9c9473;
text-decoration: none;
line-height: 30px;
display: block;
float: left;
font-size: 13px;
font-weight: bold;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
background: #212121;
width: 150px;
}

#menu ul.level2 {
margin-top: -10px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: left;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
border-bottom: 1px solid #767368;
width: 126px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #e7bd5a;
background-color:#363434;
}

/* End Drop down menu */

--------------------------------------------------------------------------

igloo series

/* Drop down menu */

#nav li.unselected a {
color: #000;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
text-align: center;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 10px;
text-align: left;
margin-left:-2px;
width: 100px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
}

/* End Drop down menu */

--------------------------------------------------------------------------

invention

/* Drop down menu */

#nav li.unselected a {
padding:0 15px;
display:block;
color:#fff;
text-decoration: none;
background: #F4A80A;
margin-left: 1px;
line-height:29px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #9bbe00;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

ist_daylight

/* Drop down menu */

#nav li.selected a {
color:#fff;
background:#043c50;
font-weight:bold;
overflow:hidden;
text-decoration:none;
white-space:nowrap;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
background: #f4f7fc;
width: 150px;
}
#menu ul.level2 {
margin-top:2px;
}
#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #043c50;
color: #fff;
}

/* End Drop down menu */

--------------------------------------------------------------------------

istanbul

/* Drop down menu */

#nav li.unselected a {
border-radius:6px 6px 0 0;
-moz-border-radius:6px 6px 0 0;
-webkit-border-top-right-radius:6px;
-webkit-border-top-left-radius:6px;
background:#b5b48c;
color: #fff;
font-size:14px;
text-decoration: none;
padding: 7px 16px;
font-weight: bold;
display: block;
margin-right: 2px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
background-image: none;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
border-radius:0;
-moz-border-radius:0;
-webkit-border-top-right-radius:0;
-webkit-border-top-left-radius:0;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
background-image: none;
color: #FFFFFF;
border-radius:0;
-moz-border-radius:0;
-webkit-border-top-right-radius:0;
-webkit-border-top-left-radius:0;
}

/* End Drop down menu */

--------------------------------------------------------------------------

lazy

/* Drop down menu */

#nav li.unselected a {
color: #fff;
border: none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: left;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 4px 9px 4px 15px;
background-image: none;
background-color: #333;
font-size: 14px;
border-bottom: 1px solid #fff;
width: 123px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #333;
background-image: none;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

minimalistic series

/* Drop down menu */

ul#nav li.unselected a {
background: #ccc;
color: #666;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
text-align: center;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 10px;
text-align: left;
margin-left:-2px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
font-weight: normal;
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

mixcity

/* Drop down menu */

#nav li.unselected a {
color: #7de5ea;
border: none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
font-weight: normal;
background: transparent;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px dotted #222;
border-top: 1px dotted #222;
border-right: 1px dotted #222;
background: #000;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px dotted #222;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 4px 0 12px;
border-bottom: 1px dotted #222;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
font-weight: normal;
background-color: #222;
background-image: none;
color: #fff;
}

/* End Drop down menu */

--------------------------------------------------------------------------

music

/* Drop down menu */

#nav li.unselected a {
background: url(http://grou.ps/templates/tpl/music/images/navbg2.gif) repeat-x;
color: #fff;
font-size:12px;
text-decoration: none;
padding: 8px 15px;
font-weight: bold;
display: block;
margin: 6px 5px 5px 0;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
margin: 0px;
padding: 0px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: -7px -4px 0 0;
padding: 0px;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 8px 9px 8px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #390000;
border-left: #990000 1px solid;
border-right: #990000 1px solid;
}

/* End Drop down menu */

--------------------------------------------------------------------------

music_blue

/* Drop down menu */

#nav li.unselected a {
background: url(http://grou.ps/templates/tpl/music_blue/images/navbg2.gif) repeat-x;
color: #16796e;
font-size:12px;
text-decoration: none;
padding: 8px 15px;
font-weight: bold;
display: block;
margin: 6px 5px 0 0;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
margin: 0px;
padding: 0px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: -7px -4px 0 0;
padding: 0px;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 8px 9px 8px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

nautica

/* Drop down menu */

#nav li.unselected a {
background: none;
border-top: 7px solid #41637D;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #486983;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

nautica05

/* Drop down menu */

#nav li.unselected a {
padding:7px 15px;
display:block;
color:#ffffff;
font-weight: bold;
border-top: 5px solid #000;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #000;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 8px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #222;
color: #fff;
}

/* End Drop down menu */

--------------------------------------------------------------------------

nonzero

/* Drop down menu */

#nav li.unselected a {
display:block;
background:#fff url(http://grou.ps/templates/tpl/nonzero/images_red/n4.gif) repeat-x;
border:solid 1px #fff;
color:#616161;
font-size:12px;
text-transform:lowercase;
text-decoration:none;
line-height:30px;
padding:0 15px;
font-weight: bold;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #e1e1e1;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 14px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #767368;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

nux series

/* Drop down menu */

#nav li.unselected a {
border-right: 1px solid #dedbd1;
color: #333;
text-decoration: none;
padding: 9px 16px;
display: block;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
font-weight: normal;
background: transparent;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
font-weight: normal;
background-color: #767368;
background-image: none;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

pool

/* Drop down menu */

#nav li.unselected a {
padding:0 15px;
display:block;
color:#1e4b62;
text-decoration: none;
background: #fff;
margin-right: 2px;
line-height:31px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f6f5f3;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
border-bottom: 1px solid #f5f5f5;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #8ebafd;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

reflections

/* Drop down menu */

#nav li.unselected a {
background:url("http://grou.ps/templates/tpl/reflections/images/tableft8.gif") no-repeat left top;
}
#nav li.unselected a span {
background:url("http://grou.ps/templates/tpl/reflections/images/tabright8.gif") no-repeat right top;
color: #fff;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #dddddd;
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background: #f2f2f2;
width: 100px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: left;
margin: 0;
padding: 0;
width: 100px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
width: 100px
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

simplex series

/* Drop down menu */

#nav li.unselected a {
padding: 0 13px 20px 13px;
color: #555;
text-decoration: none;
line-height: 30px;
display: block;
float: left;
background: url(http://grou.ps/templates/tpl/simplex_blue/images/menu_seperator.png) no-repeat;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
font-weight: normal;
background: transparent;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f4f7fc;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: left;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 4px 0 12px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
font-weight: normal;
background-color: #badcff;
background-image: none;
color: #555;
width: 134px;
}

/* End Drop down menu */

--------------------------------------------------------------------------

summer

/* Drop down menu */

#nav li.unselected a {
background: url(http://grou.ps/templates/tpl/summer/images/navigation.jpg) no-repeat;
color: #FFF;
float: left;
font: bold 1.2em serif;
height: 31px;
letter-spacing: 1px;
line-height: 31px;
text-align: center;
text-decoration: none;
padding: 0 15px;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
width: 150px;
text-align:left;
}

#menu ul.level2 li, #menu ul.level3 li {
float: left;
width: 150px;
text-align:left;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0 9px 0 15px;
border-bottom: 1px solid #fff;
background-color:#4b6633;
background-image:none;
text-align:left;
color:#FFFFFF;
width:125px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
color: #FFFFFF;
background-color:#4d7386;
background-image:none;
}

/* End Drop down menu */

--------------------------------------------------------------------------

tam

/* Drop down menu */

#nav li.unselected a span
{
color:#666;
font-weight:700;
font-style:normal;
text-decoration:none;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #f4f7fc;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0;
margin: 0;
border-bottom: 1px solid #fff;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #badcff;
color: #555;
}

/* End Drop down menu */

--------------------------------------------------------------------------

transparentia

#nav li.unselected a {
color:#000;
}

/* Drop down menu */

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
width: 150px;
}
#menu ul.level2 {
margin-top: -7px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 0;
text-align: left;
background-color: #eaeaea;
border-bottom: #FFFFFF solid 1px;
}

#menu ul.level2 li a:hover, #menu ul.level3 li a:hover {
background-color: #e0e0e0;
color: #660000;
}

/* End Drop down menu */

--------------------------------------------------------------------------

trendy

/* Drop down menu */

#nav li.unselected a {
padding: 13px 15px 11px 15px;
color: #000;
text-decoration: none;
display: block;
float: left;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90;
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #e2e45c;
width: 150px;
}

#menu ul.level2 li, #menu ul.level3 li {
float: left;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
border-bottom: 1px solid #fff;
width: 126px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #097691;
color: #FFFFFF;
}

/* End Drop down menu */

--------------------------------------------------------------------------

zenlike - zenlike_simple

/* Drop down menu */

#nav li.unselected a {

background: #777c00;

}

#menu ul {

display: block;

margin: 0;

padding: 0;

z-index: 90;

}

#menu ul li {

float: left;

}

#menu ul li a {

float: left;

display: block;

text-decoration: none;

}

/* Commented Backslash Hack hides rule from IE5-Mac */

#menu ul li a {

float: none;

}

/* End IE5-Mac hack */

#menu ul.level2, #menu ul.level3 {

position: absolute;

top: 0px;

left: 0px;

visibility: hidden;

border-left: 1px solid #fff;

border-top: 1px solid #fff;

border-right: 1px solid #fff;

background: #606b83;

width: 150px;

}

#menu ul.level2 li, #menu ul.level3 li {

float: left;

margin: 0;

padding: 0;

width: 150px;

}

#menu ul.level2 li a, #menu ul.level3 li a {

padding: 6px 9px 6px 15px;

border-bottom: 1px solid #fff;

width: 126px;

}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {

background-color: #767368;

color: #FFFFFF;

}

/* End Drop down menu */

--------------------------------------------------------------------------

zuzu

/* Drop down menu */

#nav li.unselected a {
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
background:none;
color:#990000;
font-weight:bold;
overflow:hidden;
text-decoration:none;
white-space:nowrap;
}

#menu ul {
display: block;
margin: 0;
padding: 0;
z-index: 90
}

#menu ul li {
float: left;
}

#menu ul li a {
float: left;
display: block;
width: auto;
text-decoration: none;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
#menu ul li a {
float: none;
}

/* End IE5-Mac hack */
#menu ul.level2, #menu ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background: #d3d3d3;
}
#menu ul.level2 {
margin-top: 20px;
}

#menu ul.level2 li, #menu ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul.level2 li a, #menu ul.level3 li a {
padding: 5px 9px 5px 15px;
}

#menu ul.level2 li a:hover,#menu ul.level3 li a:hover {
background-color: #d00000;
background-image: none;
color: #FFFFFF;
}

/* End Drop down menu */

Tweet

SHARE

Create New Page

Title:

Max 500 characters
Template:
Category:
Tags:

Separate by comma, good for search engine optimization
Custom Date:
Custom Url:

Discussion

Name:

E-mail:

Website

or

Comment

Notify me of new posts

Back to main page
Edit Page
Category:
Template:

Tags:

Separate by comma, good for search engine optimization
Custom Date:

Custom Url:

Do you want to add a note about your changes?

Changes:

Back to main page
Revisions

Back to main page
Compare Result

Do something for your community: GROU.PS

Wiki Knowledge Base