title: Wordpress menu structure change in css file
body: <p>I have used the wordpress twenty eleven theme for my website. Now i want to crate a dropdown menu for my site. By default wordpress have the dropdown menu facility. Now when i hover on the main menu i got the sub-menu part. For example :-</p>
  
  <p>I have a main menu like :-
   Home | About | Contact</p>
  
  <p>When i hover on the about menu it show the sub menus of "about" menu like </p>
  
  <p>Home | About | Contact</p>
  
  <pre><code>   Our Services
  
     History
  
     Our Staff
  </code></pre>
  
  <p>when i hover on the history menu it display the sub menu of History Menu like bellow:-</p>
  
  <p>Home | About | Contact</p>
  
  <pre><code>   Our Services
  
     History
  
        History 1
        History 2
        History 3
  
     Our Staff
  </code></pre>
  
  <p>but i want to display the submenu of History, when i hover on About menu. If i hover on the  About menu it should display like bellow :-</p>
  
  <p>Home | About | Contact</p>
  
  <pre><code>   Our Services
  
     History
  
        History 1
        History 2
        History 3
  
     Our Staff
  </code></pre>
  
  <p>Please help me to get the output in the wordpress menu.</p>
  
  <pre><code>#access {
    background: #00ADEE; /* Show a solid color for older browsers */
    clear: both;
    display: block;
    width: 915px;
  }
  #access ul {
    font-size: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #access li {
    float: left;
    position: relative;
  }
  #access a {
    color: #eee;
    display: block;
    line-height: 12px;
    padding: 4px 9px; 
    text-decoration: none;
    background: url(images/menu-border.png);
    background-position: right 6px;
    background-repeat: no-repeat;
    text-transform: lowercase;
  }
  #access ul ul {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    left: 11px;
    width: 252px;
    z-index: 99999;
    background: #FFFFFF;
    padding: 0 4px;
    border: 1px solid #00AEEF;
  }
  #access ul ul li {
  }
  #access ul ul ul {
    left: 23%;
    top: 0;
    border: none;
    width: 150px;
  }
  #access ul ul ul li{
    border: none;
    width: 112px;
    background:url(images/list.png);
    background-position: 0 10px;
    background-repeat: no-repeat;
    background-color: #FFF;
    width: 185px;
  }
  #access ul ul ul a{
    border: none;
    background: transparent;
  }
  .sub-menu .menu-item-object-custom a:hover{
    height: 40px;
  }
  #access ul ul a {
    border-bottom: 1px solid #BCBEC0;
    color: #000;
    font-size: 10px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 5px 7px;
    width: 237px;
  }
  #access li:hover &gt; a,
  #access ul ul :hover &gt; a,
  #access a:focus {
    color: #000;
  }
  
  #access ul ul  &gt; a {
    color: #000;
  }
  
  #access li:hover &gt; a,
  #access a:focus {
    color: #FFFFFF;
  }
  #access ul li:hover &gt; ul {
    display: block;
  }
  #access ul ul  .current_page_item &gt; a {
    color: #00ADEE;
    font-weight: bold;
  }
  #access .current-menu-item &gt; a,
  #access .current-menu-ancestor &gt; a,
  #access .current_page_item &gt; a,
  #access .current_page_ancestor &gt; a {
    color: #FFFFFF;
  }
  </code></pre>