How to disable hover state on active link - html

Question

there is a double red line on hover state on my active link (another red line appears on dropdown menu. How to fix this. Also when i moving on dpopdown menu active state dissapears.
JSFIDDLE
Thank you.
Have a nice day.
[1]: http://jsfiddle.net/uj5k5ecq/

Answer 1

Adding a new class .jqueryslidemenu ul li a.active:hover and giving it a border-bottom:0; should do it, but there's something that I'm trying to figuring out is why the drop down is not filling that 5px removed from the border-bottom ... until now I have this:
.jqueryslidemenu ul li a.active:hover {
border-bottom:0;
}
======== Update ==========
I figured it out, it's somehere in your jquery code (probably in your file jqueryslidemenu.js) that has a static position for your dropdown of top:56px; by giving a new top value for .jqueryslidemenu ul li ul through your css like this it will fix this issue
.jqueryslidemenu ul li ul {
top: 51px !important;
}
Online demo here
but perhaps you should find that value and change it there tho, where this top:56px; is being created

Answer 2

One option is to remove the on hover underline by adding this to your CSS:
#nav a:hover{text-decoration:none;}
Another option is to remove the red border when you hover over a dropdown by removing border-top: 5px solid #eb2629;. Example below:
.jqueryslidemenu ul li ul {
position: absolute;
left: 0;
margin-left: -1px;
border-top: 5px solid #eb2629; /** REMOVE THIS LINE **/
display: block;
visibility: hidden;
background: #000;
z-index: 99999;
}
A third option is to remove the active red border when you hover over the link itself:
.jqueryslidemenu ul li a.active {
border-bottom: 5px solid #eb2629; /** REMOVE THIS LINE **/
color: #eb2629;
}

Answer 3

Just add
#nav a {
text-decoration: none;
}
View DEMO

Answer 4

Your question is not very clear but I think you might mean something like this?
http://jsfiddle.net/uj5k5ecq/3/
#nav {
float: right;
margin-top: 70px;
position: relative;
}
.jqueryslidemenu ul {
z-index:9999999;
}
.jqueryslidemenu ul li {
position: relative;
float: left;
list-style:none;
}
.jqueryslidemenu ul li a {
font-weight: normal;
text-transform: uppercase;
font-size: 13px;
margin-top: 18px;
padding: 0px 20px 15px;
display: block;
text-decoration:none;
color:#000;
}
.jqueryslidemenu ul li a:hover {
border-bottom: 5px solid #eb2629;
color: #eb2629;
}
.jqueryslidemenu ul li a.active {
}
.jqueryslidemenu ul li ul {
position: absolute;
left: 0;
margin-left: -1px;
border-top: 5px solid #eb2629;
display: block;
visibility: hidden;
background: #000;
z-index: 99999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
float: none;
font-size:12px;
width: 160px;
text-transform: none;
background-color: #000;
}
.jqueryslidemenu ul li ul li a {
margin: 0px;
color:#fff;
padding: 10px 20px 10px;
border-bottom: none;
text-transform: none;
}
.jqueryslidemenu ul li ul li a:hover {
background:#232323;
color: #FFF;
border-bottom: none;
text-transform: none;
}