Reply To: MENU COLORS ON HOVER

[kjcarleo]

OK so I attached video for you to see. I like the way the menu looks on the MAIN page, EXCEPT for the “jumping” it is still doing (looks like one pixel). I would like it to have a smoother transition on hover, (no jump) with the BLUE (#0025db) BG on hover still with the RED Bar (#dd3333), but maybe no border or something? You will notice when I go to a page other than MAIN home page, the colors are different.

In addition it looks like there is a one 1px border in black around each submenu item on all other pages but MAIN home page.

By the way, what is the difference between “a:hover” and “li:hover”

Here is what I have in TOTAL in my Quick CSS as of right now:

COPY CODE

.header-color.social-header {
    background-color: #0025db;
}
.header-color .top-menu li > a, .header-color #top-social li a {
    font-family: "Raleway";
    color: white;
}
.header-color .top-menu li > a:hover, .header-color #top-social li a:hover {
     color:white;
}
#top-social li a {
    border-right: 1px solid transparent !important; }
.kleo-main-header .nav.navbar-nav li a {
    color: #fff !important;
    font-weight: 900 !important;
}
#gwolle_gb #gwolle_gb_new_entry .input {
	border: 0px solid #e5e5e5;
	background-color: transparent;
}
#gwolle_gb #gwolle_gb_new_entry input,
#gwolle_gb #gwolle_gb_new_entry textarea {
	background-color: #f2f2f2;
}
.avatar {
border-radius: 0 !important;
}

.top-menu li a {
    border: 0 !important;
}

li.kleo-user_avatar-nav a img {
    border-radius: 0;
    border:2px solid #ddd;
}

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 5px solid #ddd;
}

#buddypress .rounded, .buddypress .rounded {
    border-radius: 0 !important;
}

div#kleo-quick-contact {
    width: 400px;
}

h4.kleo-qc-title {
    font-weight: 800;
}
div#kleo-quick-contact p {
    font-weight: 400;
}
.kleo-main-header .nav > li.active > a {
    box-shadow: none !important;
}
h4.kleo-qc-title:before {
    content: 'e85f';
    font-family: fontello;
    padding: 10px;
}

h1.page-title {font-weight: bold;}

/*Envira Gallery Title for Albums */
.envira-gallery-wrap .envira-album-title {
font-size:18px;
}

.envira-gallery-description p {
    font-size: 18px;
}

.kleo-search-form #searchform .input-lg {
    border-radius: 0;
    margin: 0 !important;
    height: 45px !important;
}

.kleo-search-form #searchform .input-group-btn { top:10px !important;}

.envira-breadcrumbs a {
    color: blue;
    font-size: 18px;
}
.envira-breadcrumbs a:hover {
    color:blue;
    font-size: 18px;
}
.envira-breadcrumbs .breadcrumb_last {
    color: #dd3333;
    font-size: 18px;
}
ul#menu-megaprimarymenu .caret:after {
    color:white !important;
}
#footer .widget-title {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 900;
}
.share-links div.hr-title {
    margin-bottom: 5px !important;
}
.share-links {
    text-align: center;
    padding: 10px;
    clear: both;
}
.dropdown-menu li a {
    background: #0025db;
    border: solid 0px #ffffff;
    color: #ffffff !important;
}
.breadcrumb-extra a {
    text-transform: uppercase;
}
ul.dropdown-menu li:hover {
    background: #0025DB !important;
    border: 0px solid #0025DB !important;
}
ul.dropdown-menu a:hover {
    color: #0025DB !important;
}
.header-color .dropdown-menu .active a {
    background: #dd3333;
}
.kleo-notifications.new-alert {
    background-color: #dd3333;
    color: #ffffff;
    position: absolute;
    top: 18px !important;
    right: -24px !important;
    border-radius: 0 !important;
}
ul#menu-megaprimarymenu li a {
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
ul.dropdown-menu li a {
    text-shadow: none !important;
}
.kleo-search-form .kleo-ajax-search-loading {
    margin: 0 auto;
    top: 12px;
}

.kleo-toggle-submenu .submenu-inner {
     background:red;
}
.kleo-notifications-nav ul.submenu-inner li {
     background:#0025DB;
}
a.btn.btn-default.mark-as-read {
    background: red !important;
    color: green !important;
}
.kleo-toggle-submenu .minicart-buttons {
     background:yellow !important;
}
.kleo-main-header .nav li a:hover {
     box-shadow: inset 0px 2px 0px 0px #dd3333 !important;
}
.kleo-search-form #searchform .input-lg {
    box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);
}
#header i:before {
    font-size: 16px;
}

Attachments:

1. menus.wmv