2015-05-26, 03:58:42
Hi, the navbar has a bug. The "last-child" state gets stuck on the most right menu item.
Here is the code for the navbar:
Any way to have that orange selected state working as intended?
Here is the code for the navbar:
Code:
.mainMenu { float: left; margin: 29px 0 0 25px; font-family: 'Hind', sans-serif; font-weight: 500; }
.mainMenu ul { font-size: 11pt; }
.mainMenu ul li a, .mainMenu ul li { float: left; text-decoration: none; color: #4d4d4d; }
.mainMenu ul li { list-style: none; position: relative; height: 50px; line-height: 52px; }
.mainMenu ul li a { padding: 0 18px; }
.mainMenu ul li:hover { background: #fff; color: #4d4d4d; -webkit-transition: 250ms linear all; -moz-transition: 250ms linear all; transition: 250ms linear all; }
/* Submenu */
.mainMenu ul li ul { font-size: 11pt; display: none; position: absolute; left: 0; top: 100%; margin: 0; padding-top: 5px; padding-bottom: 5px; background: #fff; }
.mainMenu ul li ul li { padding: 5px 10px; width: 250px; height: 20px; line-height: 20px; border: none; }
.mainMenu ul li:hover > ul { display: block; }
.mainMenu ul li ul li, .mainMenu ul li ul li a { float: none; color: #fff; }
.mainMenu ul li ul li { _display: inline; /* for IE6 */ }
.mainMenu ul li ul li a { display: block; padding: 0 10px; }
.mainMenu ul li ul li a { color: #4d4d4d; }
.mainMenu ul li ul li:last-child a { color: #4d4d4d !important; }
.mainMenu ul li ul li:hover a { color: #F05F40; }
.mainMenu ul li ul li:last-child:hover a { color: #F05F40 !important; }
/* Subsub Menu */
.mainMenu ul li ul li ul { display: none; background: #000; padding-top: 5px; padding-bottom: 5px; }
.mainMenu ul li ul li:hover ul { left: 100%; top: 0; }
.mainMenu ul li ul li ul li { padding: 5px 20px }
.mainMenu ul li ul li { background: none !important; }
.mainMenu ul li ul li a:after { content: "" }
.mainMenu ul li:last-child { background:#F05F40; float:right !important; color:#fff; padding: 0 18px;}
.mainMenu ul li:last-child a {color:#fff; }
.mainMenu ul li:last-child:hover { background: #6C4D39; color: #fff;}
Any way to have that orange selected state working as intended?