下拉始终对齐中心

Question

根据父标记，我必须使下拉列表始终对齐居中。任何帮助将不胜感激。

示例如下：

Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/

Answer 1

您可以这样做：

＆＃13;

＆＃13;

#menu {
    border-bottom: 1px solid #DDD; 
    color: #fff;
    display: block;
    float: right;
    height: 18pt;
    line-height: 18pt;
    list-style-type: none;
    text-transform: uppercase;
    width: 100%;
    font-size:14px;
    position:absolute;  
}

#menu > li{
    background-color: #003399;
    border: 1px solid #DDD;
    margin-top:-1px;
    float: right;
    position: relative;
    margin-left: 1%;
    padding-left: 2%;
    padding-right: 2%;
}

#menu li:hover {
    opacity: 0.8;
}



#menu li .wrapper .submenu {
    display: block;
    margin-left: 50%;
    width:100%;
}

#menu li .wrapper {
    display: block;
    position: absolute;
    top: 19pt;
    right: 50%; /*this will center the div*/
    white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
    display: block;
}

.submenu li {
    display: inline-block;
    padding-left: 1.5%;
    white-space: nowrap;
    opacity: 0.7;
}
.submenu li a {
    padding-right: 3%;
    padding-left: 3%;
    background-color: #000;
    display: inline-block;
}


#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}
#menu li.topmenu {
  float:left;
}


.topmenu a {
  float:left;
  width:110px;
  text-align:center;
  color:#C37000;
  padding:1px 5px;
  border-collapse:collapse;
  font-weight:bold;
  text-decoration:none;
  margin:0;  
}

.topmenu ul{
 display:none;
}


.submenu a{
  padding:1px 5px;
  border:1px solid #C37000;
  border-collapse:collapse;
  color:#C37000;
  font-weight:bold;
  text-decoration:none;
  background-color:#7F4800;
  margin:0;
  width:100%;  
}

.submenu a:hover {
  color:#4C4C4C;
  background-color:#ffddbb !important;
}
.topmenu:hover ul {
  display:block;  
  z-index:500;
}

＆＃13;

<ul id="menu">
    <li class="topmenu"><a href="#">Menu 1</a></li>
    <li class="topmenu"><a href="#">Menu 2</a>
    </li>
    <li class="topmenu"><a href="#">Policies</a>
        <div class="wrapper">
            <ul >
                <li class="submenu"><a>Field 1</a></li>
                <li class="submenu"><a>Field 2</a></li>
                <li class="submenu"><a>Field 3</a></li>
                <li class="submenu"><a>Field 4</a></li>
            </ul>
        </div>
    </li>
    <li class="topmenu"><a href="#">Menu 4</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我假设您已将position: absolute应用于下拉列表，并将其置于左侧，将left属性设置为策略容器的填充值，如下所示：

nav {
    background: orange;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav > ul > li {
    position: relative;
    top: 0;
    left: 0;
    margin-left: 50px;
}

nav > ul > li > a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    background: green;
}

nav > ul ul {
    background: #eee;
    border: 1px solid #000;
    padding: 10px;
    position: absolute;
    left: -10px;
}

<nav>
    <ul>
        <li><a href="">Policies</a>
            <ul>
                <li><a href="#">Policy 1</a></li>
                <li><a href="#">Policy 1</a></li>
                <li><a href="#">Policy 1</a></li>
                <li><a href="#">Policy 1</a></li>
            </ul>
        </li>
    </ul>
</nav>