onfocus събитие на връзка - javascript, jquery, html, css

Изграждам меню, което се управлява от CSS и срещнах проблем за потребителите на клавиатурата. Няма поддръжка на различни браузъри за CSS :focus селектор, затова се опитвам да създам jQuery скрипт, който да изпълнява същото действие.

HTML меню:

<div id="nav">
<ul>
<li><a href="/index.asp" tabindex="12">Home</a></li>
<li><a href="/aboutus.asp" tabindex="13">About Us</a></li>
<li><a href="/whatWeDo.asp" tabindex="14" id="whatWeDo">What We Do</a>
<ul>
<li><a href="/whatWeDo1.asp">What we do1</a></li>
<li><a href="/whatWeDo2.asp">What we do2</a></li>
</ul>
</li>
<li><a href="/testStudies.asp">Test Studies</a></li>
</ul>
</div>

CSS правила за меню:

#nav ul {
padding: 0; margin: 0;
}
#nav ul li {
list-style: none;
font-size: 16px;
}
#nav ul li ul li {
font-size: 13px;
}
#nav ul li ul {
display: none;
}

.showMenu, #nav ul li:hover ul{width:200px; padding:7px; background: #F2F2F2; border:1px solid  #F2F2F2; display: block; position: absolute; left: 85px; top: 30px; }

Ето кода на jQuery, който се опитвам да накарам да работи:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$(#nav ul li ul).addClass("showMenu");
});
});

Отговори:

забравихте цитати:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$("#nav ul li ul").addClass("showMenu");
});
});

Забравили сте кавички, jQuery трябва да бъде:

$(document).ready(function(){
$("#whatWeDo").focus(function() {
$("#nav ul li ul").addClass("showMenu");
});

Както беше отбелязано в други отговори, заобикалянето на най-съкровения ви селектор с кавички трябва да свърши работа.

Въпреки това бих искал да подчертая, че се препоръчва да се обвързват събития с помощта на on() функция, която е добавена в jQuery 1.7. Ето как би изглеждал вашият код, използвайки on():

$(document).ready(function(){
$("#whatWeDo").on("focus", function() {
$("#nav ul li ul").addClass("showMenu");
});
});

Тук е повече информация за on().