javascript - Dropdow menu keyboard responsive problm -

I'm really new to building websites, I'm trying to make this dropdown menu keyboard responsive but not working I am doing / P>

Now I can display a tab and drop menu on the link.

Demo:

CSS:

  # menu {width: 200px; Background: # 444; } .noBullets {list-style: none; Padding-left: 0 pixels; } #Menu Li One {Padding: 15px; } # Menu a {display: block; Color: #fff; } # Menu ul ul {display: none; Background: # 000; } #MenuUlAlA: Hover {background: # 222; }  

HTML

  & lt; Div id = "menu" & gt; & Lt; Ul class = "noBullets" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Instructions & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Form & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Attack & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

JS: (updated thanks to Carlos)

  $ ('# menu li: is (ul)'). Hover (function {$ (this) .find ('& gt; ul') .pause (). SlideToggle (400);}); $ ('# Menu li: is (ul)'). Focusin (function {$ (this) .find ('& gt; ul') .pause (). SlideToggle (400);});  

Try it out: Remove:

  $ ( ("Hover");}).) Stain (function () {$ (this) .Parents ("li"). RemoveClass ("hover");});  

To:

  $ ('# menu li: is (ul)'). Focusin (function () {$ (this) .find ('& gt; ul') .pause () SlideToggle (400);});