First declare:
Although I have worked in the front-end position of the web for many years, I have no high technical requirements for the position. html and css are used more often, and there are very few original JavaScript, and they are basically copy-modified. So when I really write, I found that the foundation was not solid, and I learned and practiced, and gained a lot.
Reproduction image:
No more nonsense, post code
1. CSS code
The code copy is as follows:
a:link{color:white;text-decoration:none;}
a: visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}
2. JavaScript code
The code copy is as follows:
<script language=javascript>
function menu(menu1){
//Move the mouse in and out classname toggle and hide and display toggle.
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li");
for (i in menu_li){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
}
}
}
}
</script>
3. HTML code
The code copy is as follows:
<ul id=menu1>
<li><a href="">Home</a></li>
<li><a href="">Menu 1 Menu 1</a>
<ul>
<li><a href="">Submenu1Submenu1Submenu1Submenu1Submenu1Submenu1</a></li>
<li><a href="">Submenu 2</a></li>
</ul>
</li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Submenu1Submenu1Submenu1Submenu1Submenu1Submenu1</a></li>
<li><a href="">Submenu 2</a></li>
</ul>
</li>
</ul>
<script>var menu1=new menu("menu1");</script>
illustrate:
1. Considering that the ul and li pages are used more often, you can add #menu1 before css to limit the scope of the menu style.
2. js mainly listens to mouse movement and removal events, and switches to limouseover and limouseout styles; at the same time, changes the display attributes of the submenu to achieve the function of displaying hidden.
3. The same page can be called repeatedly without conflict. The JavaScript code in the html code is a call instance. The menu1 in the previous is an arbitrary variable name, and the menu1 in the brackets is the id in the html page.
Disadvantages of this example:
1. The mouseover, mouseout and submenu li of menu li are the same, that is, the same color and font, and there is no separate setting.
2. Since it is compatible with Ie6 and ie7, position:absolute is used, and the left and top attributes are added. The top should be set according to the overall height of the menu li.