将子菜单与父级

Question

我有一个CSS菜单，当鼠标悬停在列表项目上时，它会加载到子菜单中。一切正常，我已经放了一个＆amp; amp;菜单上的课后，以便在它的顶部创建一个箭头。

但我有一个问题，即箭头，正好不在文本的中间，它的＆＃39;相对于。

我的CSS是：

/* Nav
----------------------------------------------------------------------------- */
.navigation {
  background: #6aa7b9;
  border-top-right-radius: 150px;
  height: 52px;
  position: relative;
  z-index: 999;
}
@media (max-width: 767px) {
  .navigation {
    height: 0;
  }
}
.menu-main-menu-container {
  padding-top: 0.8em;
}
@media (max-width: 767px) {
  .menu-main-menu-container {
    padding-top: 0;
  }
}
.main-menu {
  margin: 0;
  padding: 0;
  text-align: right;
}
@media (max-width: 767px), (max-width: 991px), (max-width: 1199px) {
  .main-menu {
    text-align: left;
    display: none;
  }
}
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .main-menu {
    display: block;
    margin: 0;
    padding: 0;
    text-align: right;
    background: none;
  }
}
.menu-item {
  list-style: none;
  display: inline-block;
  margin-right: 3em;
  position: relative;
  padding-bottom: .5em;
  padding-top: 0.5em;
}
.menu-item.current_page_item {
  border-bottom: 5px solid #561f38;
}
.menu-item.current_page_item a {
  color: #561f38;
}
.menu-item.current_page_item ul li a {
  color: #ffffff;
}
.menu-item:last-child {
  margin-right: 0;
}
.menu-item a {
  font-family: freight-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #ffffff;
  font-size: 15px;
}
.menu-item a:hover {
  color: #561f38;
}
.menu-item a span.hover-large {
  position: absolute;
  width: 70px;
  height: 80px;
  z-index: 999;
}
.menu-item ul {
  background: #561f38;
  position: absolute;
  left: -75px;
  top: 56px;
  padding: 0;
  z-index: 99999999;
  width: 215px;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: 500ms ease;
  -moz-transition: 500ms ease;
  -o-transition: 500ms ease;
  transition: 500ms ease;
}
.menu-item ul:after,
.menu-item ul:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.menu-item ul:after {
  border-color: rgba(0, 0, 0, 0);
  border-width: 8px;
  margin-left: -8px;
}
.menu-item ul:before {
  border-color: rgba(232, 238, 234, 0);
  border-bottom-color: #561f38;
  border-width: 14px;
  margin-left: -14px;
}
.menu-item ul li {
  padding-left: 2em;
  padding-right: 2em;
  text-align: left;
  margin-top: 0;
  display: block;
  margin-right: 0;
}
.menu-item ul li.current_page_item {
  background: #fafafb;
  border-bottom: none;
}
.menu-item ul li.current_page_item a {
  font-weight: bold;
  color: #561f38;
}
.menu-item ul li a {
  color: #ffffff;
}
.menu-item ul li:first-child {
  margin-top: 0;
}
.menu-item ul li:hover {
  background: #fafafb;
  border-bottom: none;
}
.menu-item ul li:hover a {
  color: #561f38;
}
.menu-item ul li:hover a:hover {
  text-decoration: none;
}
.menu-item ul li a {
  font-size: 13px;
  color: #ffffff;
  padding: 0.5em;
  display: block;
}
.menu-item ul li:last-child {
  border-bottom: none;
}
.menu-item:hover {
  border-bottom: 5px solid #561f38;
}
.menu-item:hover > ul {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}
@media (max-width: 767px), (max-width: 991px) {
  .main-menu {
    background: #f2f5f6;
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .main-menu:after,
  .main-menu:before {
    bottom: 100%;
    right: 15px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .main-menu:after {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #;
    border-width: 8px;
    margin-left: -8px;
  }
  .main-menu:before {
    border-color: rgba(232, 238, 234, 0);
    border-bottom-color: #e8eeea;
    border-width: 14px;
    margin-left: -14px;
  }
  .menu-item {
    display: block;
    width: 100%;
    padding: 1em;
  }
  .menu-item.current_page_item {
    border-bottom: none;
  }
  .menu-item.current_page_item a {
    color: #eb2328;
  }
  .menu-item.current_page_item ul li a {
    color: #561f38;
  }
  .menu-item a {
    display: block;
    color: #561f38;
  }
  .menu-item a span {
    position: absolute;
    right: 0;
    top: 0;
    width: 37px;
    height: 20px;
    z-index: 999;
  }
  .menu-item a span.hover-large {
    display: none;
  }
  .menu-item a span.chevron-down {
    background: url(../img/icons/icon-arrow-down.png) no-repeat;
  }
  .menu-item a span.chevron-up {
    background: url(../img/icons/icon-arrow-up.png) no-repeat;
  }
  .menu-item ul.sub-menu {
    width: 100%;
    position: relative !important;
    display: none;
    top: 0 !important;
    opacity: 1;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    visibility: visible;
    left: 0;
    background: #f2f5f6;
  }
  .menu-item ul.sub-menu::before {
    display: none;
  }
  .menu-item ul.sub-menu li.current_page_item a {
    color: #561f38;
  }
  .menu-item ul.sub-menu li a {
    color: #561f38;
  }
  .menu-item a {
    color: #561f38;
  }
}
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .main-menu {
    background: none;
    margin: 0;
    padding: 0;
    text-align: right;
  }
}

HTML标记注意：我使用的是Wordpress

<ul id="menu" class="main-menu"><li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-24"><a href="http://localhost/crofton-infants/"><span class="hover-large"></span>Home</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-has-children menu-item-25"><a href="http://localhost/crofton-infants/our-school/"><span class="hover-large"></span>Our School<span class="chevron-down"></span></a>
<ul class="sub-menu">
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://localhost/crofton-infants/our-school/staff/"><span class="hover-large"></span>Staff</a></li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost/crofton-infants/our-school/governors/"><span class="hover-large"></span>Governors</a></li>
    <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost/crofton-infants/our-school/classes/"><span class="hover-large"></span>Classes</a></li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost/crofton-infants/our-school/parents-friends-association/"><span class="hover-large"></span>Parents / Friends Association</a></li>
    <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://localhost/crofton-infants/our-school/school-council/"><span class="hover-large"></span>School Council</a></li>
    <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost/crofton-infants/our-school/philosophy/"><span class="hover-large"></span>Philosophy</a></li>
</ul>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26"><a href="http://localhost/crofton-infants/parents/"><span class="hover-large"></span>Parents<span class="chevron-down"></span></a>
<ul class="sub-menu">
    <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://localhost/crofton-infants/parents/uniforms/"><span class="hover-large"></span>Uniforms</a></li>
    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://localhost/crofton-infants/parents/school-dinners/"><span class="hover-large"></span>School Dinners</a></li>
    <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/crofton-infants/parents/calendar/"><span class="hover-large"></span>Calendar</a></li>
    <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://localhost/crofton-infants/parents/absence-reporting/"><span class="hover-large"></span>Absence Reporting</a></li>
    <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a href="http://localhost/crofton-infants/parents/admissions/"><span class="hover-large"></span>Admissions</a></li>
    <li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/crofton-infants/parents/letters-home/"><span class="hover-large"></span>Letters Home</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost/crofton-infants/curriculum/"><span class="hover-large"></span>Curriculum<span class="chevron-down"></span></a>
<ul class="sub-menu">
    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://localhost/crofton-infants/curriculum/maths/"><span class="hover-large"></span>Maths</a></li>
    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://localhost/crofton-infants/curriculum/phonics/"><span class="hover-large"></span>Phonics</a></li>
</ul>
</li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23"><a href="http://localhost/crofton-infants/essential-information/"><span class="hover-large"></span>Essential Info<span class="chevron-down"></span></a>
<ul class="sub-menu">
    <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://localhost/crofton-infants/essential-information/safeguarding/"><span class="hover-large"></span>Safeguarding</a></li>
    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://localhost/crofton-infants/essential-information/ofsted/"><span class="hover-large"></span>Ofsted</a></li>
    <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost/crofton-infants/essential-information/data/"><span class="hover-large"></span>Data</a></li>
    <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost/crofton-infants/essential-information/attendance/"><span class="hover-large"></span>Attendance</a></li>
    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://localhost/crofton-infants/essential-information/pupil-premium/"><span class="hover-large"></span>Pupil Premium</a></li>
    <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://localhost/crofton-infants/essential-information/sports-premium/"><span class="hover-large"></span>Sports Premium</a></li>
    <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://localhost/crofton-infants/essential-information/send/"><span class="hover-large"></span>SEND</a></li>
    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://localhost/crofton-infants/essential-information/policies/"><span class="hover-large"></span>Policies</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/crofton-infants/contact/"><span class="hover-large"></span>Contact</a></li>
</ul>

我也提出了jSFiddle这个

是否有更好/更简单的方法将箭头/导航对齐到它的父级及其中间。

由于

Answer 1

.menu-item ul {
  background: #561f38;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 56px;
  padding: 0;
  z-index: 99999999;
  width: 215px;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: 500ms ease;
  -moz-transition: 500ms ease;
  -o-transition: 500ms ease;
  transition: 500ms ease;
}

而不是使用

left: -75px;

使用

left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);

Answer 2

而不是：

.menu-item ul {
  ...
  left: -75px;
  width: 215px;
  ...
}

使用：

.menu-item ul {
  ...
  left: 50%;
  width: 216px;
  margin-left: -108px; /* half of width */
  ...
}

你的更新小提琴： https://jsfiddle.net/1tuz7too/3/