Menu made by CSS + Div: a main display layer. Other lists are hidden. Use JS functions to set the display and hiding of lists. Two functions are used respectively, and the function implementation effect is the same. One is to refer to the examples in the "CSS + DHTML essence" book, and the other is to find the function.
Let's take a look at the function! Are there any other better ways to achieve this effect? Thank you !! <Br/> xmlns = "http://www.w3.org/1999/xhtml"> </P> <p> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <br/> <style type =" text/CSS "> <! -- * {Margin: 0; padding: 0; Border: 0;} body {Background: # FFF; font-size: 14px; font-family: "";} </P> <p> # nav {border: # ff0099 solid 3px; position: absolute; top: 30px; left: 50px; width: 150px; Height: 300px ;} </P> <p> # ul {position: absolute; top: 30px; List-style-type: none; line-Height: 24px; Background-color: # FFF ;} </P> <p> # ul a: visited {Line-Height: 24px, color: #666; text-align: center; text-Decoration: None; display: block; width: 150px;/* set the width directly. * // * set the width in IE. Although the block is set, the text is only a hyperlink, so you must explicitly set the width */} </P> <p> # ul a: hover {text-Decoration: none; color: # ff2a84; </P> <p >}</P> <p> # ul Li {display: inline;/* IE will leave Li blank, remove blank space */} </P> <p>/* fruit Layer */</P> <p> # Shui {position: absolute; left: 200px; top: 50px; border: #66 ffcc solid; Height: 210px; border-width: 2px 2px 2px 18px; text-align: center; List-style-type: none; line-Height: 20px; visibility: hidden; Background-color: # FF F;/* No background color, easy to break */} </P> <p> # Shui A: visited {color: #666; text-Decoration: none; display: block; width: 100px;/* cannot be used # nav A: Link, A: visited, so the second type cannot be found, the second type does not inherit */</P> <p >}</P> <p> # Shui A: hover {text-Decoration: none; color: # 0cc ;} </P> <p> # Hua {position: absolute; left: 200px; top: 55px; Border: # c06 solid; Height: 170px; border-width: 2px 2px 2px 18px; text-align: center; List-style-type: none; line-height: 20px; visibility: hidden; Background-color: # FFF; </P> <p >}</P> <p> # hua a: visited {color: #666; text-Decoration: none; display: block; width: 100px; </P> <p >}</P> <p> # hua a: hover {text-Decoration: none; color: # c06 ;}</P> <p >#che {position: absolute; left: 200px; top: 60px; Border: #6c3 solid; border-width: 2px 2px 2px 18px; text-align: center; List-style-type: none; line-Height: 20px; visibility: hid Den; Background-color: # FFF;} # che A: visited {color: #666; text-Decoration: none; display: block; width: 100px ;} </P> <p> # che A: hover {text-Decoration: none; color: #6c3 ;} </P> <p> --> </style> <p> <ul id = "Ul"> <! -- Call the first function --> <li> fruit/fruit </LI> <p> <! -- Call the second function --> </P> <li> flower/flower </LI> <p> <! -- The second function is called below --> </P> <li> automobile/automobile </LI> <li> fruit 2 </LI> <li> flower/flower 2 </LI> <li> automobile/automobile 2 </LI> <li> fruit 3 </LI> <li> flower/flower 3 </LI> <li> Automobile /CAR/Car 3 </LI> </ul> <ul id = "Shui" onmouseover = "javascript: showmenu ('shui') "onmouseout =" javascript: hiddenmenu ('shui ') "> <li> Apple </LI> <li> banana </LI> <li> kiwifruit </LI> <li> dragon fruit </LI> <li> Apple 2 </LI> <li> banana 2 </LI> <li> kiwifruit 2 </LI> <li> Pitaya 2 </LI> <li> kiwifruit 3 </LI> <LI> dragon fruit 3 </LI> </ul> <ul id = "Hua" onmouseover = "javascript: mm_showhidelayers ('hua', '', 'show')" onmouseout = "javascript: mm_showhidelayers ('hua','', 'hide ') "> <li> chrysanthemum </LI> <li> rose </LI> <li> peony </LI> <li> Jasmine </LI> <li> junzilan </ LI> <li> yu mei </LI> <li> Bell flower 2 </LI> <li> Osmanthus 2 </LI> </ul> <ul id = "Che" onmouseover = "javascript: mm_showhidelayers ('che ', '', 'show')" onmouseout = "javascript: mm_showhidelayers ('che ','', 'hide ') "> <li> Volkswagen </LI> <li> Audi </LI> <li> BMW </LI> <li> Mercedes-Benz </LI> <li> Porsche </ LI> <li> Ford </LI> <li> Chrysler </LI> <li> Ferrari </LI> <li> Chrysler 2 </LI> <li> Ferrari 2 </LI> </ul> <p>
