yes of course it is possible, menu on our company web site is the MonoX default menu. Please take a look in the
You can change it manually or use the style from our company web site. Below if the CSS style from this web site.
.header .navigation
{
width: 722px;
float: right;
position: relative;
z-index: 1000;
}
.header .nav
{
float: right;
}
.header .navigation ul
{
padding: 0px;
margin: 40px 0px 0px 0px;
list-style: none;
float: left;
}
.header .navigation ul li
{
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0;
color: #fff;
margin-right: 5px;
position: relative;
}
.header .navigation ul li a
{
height: 25px;
text-decoration: none;
float:left;
color: #cdd8e9;
cursor: pointer;
font-size: 12px;
font-weight: bold;
padding: 4px 0px 0px 15px;
background: url(img/nav.png) no-repeat top left;
text-shadow:1px 1px 1px #000000;
}
.header .navigation ul li.no-hand A
{
cursor: default;
}
.header .navigation ul li strong
{
width: 15px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
height: 24px;
background: url(img/nav.png) no-repeat top right;
}
.header .navigation ul li a:hover
{
color: #fff;
}
/* Start - Simple Menu */
.header .navigation ul ul
{
position: absolute;
z-index: 5000;
top: 29px;
left: 0px;
float: left;
clear: both;
}
.header .navigation ul ul ul
{
top: auto;
left: 190px;
border-left: solid 1px Transparent;
float: left;
clear: none;
}
.header .navigation ul li:hover .level0
{
display:block;
margin: 0px;
padding: 4px;
float: left;
}
.header .navigation .level0
{
background: #2a4574 url(img/navigation-level-bg.jpg) right repeat-y;
padding: 3px;
border: solid 1px #4e6587;
}
.header .navigation .level0 li
{
display: block;
float: left;
clear: both;
margin: 0px 0px 2px 0px !important;
border-left: solid 5px #9ed457;
}
.header .navigation .level0 li:hover
{
background: #9ed457;
}
.header .navigation .level0 li a,
.header .navigation li.selected .level0 li a
{
background: none;
text-decoration:none;
color: #ADBDD4;
display:block;
padding: 5px !important;
margin: 0px !important;
text-align: left;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
height: auto !important;
cursor: pointer !important;
}
.header .navigation .level0 li a:hover,
.header .navigation li.selected .level0 li a:hover
{
background: #9ed457;
padding: 5px !important;
color: #fff !important;
}
.header .navigation .level0 li a span
{
background: none !important;
margin: 0px !important;
padding: 0px 0px 0px 5px !important;
white-space: pre;
width: 180px;
display: block;
}
.header .navigation .level0 li a span:hover
{
background: none !important;
margin: 0px !important;
padding: 0px 0px 0px 5px !important;
}
.header .navigation .level0 li strong
{
background: none;
height: auto;
width: auto;
display: none;
}
header .navigation .level0 li a
{
background-color: transparent;
}
.header .navigation .level0 li:hover a
{
background-color: transparent;
}
.header .navigation .level0 li.selected a
{
color: #ADBDD4;
background: none;
}
.header .navigation .level0 li:hover,
.header .navigation .level0 li.selected a:hover
{
background: #9ed457;
}
.header .navigation .level0
{
display:none;
}
.header .navigation .level1
{
display:none;
margin-top: -1px;
}
.header .navigation ul.level0 li:hover .level1
{
display:block;
}
/* End - MonoX Simple Menu */
Note: you need to manually copy the images to your application, and please change them a bit.