We Keep Coding

How can I ensure css hover state is active when an element is revealed below the cursor?

When a div containing links with a hover property is changed from display:none to display:block, if the mouse pointer is over the links, the hover state is not triggered until the pointer is moved.
Is there a way in javascript to either trigger the hover state or force it to be evaluated when the div is revealed.
To explain the context, I am attempting to implement an early Macintosh dropdown list interface style that involves revealing the list options on top of the drop down list when the list box is clicked on.
When I click on the dropdown div, the dropdown-content is displayed but the top item is not highlighted until you move the mouse.
function openMenu(mybutton) {
var els = document.getElementsByClassName("dropdown-content");
var els1 = document.getElementsByClassName("dropdown");
for(var i = 0; i < els1.length; i++) { // Step through all dropdown elements
if (els1[i] === mybutton) {
els[i].classList.toggle("show");
}
}
}
.dropdownContainer {
border: 1px black solid;
position:relative;
width:150px;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position:absolute;
top:-1px;
left:-1px;
width:150px;
background-color: white;
min-width: 120px;
white-space: nowrap;
z-index: 1;
border: 1px #000 solid;
border-bottom-width: 1px;
}
.dropdown-content a {
float:none;
color: black;
padding: 4px 10px 4px 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover, .dropdown-content a:focus {
background-color: black;
color: white;
}
.show {
display: block;
}
<div class="dropdownContainer">
<div onclick='openMenu(this);' class="dropdown">
All Categories
</div>
<div class="dropdown-content">
All Categories
Boards
Cables
Memory
</div>
</div>
I was able to make the first line initially highlight by changing the focus to the first link when the dropdown-content is opened but the problem was then that the the first link stayed highlighted when you moved the mouse over the other links.

Web menu button to keep a different color

I don't probably know how to search for this precise question and I haven't found anything, so I am sorry if there is already asked somewhere.
I only have 3 buttons and the index is the "Inicio" page. I've applied a :hover to the buttons, but I want to keep it fixed for the button of the displayed page. Obviously, I want to have "Inicio" in this state at the beginning.
(jsfiddle below)
<!-- menu -->
<nav id="nav">
<ul>
<a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
<a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
<a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
</ul>
</nav>
#nav {
padding-top: 27px;
padding-left: 25%;
}
#nav ul li {
list-style:none;
display:inline-block;
margin-left: 4%;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 100%;
color: #FFF;
}
.text_menu {
padding-top: 5px;
}
.boton {
width: 15%;
height: 57px;
background-color: #0099ff;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px solid #000000;
}
.boton:hover {
background-color: #0033ff;
}
Here is a jsfiddle:
http://jsfiddle.net/7jbUj/
Thanks for your responses.

U can simply add class like .hovered to current button like
HTML:
<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>
CSS:
.hovered {
background-color: #0033ff;
}
UPD: Fiddle
UPD2: For page changing
U simply can add and remove class on `click' like:
$('nav ul a').on('click', function(){
$('nav ul a li.hovered').removeClass('hovered');
$(this).children('li').addClass('hovered');
})
Fiddle2

If you want to use without JQuery, you have to use it in javascript
HTML :
<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>
CSS :
.mnu{
background-color : #451;
margin-left:20px;
font-size:30px;
}
a:hover{
background-color:#ccc;
}
.hovered{
background-color:#ccc;
}
JS :
var prev_mnuid= "mnu1";
function makeSelected(mnuid){
document.getElementById(prev_mnuid).className = "mnu";
document.getElementById(mnuid).className = "mnu hovered";
prev_mnuid=mnuid;
}
Fiddle : http://jsfiddle.net/rajaveld/t31zc8jx/

Using onblur and setTimeout to close a sub menu

I want to use onblur to close a sub-menu. I've got it to "hide" the sub-menu, but it does just that. I want the menu to go back to its original state. I would also like to set a timeout on the menu so it will close after 5-10 seconds.
P.S I tried to make a jsfiddle for this, and it didnt function. Also, this is for a mobile site.
HTML
<div class="smenu_div"">
<ul>
<li>
<a class="menu-title" href="#" onblur="hidemenu()" onclick="showsub()">Menu</a>
<ul id='hiddenMenu'>
<li>Home</li>
<li>Trucks</li>
<li>Equipment</li>
</ul>
</li>
</ul>
</div>
CSS
.smenu_div ul
{
padding:0px;
margin-top:5px;
margin-right:40px;
font-family:georgia;
font-size:70px;
color:#ffffff;
list-style:none;
text-indent:15px;
text-align:center;
width:40%;
overflow:hidden;
position: relative;
display: block;
float:right;
}
.smenu_div ul li
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0);
line-height:justified;
margin-top: 10px;
position:relative;
}
/* Changed this so that your hidden menu is hidden by default */
.smenu_div li ul
{
z-index: 50;
display: none;
position: relative;
width: 100%;
background: transparent;
float:none;
}
.smenu_div ul li a
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none;
color:#ffffff;
background: #000000;
display:block;
position:relative;
}
/* #new */
.smenu_div ul li a.menu-title
{
padding-right: 50px;
background: #000000 url('plus.png') no-repeat right center;
background-size: 75px 75px;
}
.menu-open .smenu_div ul li a.menu-title
{
background-image: url('minus.png')
}
JavaScript
var hidden = true;
function showsub() {
document.getElementById('hiddenMenu').style.display = (hidden) ? 'block' : 'none';
document.body.classList.toggle('menu-open');
hidden = !hidden;
};
function hidemenu() {
document.getElementById('hiddenMenu').style.display = 'none';
document.body.classList.toggle('plus');
hidden = !hidden;
};

there's a mistake in your html code <div class ="smenu_div""> has one too many quotes, so it breaks jsfiddle.
You almost have it, literally all you're missing in code is
setTimeout(hidemenu,10000);
from showsub. Note, if you want to prevent it from closing after 10s, if the user keeps pressing on stuff, you'll need some extra code, but if you're ok with it closing 10s after the user clicks on menu no matter what then it's ok.
here's the fiddle

HTML5 and CSS3 tree menu with nice hover effect

I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .
http://www.crystal.ch/abb/power_systems_landscape/
You may notice that there is following issues involved,
Nice hover effect (I badly need this)
Rotation of menu item arrow icon
Also here you see sliding up and down smoothly that is not problem to me.
Any idea or reference would be appreciated. thanks

To start we need the HTML
<p class="menu_head">first</p>
<div class="menu_body">
1
2
3
4
</div>
<p class="menu_head1">Second</p>
<div class="menu_body">
1
</div>
Jquery for the effect
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head1").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head").mouseover(function()
{
$(this).css("text-indent","35px");
$(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css("text-indent","10px");
$(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);
});
I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.
$(this).fadeTo("slow",0.33);
CSS
.menu_head {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_head1 {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_body {
display:none;
}
.menu_body a{
font-family: arial;font-weight: bold;
left:3%;
width: 220px;
height:7px;
text-indent:10px;
position:relative;
padding: 10px 15px;
display:block;
color:#006699;
padding-left:10px;
font-weight:bold;
font-size:10px;
text-decoration:none;
vertical-align: middle;
}​
See Example
try to edit the css for it was made to adapt to my site.
Gudluck

Problem with sub-menu showing/hiding on click

I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ­---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)

See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});