title: Making my drop-down menus accessible when only using the keyboard
body: <p>At the moment my dropdown menus only appear when the user rolls over them.</p>
  
  <p>I would like it so if you pressed the TAB key the drop down would appear in the same way</p>
  
  <p>My menu is based on the following tutroial:</p>
  
  <p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/</a></p>
  
  <p>The only thing I have updated code wise is the style in CSS</p>
  
  <p>Below is a section of my menu:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;ul id="menu"&gt;
  
      &lt;li&gt;&lt;a href="about-us.php" class="drop"&gt;About us&lt;/a&gt;
              &lt;div class="dropdown_1column align_left"&gt;
                   &lt;div class="col_1"&gt;
                        &lt;ul class="simple"&gt;
                            &lt;li&gt;&lt;a href="why-choose-us.php"&gt;Why choose us&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="our-office.php"&gt;Our office&lt;/a&gt;&lt;/li&gt;
                         &lt;/ul&gt;   
                    &lt;/div&gt;
                &lt;/div&gt;
      &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="how-we-help.php" class="drop"&gt;How we help&lt;/a&gt;
       &lt;div class="dropdown_2columns align_left"&gt;
            &lt;div class="col_2"&gt;
                 &lt;h3 class="link-menu-title"&gt;&lt;a href="#"&gt;Technology&lt;/a&gt;&lt;/h3&gt;
                     &lt;ul&gt;
                         &lt;li&gt;&lt;a href="dynamic-purchasing.php" style="width:270px;"&gt;Dynamic purchasing with Matrix&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="process.php"&gt;Process&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="interfacing.php"&gt;Interfacing&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="implementation.php"&gt;Implementation&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;   
               &lt;/div&gt;
  
         &lt;div class="col_2"&gt;
                   &lt;h3 class="link-menu-title"&gt;&lt;a href="#"&gt;Professional Support Services&lt;/a&gt;&lt;/h3&gt;
                       &lt;ul&gt;
                           &lt;li&gt;&lt;a href="discovery.php"&gt;Discovery&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="account-management.php"&gt;Account management&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="business-management.php" style="width:270px;"&gt;Business management&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="supplier-management.php"&gt; Supplier management&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;   
                      &lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/li&gt;
  
          &lt;/ul&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>#menu li.menu-icon:hover {
      background-color:#212121;
      border:0px;
  }
  
  
  a#home span {
      position: absolute;
      top: -999em;
  }
  
  #menu {
      list-style:none;
      width:730px;
      margin:0px auto 0px auto;
      height:73px;
  
  
      /* Background color and gradients */
  
  
  
      /* Borders */
  
      border: 0px solid #002232;
  }
  
  #menu li {
      float:left;
      display:block;
      text-align:center;
      position:relative;
      padding: 4px 0px 4px 0px;
      margin-right:12px;
      margin-top:25px;
      border:none;
  
  
  }
  
  #menu li:hover {
      border: 1px solid #11A7E6;
      padding: 4px 0px 4px 0px;
  
      /* Background color and gradients */
  
      background: #11A7E6;
  
  
      /* Rounded corners */
  
      -moz-border-radius: 5px 5px 0px 0px;
      -webkit-border-radius: 5px 5px 0px 0px;
      border-radius: 5px 5px 0px 0px;
  
  }
  
  #menu li a {
      font-family:Arial, Helvetica, sans-serif;
      font-size:15px;
      font-weight:bold;
      color: #FFFFFF;
      display:block;
      outline:0;
      text-decoration:none;   
  }
  
  .medium #menu li a {
      font-size:16px;
  }
  
  .large #menu li a {
      font-size:20px;
  }
  
  .medium #menu li .drop, .large #menu li .drop {
      padding-right: 0px;
  }
  
  #menu li:hover a {
      color:#ffffff;
      text-shadow: 1px 1px 1px #000000;
  
  }
  #menu li .drop {
      padding-right:8px;
  }
  #menu li:hover .drop {
      padding-right:3px;
      padding-left:3px;
  }
  
  .dropdown_1column, 
  .dropdown_2columns, 
  .dropdown_3columns, 
  .dropdown_4columns,
  .dropdown_5columns {
      margin:4px auto;
      float:left;
      position:absolute;
      left:-999em; /* Hides the drop down */
      text-align:left;
      padding:10px 5px 10px 5px;
      border-top:10px solid #11A7E6;
  
      /* Gradient background */
      background:#2D2D2D;
  
  
      /* Rounded Corners */
      -moz-border-radius: 0px 5px 5px 5px;
      -webkit-border-radius: 0px 5px 5px 5px;
      border-radius: 0px 5px 5px 5px;
  
  }
  
  .dropdown_1column {width: 140px;}
  .dropdown_2columns {width: 280px;}
  .dropdown_3columns {width: 420px;}
  .dropdown_4columns {width: 560px;}
  .dropdown_5columns {width: 700px;}
  
  #menu li:hover .dropdown_1column, 
  #menu li:hover .dropdown_2columns, 
  #menu li:hover .dropdown_3columns,
  #menu li:hover .dropdown_4columns,
  #menu li:hover .dropdown_5columns {
      left:-1px;
      top:auto;
  }
  
  .col_1,
  .col_2,
  .col_3,
  .col_4,
  .col_5 {
      display:inline;
      float: left;
      position: relative;
      margin-left: 5px;
      margin-right: 5px;
  }
  .col_1 {width:130px;}
  .col_2 {width:270px;}
  .col_3 {width:410px;}
  .col_4 {width:550px;}
  .col_5 {width:690px;}
  
  
  #menu .menu_right {
      float:right;
      margin-right:0px;
  }
  #menu li .align_right {
      /* Rounded Corners */
      -moz-border-radius: 5px 0px 5px 5px;
      -webkit-border-radius: 5px 0px 5px 5px;
      border-radius: 5px 0px 5px 5px;
  }
  
  #menu li:hover .align_right {
      left:auto;
      right:-1px;
      top:auto;
  }
  
  #menu p, #menu h2, #menu h3, #menu ul li {
      font-family:Arial, Helvetica, sans-serif;
      color:#FFFFFF;
      line-height:21px;
      font-size:12px;
      text-align:left;
      text-shadow: 1px 1px 1px #000000;
  
  }
  #menu h2 {
      font-size:21px;
      font-weight:400;
      letter-spacing:-1px;
      margin:7px 0 3px 0;
      padding-bottom:3px;
      border-bottom:1px solid #666666;
  
  }
  #menu h3 {
      font-size:14px;
      margin:7px 0 3px 0;
      padding-bottom:3px;
      border-bottom:1px solid #666666;
  
  }
  
  
  #menu p {
      line-height:18px;
      margin:0 0 30px 0;
  
  }
  
  #menu li:hover div a {
      font-size:12px;
      color:#0ea4e3;
      padding-bottom:2px;
  }
  
  .medium #menu li:hover div a {
      font-size:15px;
  }
  
  .large #menu li:hover div a {
      font-size:19px;
  }
  
  #menu li:hover div h2.link-menu-title a{
      font-size:14px;
      font-weight:bold;
      color:#FFF;
  }
  
  #menu li:hover div h3.link-menu-title a{
      font-size:14px;
      font-weight:bold;
      color:#FFF;
  }
  
  .medium #menu li:hover div h3.link-menu-title a{
      font-size:17px;
  }
  
  .large #menu li:hover div h3.link-menu-title a{
      font-size:21px;
  }
  
  
  #menu li:hover div a:hover {
      color:#fff;
      background-color: #474747;
  
  
  }
  </code></pre>