Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml> <pead> <meta charset= "UTF-8"/> <title> category Menu </title& Gt <style type= "Text/css" > * {margin:0; padding:0; Body {font:14px/1.5 "XXFarEastFont-Arial"; } a {text-decoration:none; } a:hover {color:red; } ul {position:relative; margin:50px 0 0 50px; width:300px; border:2px solid #aa9900; Li {height:30px; line-height:30px; width:100%; Text-indent:1em; List-style:none; border-top:1px solid #CCC; Li:hover, Li:hover + li, li:first-child {border-top:none; height:31px; line-height:31px; } div.box {width:300px; Height:calc (100% + 2px); Display:none; left:300px; Top: -2px; border:1px solid #999; Position:absolute; Z-index:1; Background: #EEE; } div.item {position:relative; width:100%; height:100%; } li:hover div.box {display:block; Li Div.item span.link {display:block; Width:calc (100%-1px); Height:calc (100%-2px); Position:absolute; left:0; top:0; Border-style:solid; Border-color: #FFF; border-width:1px 0 1px 1px; Z-index:2; } li:hover div.item Span.link {border-color: #999; Background: #EEE; width:100%; } span.icon {Position:absolute; right:10px; top:0; Color: #999; Font-weight:bold; Font-family:serif; } li:hover A {color: #270; } </style> </pead> <body> <ul> <li> ;d IV class= "Item" > <span class= "link" > Category 1 </ span> <span class= "icon" >></span> </div> <d IV class= "box" > Classification 1 Details </div> </li> <li> <div class= "ite M "> <span class= "link" > Category 2 </span> <span class= "icon" >></span> </div> <div class= "box" > Classification 2 details </div> </li> <li> <div class= "Item" > <span class= "link" &g T Category 3 </span> <span class= "icon" >></span> < /div> <div class= "box" > Category 3 More information </div> </li> <li> <div class= "Item" > <span class= "link" > Category 4 </span> <span class= "icon" >></span> </div> <div class= "box" > Classified 4 details </div> </li> <li><div class= "Item" > <span class= "link" > Category 5 &L t;/span> <span class= "icon" >></span> </div> &L T;div class= "box" > Classified 5 details </div> </li> <li> <div class= " Item "> <span class=" link "> Category 6 </span> <span class= "icon" >></span> </div> <div class= "bo X "> Category 6 details </div> </li> <li> <div class=" Item "> <span class= "link" > Category 7 </span> <span class= "icon" >></span> </div> <div class= "box" > Classification 7 details & Lt;/div></li> <li> <div class= "Item" > <span class= "link" ; Category 8 </span> <span class= "icon" >></span> < /div> <div class= "box" > Category 8 More information </div> </li> <li> <div class= "Item" > <span class= "link" > Category 9 </span> <span class= "icon" >></span> </div> <div class= "box" > Category 9 Details </div> </li> </ul> </body> < /html> </td> </tr> </table>
Tip: You can modify some of the code before running
