Html 是否有办法将下拉菜单置于导航栏li下方的中心？

我试图在css中的水平导航项下创建一个下拉菜单。它可以工作，但我希望它集中在父菜单项下，在本例中是“服务”。这就是它的现状。我试着给它一个宽度，然后做边距：auto，但那不起作用。[更新：这是我的JSFIDLE:

CSS:

HTML:

/*这里有更多的东西，比如页眉、主视图、侧视图和页脚*/

您好，请尝试以下代码：

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>

        </ul>
    </nav>

</div>

css:

/* CSS Document */

body {
    background: #212121;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }


#container {
    margin: 0 auto;
}


nav {
    margin: 50px 0;
    background-color: #E64A19;
}

nav ul {
    padding: 0;
  margin: 0;
    list-style: none;
    position: relative;
    }

nav ul li {
    display:inline-block;
    background-color: #E64A19;
    }

nav a {
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}

nav a:hover { 
    background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; 
    top: 60px; /* the height of the main nav */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
  text-align:center;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}


/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

css:
/*CSS文档*/
身体{
背景:#212121 ;；
字体大小：22px；
线高：32px；
颜色：#ffffff；
单词包装：打破单词！重要；
字体系列：“开放式Sans”，无衬线；
}
#容器{
保证金：0自动；
}
导航{
利润率：50px0；
背景色：#E64A19；
}
导航ul{
填充：0；
保证金：0；
列表样式：无；
位置：相对位置；
}
李国荣{
显示：内联块；
背景色：#E64A19；
}
导航a{
显示：块；
填充：0 10px；
颜色：#FFF；
字体大小：20px；
线高：60px；
文字装饰：无；
}
导航a:悬停{
背景色：#000000；
}
/*默认情况下隐藏下拉列表*/
导航ul{
显示：无；
位置：绝对位置；
顶部：60px；/*主导航的高度*/
}
/*悬停时显示下拉列表*/
导航ul li：悬停>ul{
显示：继承；
}
/*第一层下拉列表*/
李国宝{
宽度：170px；
浮动：无；
显示：列表项；
位置：相对位置；
文本对齐：居中；
}
/*第二层、第三层和更多层*/
李国宝{
位置：相对位置；
顶部：-60px；
左：170px；
}
/*更改此项以更改下拉符号*/
li>a:在{content:'+'；}之后
li>a:独生子：{content:''；}之后

尝试将此设置左移到

16%

宽度

1024

@media only screen and (max-width: 1024px)
nav ul ul {
    position: absolute;
    top: 100%;
    left: 16%;
    display: none;
    text-align: center;
    background: #24425a;
}

---

欢迎使用stack overflow，请提供最小工作代码，以便我们可以帮助您了解最小工作代码有多小？整个过程有点长…它不工作。我正在尝试将其居中放置在水平导航下。这有助于显示整个代码吗？您希望导航容器居中对齐吗？

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>

        </ul>
    </nav>

</div>

css:

/* CSS Document */

body {
    background: #212121;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }


#container {
    margin: 0 auto;
}


nav {
    margin: 50px 0;
    background-color: #E64A19;
}

nav ul {
    padding: 0;
  margin: 0;
    list-style: none;
    position: relative;
    }

nav ul li {
    display:inline-block;
    background-color: #E64A19;
    }

nav a {
    display:block;
    padding:0 10px; 
    color:#FFF;
    font-size:20px;
    line-height: 60px;
    text-decoration:none;
}

nav a:hover { 
    background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; 
    top: 60px; /* the height of the main nav */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
  text-align:center;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}


/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

@media only screen and (max-width: 1024px)
nav ul ul {
    position: absolute;
    top: 100%;
    left: 16%;
    display: none;
    text-align: center;
    background: #24425a;
}