A drop-down menu combining css and js supports mainstream browsers_javascript skills

First statement:

Although I have worked in a web front-end position for many years, the technical requirements of the position are not high. HTML and CSS are mostly used, but JavaScript is rarely original and is basically copied and modified. Therefore, when I actually write it, I find that the foundation is not solid. I learn and practice at the same time, and I gain a lot.

Rendering:

No more nonsense, let’s post the code

1. css code

Copy code The code 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

Copy code The code is as follows:

3. html code

Copy code The code is as follows:

• Homepage


• Menu 1Menu 1
  
  
  
  • Submenu 1Submenu 1Submenu 1Submenu 1
  
  
  • Submenu 2
  
  
  
  


• Menu 2
  
  
  
  • Submenu 1Submenu 1Submenu 1Submenu 1
  
  
  • Submenu 2
  
  
  
  

<script>var menu1=new menu("menu1");</script>

Description:

1. Considering that ul and li pages are commonly used, you can add #menu1 before css to limit the scope of the menu style.

2. The js mainly listens for the mouse move in and removal events, and switches to the limouseover and limouseout styles accordingly; at the same time, it changes the display attribute of the submenu to achieve the display and hide function.

3. The same page can be called repeatedly without conflict. The JavaScript code in the html code is the calling instance. The previous menu1 is an arbitrary variable name, and the menu1 in the brackets is the id in the html page.

Disadvantages of this example:

1. The styles of mouseover and mouseout of menu li and submenu li are the same, that is, the same color and font, and no separate settings are implemented.

2. Since it needs to be compatible with Ie6 and ie7, while position:absolute is used, the left and top attributes are added. The top should be set according to the overall height of the menu li.