title: Dropdown menu in SilverStripe
body: <p>I have a dropdown menu in SilverStripe that works although when you hover over the space where the downdown part it shows up when I only want it to show up when you hover over the main menu item. I don't really know if that makes sense. I have included my code so you can maybe see what I mean.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.menu, .menu ul, .menu li, .menu a {
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
  }
  .menu {
      height: 40px;
      width: auto;
      padding: 0;
      margin: 0;
      float: left;
  }
  .menu li {
      position: relative;
      list-style: none;
      float: left;
      display: block;
  }
  
  /* Links 8*/
  .menu li a {
      display: block;
      padding: 0 20px;
      margin: 6px 0;
      line-height: 28px;
      text-decoration: none;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      font-size: 14px;
      color: #f3f3f3;
      -webkit-transition: color .2s ease-in-out;
      -moz-transition: color .2s ease-in-out;
      -o-transition: color .2s ease-in-out;
      -ms-transition: color .2s ease-in-out;
      transition: color .2s ease-in-out;
      text-transform: uppercase;
  }
  .menu li:first-child a {
      border-left: none;
  }
  .menu li:last-child a {
      border-right: none;
  }
  .menu li:hover &gt; a {
      color: #D12D3C;
  }
  .menu li &gt; a:hover {
      color: #D12D3C;
  }
  .menu li &gt; a.current {
      color: #000;
      background-color: #fff;
  }
  .menu li &gt; a.section {
      color: #000;
      background-color: #fff
  }
  
  /* Sub Menu */
  .menu ul {
      position: absolute;
      top: 40px;
      left: 0;
      opacity: 0;
      background: #1f2024;
      text-transform: none;
      text-transform: none;
      -webkit-border-radius: 0 0 5px 5px;
      -moz-border-radius: 0 0 5px 5px;
      border-radius: 0 0 5px 5px;
      -webkit-transition: opacity .25s ease .1s;
      -moz-transition: opacity .25s ease .1s;
      -o-transition: opacity .25s ease .1s;
      -ms-transition: opacity .25s ease .1s;
      transition: opacity .25s ease .1s;
      z-index: 9999;
  }
  .menu li:hover &gt; ul {
      opacity: 1;
  }
  .menu ul li {
      height: auto;
      overflow: hidden;
      padding: 0;
      -webkit-transition: height .25s ease .1s;
      -moz-transition: height .25s ease .1s;
      -o-transition: height .25s ease .1s;
      -ms-transition: height .25s ease .1s;
      transition: height .25s ease .1s;
  }
  .sub-menu li:hover {
      height: auto;
      overflow: visible;
      padding: 0;
  }
  .menu ul li a {
      width: 210px;
      padding: 4px 0 4px 30px;
      margin: 0;
      border: none;
      border-bottom: 1px solid #353539;
  }
  .menu ul li:last-child a {
      border: none;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="large-12 medium-12 header columns"&gt;
      &lt;img src="themes/Connected/images/Connected-banner.png" alt="banner" /&gt;
  &lt;/div&gt;
  &lt;div class="large-12 medium-12 band columns"&gt;
      &lt;ul class="menu"&gt;
          &lt;% control ChildrenOf(Home) %&gt;
          &lt;li&gt;&lt;a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;"&gt;$MenuTitle&lt;/a&gt;
              &lt;% if Children %&gt;
              &lt;ul class="sub-menu"&gt;
                  &lt;!-- Sub Menu --&gt;
                  &lt;% control Children %&gt;
                  &lt;li&gt;&lt;a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML"&gt;$MenuTitle&lt;/a&gt;&lt;/li&gt;
                  &lt;% end_control %&gt;
              &lt;/ul&gt;
              &lt;% end_if %&gt;
          &lt;/li&gt;
          &lt;% end_control %&gt;
      &lt;/ul&gt;
      &lt;img src="/themes/Connected/images/search-icon.png" alt="search-icon" /&gt;
  &lt;/div&gt;
  </code></pre>