CodePen

HTML

            
              <html>
<head>
<meta charset=utf-8 />
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<title>menu fun</title>
</head>
<body>
<h1>Minimal dropdown nav</h1>
  <hr>
<!-- click demo -->
<div class=navbar id=click>
<h5>onclick</h5>  
   <ul class="nav">
  <li><a href="http://blogs.sussex.ac.uk/elearningteam/">E-learning team blog</a></li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">User testing <i class="icon-caret-down"></i></a>
    <ul class="dropdown-menu">
        <li><a href="http://en.wikipedia.org/wiki/Card_sorting">Card Sorting</a></li>
        <li class="dropdown-submenu"><a href="https://en.wikipedia.org/wiki/Tree_testing" class="dropdown-toggle" data-toggle="dropdown">Tree tesing</a>
          <ul class="dropdown-menu">
          <li><a href="http://silverbackapp.com/">Silverback</a></li>
          </ul></li></ul></li><li class="dropdown" id="yui_3_9_0_2_1376170439318_161"><a href="#" class="dropdown-toggle" data-toggle="dropdown" id="yui_3_9_0_2_1376170439318_160">Language <i class="icon-caret-down"></i></a>
    <ul class="dropdown-menu">
      <li><a href="lang=en">English (en)</a></li>      
       <li><a href="lang=nl">Nederlands (nl)</a></li>
        <li><a href="lang=he">עברית (he)</a></li>  
        <li><a href"?lang=fa">فارسی (fa)</a></li>
    </ul>
    </li>
  </ul>
</div>

<br class=clear>
<hr>
  
<!-- hover demo -->
<div class=navbar id=hover>
  <h5>hover</h5>
  <ul class="nav">
  <li><a href="http://blogs.sussex.ac.uk/elearningteam/">E-learning team blog</a></li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">User testing <i class="icon-caret-down"></i></a>
    <ul class="dropdown-menu">
        <li><a href="http://en.wikipedia.org/wiki/Card_sorting">Card Sorting</a></li>
        <li class="dropdown-submenu"><a href="https://en.wikipedia.org/wiki/Tree_testing" class="dropdown-toggle" data-toggle="dropdown">Tree tesing</a>
          <ul class="dropdown-menu">
          <li><a href="http://silverbackapp.com/">Silverback</a></li>
          </ul></li></ul></li><li class="dropdown" id="yui_3_9_0_2_1376170439318_161"><a href="#" class="dropdown-toggle" data-toggle="dropdown" id="yui_3_9_0_2_1376170439318_160">Language <i class="icon-caret-down"></i></a>
    <ul class="dropdown-menu">
      <li><a href="lang=en">English (en)</a></li>      
       <li><a href="lang=nl">Nederlands (nl)</a></li>
        <li><a href="lang=he">עברית (he)</a></li>  
        <li><a href"?lang=fa">فارسی (fa)</a></li>
    </ul>
    </li>
  </ul>
</div>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .clear { clear:both }
#hover .dropdown:hover > ul.dropdown-menu,
#click .dropdown-toggle:focus + ul.dropdown-menu{
  display:block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var linkys = document.getElementsByClassName('dropdown-toggle');
for (var i = 0; i < linkys.length; ++i) {
  linkys[i].onclick = function(e) {
    //if this isn't an http/https link
    this.focus(); 
    e.preventDefault();
  };
}

// for old browsers you might need a polyfill https://www.google.co.uk/search?q=getElementsByClassName+polyfill
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................