<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>jquery implements the navigation bar</title> <style> *{padding:0;margin:0; }#navigation >ul{List-style:None; }#navigation >ul>li{float: Left;width:80px;Height:30px;background:#009f95;Color:#ffffff;text-align:Center;Line-height:30px;cursor:Pointer; }#navigation >ul>li:hover{background:#0B61A4; }#navigation >ul>li>a{Color:#fff;text-decoration:None; }#navigation >ul>li>ul{Display:None; }#navigation >ul>li>ul>li{background:#00B83F;List-style:None; }#navigation >ul>li>ul>li:hover{background:#1E9FFF; }#navigation >ul>li>ul>li>a{Color:#fff;text-decoration:None; } </style></Head><Body><DivID= "Navigation"> <ul> <Li> <ahref="">1</a> <ul> <Li><ahref="">11</a></Li> <Li><ahref="">13</a></Li> <Li><ahref="">14</a></Li> </ul> </Li> <Li> <ahref="">2</a> <ul> <Li><ahref="">21st</a></Li> <Li><ahref="">22</a></Li> <Li><ahref="">23</a></Li> </ul> </Li> <Li> <ahref="">3</a> </Li> </ul></Div><Scriptsrc=".. /js/vendor/jquery-3.2.1.min.js "></Script><Script> $("#navigation >ul>li:has (UL)"). Hover (function(){ //Show $( This). Children ('ul'). Stop (). Slidedown (); },function(){ //Hide $( This). Children ('ul'). Stop (). Slideup (); })</Script></Body></HTML>
jquery implements the navigation bar