I am using the Pitch Premium theme, and here is the style.css part for the main menu navigation buttons…..
/* =Main Menu
————————————————————– */
#mainmenu {
margin: 35px 0;
word-wrap: break-word;
}
ul#mainmenu-menu {
position: relative;
background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
border: 1px solid #E2E2E2;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f7f7f7′, endColorstr=’#f4f4f4′,GradientType=0 );
}
ul#mainmenu-menu li.menu-item {
border-right-width: 0px;
position: relative;
border-right: #330000;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
}
ul#mainmenu-menu li.menu-item a {
color: #5e5e5e;
display: block;
padding: 20px 40px;
text-decoration: none;
}
ul#mainmenu-menu li.menu-item a:hover {
color: #fbff02;
background: #cab07a;
}
/* =Main Menu : Scaled Menu
————————————————————– */
#mainmenu.scaled .container > div {
width: 100%;
height: 52px;
display: table;
}
#mainmenu.scaled ul#mainmenu-menu {
height: 52px;
display: table-row;
}
#mainmenu.scaled li.menu-item {
width: auto;
height: 52px;
border: none;
display: table-cell;
float: none;
}
#mainmenu.scaled li.menu-item a {
border: 1px solid #e2e2e2;
border-width: 1px 1px 1px 0;
text-align: center;
}
#mainmenu.scaled li.menu-item:first-child a {
border-left-width: 1px;
}
#mainmenu.scaled ul#mainmenu-menu ul.sub-menu li {
border-width: 0;
display: block;
}
#mainmenu.scaled ul#mainmenu-menu ul.sub-menu a {
border: none;
}
/* =Main Menu : Main Dropdown
————————————————————– */
ul#mainmenu-menu li.menu-item a {
height: 52px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #5e5e5e;
display: block;
padding: 20px 40px;
text-decoration: none;
}
ul#mainmenu-menu ul.sub-menu {
position: absolute;
top: 52px;
left: 0px;
width: 100%;
background: white;
border: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
display: none;
z-index: 99;
}
ul#mainmenu-menu li:hover ul.sub-menu {
display: block;
}
ul#mainmenu-menu ul.sub-menu li {
border: none;
display: block;
float: none;
font-weight: normal;
}
ul#mainmenu-menu ul.sub-menu li a {
height: auto;
line-height: 15px;
padding: 15px 15px 15px 15px;
}
I’ve been playing with this for hours. I’m new at it as well. So if this if very familiar to someone an they could help, it would be awesome!
