title: Increase submenu width
body: <p>I stuck with my submenu dropdown menu... I need increase width of my submenu but i can´t because it increase the menu to and the submenu... they are dependent and i need them independent</p>
  
  <pre><code>.fancyNav{
  /* Affects the UL element */
  overflow: hidden;
  display: inline-block;
  z-index:999;
  }
  .fancyNav li{
  /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
  
   background: #CCC;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     filter: alpha(opacity=10);
     opacity:.7;
  
  border-right: 1px solid rgba(0, 0, 0, 1);
  
  /* Adding a 1px inset highlight for a more polished efect: */
  
  
  
  position:relative;
  
  float: left;
  list-style: none;
  }
  
  .fancyNav li:after{
      content:'.';
  text-indent:-9999px;
  overflow:hidden;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0; 
  opacity:0;
  z-index:1;
  /* Gradients! */
  
  background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
  
  background-image:-moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,1) 100%, rgba(255,255,255,1));
  
  background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
  
  /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
  
  box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
  
  /* This will create a smooth transition for the opacity property */
  
  -moz-transition:0.25s all;
  -webkit-transition:0.25s all;
  -o-transition:0.25s all;
  transition:0.25s all;}
  
  /* Treating the first LI and li:after elements separately */
  
  
  
  .fancyNav li:first-child:after,
   .fancyNav li.selected:first-child:after{
  box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  
  -moz-transition:0.25s all;
  -webkit-transition:0.25s all;
  -o-transition:0.25s all;
  transition:0.25s all;}
  
   /* Treating the first LI and li:after elements separately */
  
  
  
  .fancyNav li:first-child:after,
  .fancyNav li.selected:first-child:after{
  box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
  
  }
  
  .fancyNav li:last-child{
  }
  
  /* Treating the last LI and li:after elements separately */
  
  .fancyNav li:last-child:after,
  .fancyNav li.selected:last-child:after{
  box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
  }
  .fancyNav li:hover:after,
  .fancyNav li.selected:after,
  .fancyNav li:target:after{
  /* This property triggers the CSS3 transition */
  opacity:1;
   }
  
  .fancyNav:hover li.selected:after,
  .fancyNav:hover li:target:after{
  /* Hides the targeted li when we are hovering on the UL */
  opacity:0;
  }
  .fancyNav li.selected:hover:after,
  .fancyNav li:target:hover:after{
  opacity:1 !important;
  
  }
  /* Styling the anchor elements */
  .menudiv{
  position:fixed;
  z-index:999;
  width:951px;
  margin-left:-476px;
  left:50%;
  }
  .menlog{
  padding-left:15px;
  padding-right:15px;
  
  }
  .menlog2{
  padding:12px 15px 15px;
  
  }
  .corrente{
     background-color:white;
  padding:12px 15px 15px;
  }
  .corrente3{
  }
  .fancyNav li a{
  color: #000000;
  display: inline-block;
  position: relative;
  z-index:2;
  text-decoration:none !important;
  white-space:nowrap;
  
  }
  .fancyNav a.homeIcon{
  background:url('../img/home.png') no-repeat center center;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  }
  
  
  nav{
  display: block;
  text-align: center;
  
  }
  a, a:visited {
  text-decoration:none;
  outline:none;
  color:#54a6de;
  }
  a:hover{
  text-decoration:underline;
  }
  </code></pre>
  
  <p>the submenu code is that</p>
  
  <pre><code>ul ul li{
      float:none !important;
  display: block;
  padding: 2px;
  }
  ul ul{
  display:none;
  position:relative;    /* updated */
  z-index:2;            /* updated */
  }
  ul li:hover ul{
  display:block;
  }
  </code></pre>
  
  <p>HTML Code,</p>
  
  <pre><code>&lt;nav&gt;&lt;ul class="fancyNav"&gt;
  &lt;li id="quemsomos" class="menlog"&gt;&lt;a href="index.php"&gt;&lt;img src="imgs/Logo.png"  width="37" height="45" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li id="quemsomos"&gt;&lt;a href="quemsomos.php?web=1"&gt;&lt;font face="din" size="4"&gt;QUEM SOMOS&lt;/font&gt;&lt;/a&gt;
  
    &lt;!--start of sub menu--&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Test DropDown&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Test DropDown&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Test DropDown&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;!--end of sub menu--&gt;
  
  &lt;/li&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Thanks</p>