Format Menu Items

Control how the main menu is displayed

 

.navbar .nav > li > a
{
border: none; /*1px solid green; */ /* Add a border */
border-radius: 4px 4px 4px 4px; /* Rounded corners */
background-image: linear-gradient(to bottom, #aceded, #0D4D4D); 
background-image: -webkit-linear-gradient (top, #aceded, #0D4D4D); 
background-repeat: repeat-x; /* Add shading */
text-align: right;
}
.navbar .nav > li
{
padding: 2px 2px; /* Spacing between menu items */
}
/* Shade the current selected menu item */
.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a
{
background-color: #407f7f;
background-image: linear-gradient(to bottom, #669999, #669999);
background-image: -webkit-linear-gradient (top, #669999, #669999); 
background-repeat: repeat-x; /* Add shading */
background-image: none;
}

This will change the child menus:

.dropdown-menu
{
background-color: #669999;
}
/* Level 2 dropdown link with hover */
.dropdown-menu > li > a:hover
{
background-color: black !important;
}
.dropdown-menu > li > a:visited
{
background-color: black !important;
}
.dropdown-submenu > .dropdown-menu > li > a:hover {
background-color: black !important;
}
.dropdown-submenu > .dropdown-menu > li > a:visited {
background-color: black !important;
}

By default, a box is displayed surrounding the menu (or link) that has been clicked.  This will remove the box (border).

a:focus
{
outline: none;
}

Pin It on Pinterest

Share This