title: Button Accordion (CSS)
body: <p>I'm currently working on a group project to create an open-source route planner using the API provided by Graphhopper.</p>
  
  <p>We have an input panel on the left like most map APIs (see Google Maps/Graph Hopper) and we currently have a panel at the top which allows the user to change what vehicle type they're using (i.e car/lorry/walking) and on that navigation bar we have to have a settings button which creates a drop down which includes further preferences that can be determined.</p>
  
  <p>I'm struggling to create CSS where when the button is hovered over, the accordion opens and the preferences are displayed for the user, once it's moved off, it'll hide again.</p>
  
  <p>Here is my current html for the panel:</p>
  
  <pre><code>&lt;div id="options"&gt;
                  &lt;div id="vehicles"&gt;&lt;/div&gt;
                  &lt;div id="preferences"&gt;
                      &lt;button title="Settings" id="settings-btn"&gt;
                          &lt;img src="img/settings.png" alt="Settings"&gt;
                      &lt;/button&gt;
                      &lt;form&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Traffic Signals&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt; &lt;!--center table rows in css!--&gt;
                                  &lt;td&gt;
                                      Avoid &lt;input type="range" name="signals" min="0" max="3" value ="3"&gt; Permit
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Road Preference&lt;/th&gt;
                              &lt;/tr&gt;   
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;input type="radio" name="road-type" value="0" checked&gt;Default
                                      &lt;input type="radio" name="road-type" value="1"&gt;Main
                                      &lt;input type="radio" name="road-type" value="2"&gt;Residential
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Motorway Preference&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt; 
                                  &lt;td&gt;
                                      &lt;input type="radio" name="motorways" value="0" checked&gt;Default
                                      &lt;input type="radio" name="motorways" value="1"&gt;Avoid
                                      &lt;input type="radio" name="motorways" value="2"&gt;Prefer
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;!--
                      - Traffic Signals now operate between 0 and 3 (4 variations)
                          The default value is 3, permitting traffic lights
                          2 is weak avoidance
                          1 is medium avoidance
                          0 is strong avoidance
  
                      - Road Preference (Default: 0, Main:1 Residential:2 )
  
                      - Motorway Preference (Default: 0, Avoid: 1 Prefer: 2)
  
                      Then add an extra button to choose (or get) shortest way
                      Note: If user choose shortest way, it will ignore other factors(traffic Signals, main road, motorway)
                      --&gt;
                  &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Currently, I don't know how to do it so it's just the button hover over to display but here is the css which, when the entire bar is hovered over, will display the settings:</p>
  
  <pre><code>#options {
  background-color: #232323;
  color: #FFFFFF;
  float: left;
  width: 285px;
  overflow:hidden;
  height: 32px;
  transition: height 0.5s
  }
  #options:hover {
  height: 225px;
  }
  #settings-btn {
  width: 50px;
  height: 32px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  background-color: #232323;
  border-radius: 0px;
  border-style: none;
  outline:none;
  float:right;
  }
  </code></pre>
  
  <p>Essentially, all I want to do is apply the changes to options by using :hover on the settings-btn instead of hovering on options.</p>