Hi,
Today i tried out the different CSS menu styles which come with this extension. I found one thing which i'm not sure if it is styled that way or not working the way the it should. When i use the Standard Tabs style the hover state will switch back to default once i hover away my mouse from that menu part but with all other styles the hover state stays active even if i hover away my mouse pointer. It only gets deselected if i hover over another part of the menu. Is this styled this way and how can i make it behave the same as the standard Tabs style where the hover state returns back to default also when i hover away from the menu with my mouse.

I see some posts about this i guess but with no decent comments, just styling code.

Please explain why this happens and what to change.
Thanks

I tried to test in several browsers with the same result.

Thanks.

Hello,

Please provide a link to your page.

I don't have anything online yet (local testing). But all i can say it that i just insert a CSS horizontale menu in a blanc DW page and did not change anything. Just choose the style and made some main menu topics like HOME, NEWS, ETC.

Then i test it locally on my testing server and then it seems that only the 'standard tab style' is resetting the hover state after moving the mouse away from the menu. The other styles stay in hover position if i hover away, unless if i hover another menu item then it works but stays hovered over that menu item etc.

It looks a bit strange to me and i don't know if it is styled that way or should work the same like the standard tab style. Again i tried locally in DW live view, IE9, Firefox and Chrome. Same results everywhere.

From your posts i understand that you need to open the dmxNavigationMenu.css and remove the:

,
.dmxNavigationMenu li a.hover

from

.dmxNavigationMenu li a.selected,
.dmxNavigationMenu li a:hover,
.dmxNavigationMenu li a.hover {
	background: #09c;
	color: #fff;
}

OK, i will give it a try and report back the results later.

Thanks for your suggestion.

Dave

Hi, i removed:

.dmxNavigationMenu li a:hover,

from:

.dmxNavigationMenu li a.selected,
.dmxNavigationMenu li a:hover,
.dmxNavigationMenu li a.hover {
background: #09c;
color: #fff;
}

This however does not have any effect, the problem is still the same. How come it only works normal in the standard tab style?

Also i have to mention that these CSS rules are also in the standard tabs style and there the hover works as expected.
I saw abother (locked) post about the same issue i guess and there you mentioned it was solved changing some CSS rules but in the post you don't mention what has changed.
It is good to mention this so others might be able to have the same solution reading such posts.

In my case above did not resolve.

I put it online for you to see what i mean.
Please go to dvanzelst.homeip.net/test/index.php
Then you see the working standard tab, if you choose MENU 2 it will show elegant blue where the hover state stays active when you hover away from it.

Please let me know when checked as it is my test server which does not stay online.

Thanks for checking.
Dave

Hi, sorry i did not look right. Your suggestion above does work!!!
Please explain me why this is and why this extension insert the style like that if it does not work.

Also in the standard tabs style i see below CSS rule and here it works normally:

.dmxNavigationMenu.basic_tabs li a:hover,
.dmxNavigationMenu.basic_tabs li a.hover {
background: #eee;
color: #000;
}

In the blue elegant style i had to remove:

,
.dmxNavigationMenu li a.hover

from:

.dmxNavigationMenu li a.selected,
.dmxNavigationMenu li a:hover,
.dmxNavigationMenu li a.hover {
background: #09c;
color: #fff;
}

Hope you can explain me and if this is a bug will it be fixed?

I have the same sticky hover problem detailed above and tried removing the extra line:

.dmxNavigationMenu li a:hover
from dmxNavigationMenu.css

but this does not work in my situation.
I'm using the Elegant Blue style.
Also tried removing the similar extra line from elegantBlue.css but made no difference.

Please help

DW CS6 ; Univ CSS Menu 1.0.7

Hi David,

NOTE: It is not the .dmxNavigationMenu li a:hover state that you want to remove, but .dmxNavigationMenu li a.hover

Thanks Teodor - I'll have to watch my dots & colons!
That makes perfect sense now.
It would be great if DMXzone could fix this issue in the extension, as it's likely to trip me (and others) up again.
Cheers
Dave

Hi Dave,

This is not an that needs to be fixed, this is how the extension is supposed to work,

Hi Teodor
Surely the extension is not meant to work like this.

BTW I had to remove this as well from elegant_blue.css:
.dmxNavigationMenu.elegant_blue li a:hover

Cheers
Dave

Hi David,

Sorry to say this but your statement is wrong. Surely the extension is supposed to work like this, that's why the jquery code sets the .hover class and that's why we style the .hover class with the css.

OK - I'll have to remember to modify the relevant css in my sites whenever there's an update to the menu extension.

hi, i if you consider "nav ul li a" structure , you may do dispaly html tag <a> in css like: nav a { display: block; widith and height: same size as < li >, then you have <a> as block element not as inline element, so it will be clickable on entire area. Then you may give propperty lik: nav ul li a:hover{ background-color: #your fav color;}...that is all. Now, when you are in hover on the tab, the undermenu it will have hover propperty and the tab it will return in initial state.

<!-- html -->
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Under Item 3</a></li>
<li><a href="#">Under Item 3</a></li>
<li><a href="#">Under Item 3</a></li>
<li><a href="#">Under Item 3</a></li>
<li><a href="#">Under Item 3</a></li>
<li><a href="#">Under Item 3</a></li>
</ul>
</li>

<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

</nav>

/* css*/

nav {

float: left;
height: 45px;
background-color: #1bed7e;
width: 100%;
margin: 0;
padding: 0;
}

nav ul {
margin: 0;
padding: 0;
float: left;
list-style-type: none;

}

nav li {
margin: 0;
padding: 0;
line-height: 45px;
margin: 0;
padding: 0;
float: left;
display: inline-block;
width: fit-content;
width: 220px;
height: 45px;
text-align: center;
}
nav li:hover{
background-color: #4d4d4d;
}
nav a {
display: block; /* we give a block display to make <a> clickable <li> on the enire surface....A.P. 2016*/
text-decoration: none;
font-weight: 600;
font-size: 1.2em;
box-sizing: border-box;
text-decoration: none;
width: 220px;
height: 45px;

}


nav ul li a:hover {
background-color: #4d4d4d;
}
nav ul > li > a:hover {
color: #1bed7e;
}
nav ul li > ul li > a:hover{
color: #1bed7e;
}
nav ul li > ul {
margin-top: 5px;
}
nav ul li ul {
xdisplay: none;

}

nav li:hover > ul{
display: block;

}

nav ul li li {
background-color: #91ffc5;
}


nav ul li li:hover {
background-color: #4d4d4d;
}

Hover state stays active" refers to a user interface design feature where an element remains in a highlighted or active state even after the cursor moves away. This can enhance user experience by providing visual feedback, indicating that an action has been taken or a selection has been made. For instance, when exploring branches Hobby Lobby users may benefit from a hover state that keeps the selected store or category highlighted, reinforcing their choice and maintaining context. However, it's essential to use this feature judiciously to avoid confusion or overwhelming users.