My menu is of course horizontal not vertical
and here is the full code
my template
my .css
Code:
.mod_navigation {
height: 35px;
background: url(images/bg.gif) repeat-x;
position: relative;
font-family: arial, verdana, sans-serif;
font-size: 11px;
width: 100%;
z-index: 100;
margin: 0;
padding: 0;
}
.mod_navigation .table {
display: table;
margin: 0 auto;
}
.mod_navigation .select,.mod_navigation .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
}
.mod_navigation li {
margin: 0;
padding: 0;
height: auto;
float: left;
}
.mod_navigation .select a {
display: block;
height: 35px;
float: left;
font-weight: bold;
background: url(images/bg.gif);
padding: 0 30px 0 30px;
text-decoration: none;
line-height: 35px;
white-space: nowrap;
color: #2b3238;
}
.mod_navigation .select a:hover,.mod_navigation .select li:hover a {
background: url(images/hover.gif);
padding: 0 0 0 15px;
cursor: pointer;
color: #2b3238;
}
.mod_navigation .select a b {
font-weight: bold;
}
.mod_navigation .select a:hover b,.mod_navigation .select li:hover a b {
display: block;
float: left;
padding: 0 30px 0 15px;
background: url(images/hover.gif) right top;
cursor: pointer;
}
.mod_navigation .select_sub {
display: none;
}
/* IE6 only */
.mod_navigation table {
border-collapse: collapse;
margin: -1px;
font-size: 1em;
width: 0;
height: 0;
}
.mod_navigation .sub {
display: table;
margin: 0 auto;
padding: 0;
list-style: none;
}
.mod_navigation .sub_active .current_sub a,.mod_navigation .sub_active a:hover
{
background: transparent;
color: #2b3238;
}
.mod_navigation .select :hover .select_sub,.mod_navigation .current .show
{
display: block;
position: absolute;
width: 100%;
top: 35px;
background: url(images/back.gif);
padding: 0;
z-index: 100;
left: 0;
text-align: center;
}
.mod_navigation .current .show {
z-index: 10;
}
.mod_navigation .select :hover .sub li a,.mod_navigation .current .show .sub li a
{
display: block;
float: left;
background: transparent;
padding: 0 10px 0 10px;
margin: 0;
white-space: nowrap;
border: 0;
color: #2b3238;
}
.mod_navigation .current .sub li.sub_show a {
color: #2b3238;
cursor: default;
}
.mod_navigation .select .sub li a {
font-weight: normal;
}
.mod_navigation .select :hover .sub li a:hover,.mod_navigation .current .sub li a:hover
{
visibility: visible;
color: #73a0d2;
}
Bookmarks