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

Question

我正在尝试在CSS的水平导航项下创建一个下拉菜单。它可以工作，但是我希望它位于父菜单项（在本例中为“服务”）的下方。这是它的当前状态。我试着给它一个宽度并做margin：auto，但这没用。 [更新：这是我的jsfiddle： https://jsfiddle.net/7othf8z2/#&togetherjs=a10GMrJQcD

CSS：

body{
      font-family: Arial, Verdana, sans-serif;
      background: #24425a;
    }
#wrapper{
             background: #a4c1da;
             color: #172E40;
             width: 80%;
             margin: auto;
             grid-template-columns: 170px 1fr 217px;
             grid-template-rows: 200px auto 50px;
        }
nav {  background: #24425a;  
       padding: 0.05em 0.25em;
       position: relative;
       grid-row: 2/3;
       grid-column: 1/3;
} 
nav ul {
            text-align: center;
       }
nav ul ul { 
            position: absolute; 
            top: 100%;
            left: 21%;
            display: none; 
            text-align: center;
            background: #24425a;
          }

nav li:active ul { display: block;}
nav li { 
      display: inline-block;
       }
nav a:link{
            color: #fff;
          }
nav a:active{
                text-shadow: .05em .05em .05em #fff;
            }
nav a:visited{
                color: #CDDAE5;
             }

HTML：

<div id="wrapper">
/*more stuff goes here like header, main, aside, footer*/
<nav>
   <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="services.html">Services</a>
   </ul>
   <ul>
      <li><a href="postpartum.html">Postpartum</a></li>
      <li><a href="depression.html">Anxiety</a></li>
   </ul>
   <ul>
      </li>
      <li><a href="appointments.html">Appointments</a></li>
      <li><a href="qualifications.html">Qualifications</a></li>
      <li><a href="resources.html">Resources</a></li>
   </ul>
</nav>
</div>

Answer 1

嗨，请尝试以下代码：

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

Answer 2

尝试将此设置留给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;
}