I have the following code, which I wan't to make mobile compatible. Right now the drop down menus don't come out and it goes directly to the link. I wan't it to go to the link on the second click, the first making the drop down menu come out.
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Item 1</a>
<ul>
<li href="#"><a>Compositions</a></li>
<li href="#"><a>Improv</a></li>
<li href="#"><a>Recitals</a></li>
<li href="#"><a>Videos</a></li>
</ul>
</li>
<li href="#"><a>Programming</a></li>
<li href="#"><a>Academic</a></li>
<br class="clear" />
</ul>
css:
#topnav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #444;
border-radius: 0.3em;
color: #ddd;
font-size: 16px;
vertical-align: middle;
text-align: center;
}
#topnav ul li {
border-radius: 0.2em;
float: left;
}
#topnav ul li a {
display: inline-block;
margin: 0.4em 1em;
color: inherit;
}
#topnav ul li ul {
border-top-left-radius: 0;
border-top-right-radius: 0;
display: none;
position: absolute;
}
#topnav ul li ul li {
float: none;
text-align: left;
}
#topnav ul li:hover ul, #topnav ul li ul:hover {
display: block;
}
#topnav li:hover {
background-color: #04f;
}