Как сделать выпадающее меню работать правильно?

Question

Я пытаюсь сделать выпадающее меню, которое появляется влево, но не только первый всплывающий всплывающий снимок слева, но верхняя часть не выравнивается с соответствующим элементом, который имеет drop down.

И остальное выпадение перекрывает сверху друг друга. Не только это, но я хочу, чтобы ширина «Момента» была такой же, как и выпадающая.

HTML-код:

    <nav class="submenu" id="submenu"> 
       <ul class="submenu"> 
       <li id="main"><a href="main-index.html" title="Main">Main</a></li> 
       <li id="opinions"><a href="opinions.html" title="Opinion Page">Opinions</a></li> 
       <li id="characters"><a href="table.html" title="Character Sheet">Characters</a></li> 
       <li id="quotes"><a href="dl.html" title="Quotes">Quotes</a></li> 
       <li id="moments"><a href="/" onclick="return false;" title="Crowning Moments">Moments</a> 
        <ul class="submenu"> 
         <li id="funny_moment"><a href="funny.html" title="Moments of Funny">Funny</a></li> 
         <li id="tearjerker_moment"><a href="tearjerker.html" title="Moments of Tearjerker">Tearjerker</a></li> 
         <li id="awesome_moment"><a href="heartwarming.html" title="Moments of Heartwarming">Heartwarming</a></li> 
         <li id="heartwarming_moment"><a href="awesome.html" title="Moments of Awesome">Awesome</a></li> 
         <li id=""><a href="/" onclick="return false;" title="Other Moments">Other</a> 
          <ul class="submenu"> 
           <li><a href="/" onclick="return false;" title="Fridge">Fridge</a> 
            <ul class="submenu"> 
             <li id="fridge_logic"><a href="/" onclick="return false;" title="Fridge Logic">Logic</a></li> 
             <li id="fridge_brilliance"><a href="/" onclick="return false;" title="Fridge Brilliance">Brilliance</a></li> 
             <li id="fridge_horror"><a href="/" onclick="return false;" title="Fridge Horror">Horror</a></li> 
             <li id="fridge_heartwarming"><a href="/" onclick="return false;" title="Fridge Heartwarming">Heartwarming</a></li> 
            </ul> 
           </li> 
           <li><a href="/" onclick="return false;" title="Fuels">Fuel</a> 
            <ul class="submenu"> 
             <li id="fuel_nightmare"><a href="/" onclick="return false;" title="Nightmare Fuel">Nightmare</a></li> 
             <li id="fuel_nausea"><a href="/" onclick="return false;" title="Nausea Fuel">Nausea</a></li> 
             <li id="fuel_fetishism"><a href="/" onclick="return false;" title="Fetishism Fuel">Fetishism</a></li> 
            </ul> 
           </li> 
           <li><a href="/" onclick="return false;" title="Fails">Fail</a> 
            <ul class="submenu"> 
             <li id="fail_nightmare"><a href="/" onclick="return false;" title="Nightmare Fail">Nightmare</a></li> 
             <li id="fail_nausea"><a href="/" onclick="return false;" title="Nausea Fail">Nausea</a></li> 
             <li id="fail_fetishism"><a href="/" onclick="return false;" title="Fetishism Fail">Fetishism</a></li> 
            </ul> 
           </li> 
           <li id="scene"><a href="/" onclick="return false;" title="Scene">Scene</a></li> 
           <li id="awesome_music"><a href="/" onclick="return false;" title="Awesome Music">Awesome Music</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

А код CSS:

/***** div *****/ 
.menu { 
    margin: auto; 
} 

/***** submenu *****/ 
#menu { 
    font-family: "Courier New", Courier, monospace; 
    font-size: 1.1em; 
    list-style-type: none; /*bullet removel*/ 
    list-style: none; /*bullet removel*/ 
    text-decoration: none; /*bullet removel*/ 
    padding-bottom: 1.1em; 
} 

ul.submenu { 
    width: 80%; 
    margin: auto; 
    text-align:center; 
} 

ul.submenu li { 
    display: inline; 
    position: relative; 
    margin-top: 3px; 
} 

#moments li { 
    width: 241px; 
} 

ul.submenu li a { 
    padding: 5px 8px; 
    display: inline-block; 
    color: #000000; 
    background-color: #fdfdfa; 
    border: 2px solid #dab175; 
    border-radius: 7.5px; 
    -moz-border-radius: 7.5px; 
    -webkit-border-radius: 7.5px; 
    transition: all 0.1s; 
} 

ul.submenu li:hover > a { 
    color: #000000; 
    background-color: #fdfdfa; 
    border: 2px solid #955e33; 
    border-radius: 7.5px; 
    -moz-border-radius: 7.5px; 
    -webkit-border-radius: 7.5px; 
} 

/***** Drop-Down submenu *****/ 
ul.submenu li:hover > ul { 
    visibility:visible; 
    opacity:1; 
} 

ul.submenu ul, ul.submenu ul li ul { 
    margin: 0; 
    padding: 0;  
    visibility:hidden; 
    position: absolute; 
    z-index: 99999; 
    width: inherit; 
    opacity:0; 
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;  
} 

ul.submenu ul { 
    position: absolute; 
    left: 0px; 
} 

#moments { 
    width: 241px; 
} 

ul.submenu ul li ul { 
    position: absolute; 
    left: -240px; 
} 

ul.submenu ul li a { 
    padding:5px 8px; 
    color:#000000; 
    text-decoration:none; 
    display:inline-block; 
    float:right; 
    width:220px; 
} 

ul.submenu ul li ul li a { 
    float: right; 
    right: 0; 
    top: 0; 
} 

ul.submenu ul li { 
    clear:both; 
    width:100%; 
    border:0 none; 
    border-bottom:1px solid #c9c9c9; 
} 

ul.submenu ul li ul li a:hover { 
    float: right; 
    left: 0; 
    top: 0; 
} 

Answer 1

Ну, чтобы сделать пункт Моменты же размера, как выпадающего списка вы, вероятно, сделать somehting как:

#moments { 
    width: 241px; 
} 

Чтобы избавиться от перекрытия, вы можете добавить немного поля в элементы li:

ul.submenu li { 
    display: inline; 
    position: relative; 
    margin-top: 3px; 
} 

И что Тугулдур сказал для другой части.

Answer 2

Работает нормально. Но 250px был статичным.

.ul li ul{ 
    position: absolute; 
    left: 250px; 
} 

замените свои .ul li ul {} стилей.