Hy all. I have some problem then tried employ action onMouseover and onMouseOut.
I have further drop unordered menu
div#content{position: relative; padding:0 10px; border: solid 1px #6b6b6b; height: 100px;}
ul li {list-style: none;}
ul.menu {padding: 0; margin:0; display: block; height: 68px;}
ul.menu > li {float: left; background: url("li.jpg") no-repeat top right; height: 68px;}
ul.menu > li a{display:block; padding-left: 3px; text-decoration: none; height: 68px;}
ul.menu > li a:hover {display: block; background: url("a-hover.gif") repeat-x bottom left; height: 68px;}
ul.menu > li > ul.submenu {display: none;}
<div id="content" class="content">
<ul id="menu" class="menu">
<li><a href="#">item 1  </a></li>
<li><a href="#">item 2  </a></li>
<li><a href="#">item 3</a>
<ul id="submenu" class="submenu">
<li><a href="#">item 3 sub 1</a></li>
<li><a href="#">item 3 sub 2</a></li>
</ul>
</li>
</ul>
</div>
and javascript
function doMenu (li){
var oli = li.childNodes;
var len = oli.length;
if (len > 1) {
for (var i = 0; i < len; i++) {
if (oli[i].nodeType == 1) {
if (oli[i].tagName == 'UL') {
return oli[i];
}}}} };
function doShow(e) {
if (e) {
var t = e.target;
console.log(t.tagName);
var pN = t.parentNode;
console.log(pN)
if (pN.tagName == 'LI') {
if (doMenu(pN)) {
var oUl = doMenu(pN);
if (oUl.style.display == "none") {
oUl.style.display = "block"}
else {oUl.style.display = "none"}}}}};
function doHide (e) { //d't essue
if (e) {
var t = e.target;
if (t.tagName == "A") {
if (t.onFocus === 'null') {alert('focus')}
}
// console.log("doHide event "+t.tagName);}}
function dodo (event){
document.addEventListener('mouseover', doShow, false);
document.addEventListener('mouseout', doHide, true);
}
dodo();
then i mouse over to html element <a> my sub menu is show but it work partial. Because then i first time mouse over to <a> it d't work, and when i follow action sub menu Show. i d't understand why it work so this. who may help ???? I dont so long study js.