Выпадающие элементы меню, разбросанные по пробелу

Question

Я ищу, чтобы создать раскрывающееся меню, в котором пункты меню верхнего уровня распределены по всей ширине страницы, причем левая часть выравнивается влево, справа один из которых выровнен с правой стороны, а промежуточные элементы распределены по пробелу между первым и левым элементами меню.

Я знаю, как это сделать фиксированной шириной, например, пункт меню 1 занимает 20% ширины страницы, если имеется 5 пунктов меню.

Но внешний вид, который мне нужно выполнить для работы, должен иметь одинаковое количество дополнений между каждым пунктом меню независимо от того, сколько у них символов. Элементы меню варьируются от 4 до 20 символов.

Я думал о таблице отображения на UL, а Display Table-Cell на элементах LI создавал бы внешний вид, который я собираюсь, но он не будет распознавать любую ширину. Меню всегда будет таким же широким, как и каждый элемент меню, собранный вместе. Если я добавлю отступы примерно 15 px между каждым пунктом меню, меню всегда будет шириной всех пунктов меню плюс 15 px отступов между ними и никогда не будет растягиваться по всей странице.

С чего начать дизайн такого меню? Он также должен иметь возможность работать, несмотря на то, что в нем много элементов меню.

Edit:

Вот пример текущего кода:

https://jsfiddle.net/RenegadeMonster/hj5unsk9/4/

А вот код CSS, как, видимо, я не могу просто ссылку на jsfiddle без сопровождаемого кода.

$(document).ready(function() { 
 
     $('.navMenu > li').bind('mouseover', openSubMenu); 
 
     $('.navMenu > li').bind('mouseout', closeSubMenu); 
 
     
 
     function openSubMenu() { 
 
      $(this).find('ul').css('visibility', 'visible');  
 
     }; 
 
     
 
     function closeSubMenu() { 
 
      $(this).find('ul').css('visibility', 'hidden'); 
 
     }; 
 
        
 
    });

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
 
body { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t overflow-y:scroll; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; padding: 0; 
 
    display: table; 
 
} 
 

 
.menu-wrapper { 
 
    display:table; 
 
    background:rgba(42,46,38,0.9); 
 
    width: 100%; 
 
    top: 0; 
 
    margin: 0; padding: 0; 
 
} 
 
.nav_menu { 
 
\t margin-left:27px; 
 
\t margin-right:27px; 
 
} 
 

 
.navMenu { 
 
\t display: table-cell; 
 
\t margin:0; 
 
\t padding:0; 
 
\t width:100%; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 
.navMenu ul { 
 
\t display:table; 
 
\t table-layout: fixed; 
 
\t margin-left: -15px; 
 
} 
 

 
.navMenu li { 
 
\t list-style:none; 
 
\t float:left; 
 
\t font:12px Arial,Helvetica,sans-serif #111; 
 
\t display:table-cell; 
 
} 
 

 
.navMenu li a:link,.navMenu li a:visited { 
 
\t display:table-cell; 
 
\t text-decoration:none; 
 
\t margin:0; 
 
\t color:#dfcc9f; 
 
\t font-size:18px; 
 
\t display:block; 
 
\t padding:15px; 
 
} 
 

 
.navMenu li a:hover { 
 
\t color:#fcb713; 
 
\t background-color:#262623; 
 
} 
 
.navMenu li a:active { 
 
\t color:#dfcc9f; 
 
\t border-bottom: solid 4px #262623; 
 
} 
 
a:active { 
 
    background-color: #FF704D; 
 
} 
 

 
/*style the sub menu*/ 
 
.navMenu li ul { 
 
\t position:absolute; 
 
\t visibility:hidden; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.navMenu li ul li { 
 
\t display:inline; 
 
\t float:none; 
 
} 
 

 
.navMenu li ul li a:link,.navMenu li ul li a:visited { 
 
\t background:#312f2a; 
 
/* The Fallback */ 
 
\t background:rgba(49,47,42,0.9); 
 
\t color:#dfcc9f; 
 
\t width:auto; 
 
\t font-size:14px; 
 
} 
 

 
.navMenu li ul li a:hover { 
 
\t background-color:#c1a373; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
      <div class="menu-wrapper"> 
 
       <div class="nav_menu"> 
 
        <ul class="navMenu"> 
 

 
         <li> 
 
          <a id="home" href="#">Home</a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#">Menu Item Number 2</a> 
 

 
          <ul> 
 
           <li> 
 
            <a href="#">Example</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">Example Menu Item 2</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">Monday</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">Friday</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">The Weekend</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">Jimmy Buffet</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 

 
         <li> 
 
          <a href="#">Rock Bands</a> 
 

 
          <ul> 
 
           <li> 
 
            <a href="#">sub menu item 1</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">sub menu item 2</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">sub menu item 3</a> 
 
           </li> 
 

 
           <li> 
 
            <a href="#">sub menu item 4</a> 
 
           </li> 
 
          </ul> 
 
         </li> 
 

 
         <li> 
 
          <a href="#">Event Planner</a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#">Contact The Who</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
     </div>

Answer 1

Пожалуйста проверка скрипку: https://jsfiddle.net/hj5unsk9/14/, я удалил вашу таблицу логики. его не нужно, если вы можете указать ширину в% пунктов меню.

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
body { 
    font-family: 'Open Sans', sans-serif; 
    overflow-y:scroll; 
} 
.wrapper { 
    height: 100%; 
    width: 100%; 
    margin: 0; padding: 0; 
} 

.menu-wrapper { 
    background:rgba(42,46,38,0.9); 
    width: 100%; 
    top: 0; 
    margin: 0; padding: 0; 
} 
.nav_menu { 
    margin:0 
} 

.navMenu { 
    margin:0 -15px; 
    overflow:hidden; 
    width:100%; 
} 

.navMenu ul { 
    display:block; 
} 

.navMenu li { 
    list-style:none; 
    float:left; 
    font:12px Arial,Helvetica,sans-serif #111; 
    display:block; 
    box-sizing:border-box; 
    width:20%; 
    text-align:center 
} 

.navMenu li a:link,.navMenu li a:visited { 
    text-decoration:none; 
    margin:0; 
    color:#dfcc9f; 
    font-size:18px; 
    display:block; 
    padding:15px; 

} 

.navMenu li a:hover { 
    color:#fcb713; 
    background-color:#262623; 
} 
.navMenu li a:active { 
    color:#dfcc9f; 
    border-bottom: solid 4px #262623; 
} 
a:active { 
    background-color: #FF704D; 
} 

/*style the sub menu*/ 
.navMenu li ul { 
    position:absolute; 
    visibility:hidden; 
    margin:0; 
    padding:0; 
    top:72px; 
} 

.navMenu li ul li { 
    display:inline; 
    float:none; 
} 

.navMenu li ul li a:link,.navMenu li ul li a:visited { 
    background:#312f2a; 
/* The Fallback */ 
    background:rgba(49,47,42,0.9); 
    color:#dfcc9f; 
    width:auto; 
    font-size:14px; 
} 

.navMenu li ul li a:hover { 
    background-color:#c1a373; 
}