Occasionally, I encounter a problem with my menu.
Hovering over the "produkter" menu item should trigger a submenu to appear. Most of the time, I am able to navigate down the submenu with my mouse cursor. However, on some occasions, the submenu disappears when I move my mouse to it.
For a demonstration, visit this link:
I followed a tutorial for this technique, but I am unable to identify my mistake.
Can someone help me identify the error?
Below is the complete CSS code for my menu:
ul#piranya-menu-1
{
padding: 0px;
margin: 0px;
list-style: none;
margin: 0 auto 0 auto;
width: auto;
line-height: 1.5em;
width: 750px;
position: relative;
display: inline-table;
}
ul#piranya-menu-1:after
{
content: "";
clear: both;
display: block;
}
ul#piranya-menu-1 > li
{
float: right;
height: 100%;
}
ul#piranya-menu-1 > li > a
{
padding: 0px 10px;
color: white;
font-weight: normal;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
height: 100%;
vertical-align: middle;
line-height: 70px;
display: block;
}
ul#piranya-menu-1 > li:hover
{
background: url('/image/1297') repeat-x;
}
ul#piranya-menu-1 > li:hover > a
{
color: black;
}
ul#piranya-menu-1 > li:hover > ul
{
display: block;
}
ul#piranya-menu-1 > li.piranya-menu-item-selected-root a
{
background: url('/image/1297') repeat-x;
color: black;
}
/*Submenu*/
ul#piranya-menu-1 > li > ul
{
display: none;
background-color: white;
position: absolute;
top: 100%;
list-style: none;
padding: 20px;
}
ul#piranya-menu-1 > li > ul li
{
float: none;
position: relative;
}
ul#piranya-menu-1 > li > ul a
{
color: black;
}