下拉菜单项遍布空白区

Question

我正在寻找创建一个下拉菜单，其中顶级菜单项分布在整个页面宽度上，左边的一个对齐到左边，右边的一个对齐到右边并且中间的项目分布在第一个和左侧菜单项之间的空白区域中。

我知道如何通过固定宽度执行此操作，例如，如果有5个菜单项，则菜单项1占用页面宽度的20％。

但是我需要为作业完成的外观需要在每个菜单项之间具有相同数量的填充，无论它们有多少个字符。菜单项长度为4到20个字符。

我在想UL上的显示表，LI元素上的Display Table-Cell会创建我想要的外观，但它不会识别任何宽度。菜单将始终与放在一起的每个菜单项一样宽。如果我在每个菜单项之间添加15 px的填充，菜单将始终是所有菜单项的宽度加上每个菜单项之间的15 px填充，并且永远不会延伸到整个页面。

从哪里开始设计这样的菜单？它也必须能够工作，但其中有许多菜单项。

编辑：

以下是当前代码的示例：

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 {
	font-family: 'Open Sans', sans-serif;
	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 {
	margin-left:27px;
	margin-right:27px;
}

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

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

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

.navMenu li a:link,.navMenu li a:visited {
	display:table-cell;
	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;
}

.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;
}

<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;
}