title: CSS Child Menu LI Forcing Parent's Width to Increase
body: <p>So I know almost exactly what I need to do, but I don't know <em>how</em> I need to do it.</p>
  
  <p>I have a drop down menu that opens when you hover over it. The child is causing the width of the parent to increase when you hover over it and that is not what I want. I know I need to set the child to position absolutely... but when I do it the child no longer shows up and it appears the hover on the parent no longer functions. Can anyone help figure out where exactly the absolute position part needs to go in? You can see I have something that I commented out.</p>
  
  <p>I'd like the child to be aligned at the bottom right of the "Action" drop down.</p>
  
  <p>I also have a problem where if I set the padding / margin on the parent. It extends to child. I believe I can solve that either with the absolute positioning, or after that is solved.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;br /&gt;
  &lt;div style="width: 90%; margin:auto; background-color:#CCC; height:36px;"&gt;
  &lt;div id="actions"&gt;
      &lt;ul&gt;
          &lt;li class="action_arrow_down"&gt;&lt;a href="#"&gt;Actions&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li class = "separated_action"&gt;&lt;a href="#"&gt;Separated Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And my CSS:</p>
  
  <pre><code>html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  }
  
  #actions {
  float: right;
  display: block;
  background-color: #4d90fe;
  color: #FFF;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  }
  
  #actions ul{
  padding: 0px;
  margin: 0px;
  display: block;
  position: relative;
  overflow: hidden;
  }
  
  #actions li ul {
  display: none;
  background-color: #ffffff;
  border: #CCC 1px solid;
  /*position:absolute;
  top:100%;
  left:0;*/
  
  }
  
  #actions li ul li {
      display: block;
  background-color: #ffffff;
  color: #000000; 
  overflow: hidden;
  }
  
  #actions li ul li:hover, #actions li ul li a:hover {
  background-color: #eeeeee;
  }
  
  #actions li ul li a {
  color: #000000; 
  }
  
  #actions li{
  line-height: 36px;
  list-style: none;   
  font-size: 14px;
  text-indent: 15px;
  }
  
  #actions li:not(ul li){
  background-color: #4d90fe;
  }
  
  #actions li:not(ul li):hover {
  background-color: #0362fd;  
  }
  
  #actions li:hover &gt; ul {
  display: block;
  }
  
  #actions li a {
  text-decoration: none;
  color: #ffffff;
  display:block;
  }
  
  #actions li ul li {
  display: block; 
  }
  
  .separated_action {
  border-top: #CCC 1px solid; 
  }
  
  /*.action_arrow_down {
  background-image: url('images/action_arrow_down.png');
  background-repeat: no-repeat;
  background-position: right center;
  }*/
  </code></pre>
  
  <p>The code is probably very convoluted and could use some cleaning up. I'll remove redundant parts once I get the sub menu working how I want. </p>
  
  <p>Here is a <a href="http://jsfiddle.net/u7yQa/" rel="nofollow">jsfiddle</a>.</p>