Hi,
While testing our webpage, we found that in all browsers the CSS menu works fine
except in Safari, on browsing the child nodes of the menu. The menu just closes
on the second or third select.
I would greatly appreciate any help to fix this bug.
The CSS code is below.
Regards,
Sharon.
Working Example:
http://ago.tanfa.co.uk/css/examples/menu/hs7.html
In safari try going to:
HORIZONTAL DROP & POP MENU > tafna demo example > tafna tutorial >stage 1-6(mouse over one to six)
Code or simply view the source:
<style type=“text/css” media=“screen”>
/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!—[if IE]>
<style type=“text/css” media=“screen”>
#menu ul li {float: left; width: 100%;}
</style>
<![endif]—>
<!—[if lt IE 7]>
<style type=“text/css” media=“screen”>
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]—>
