如何使導航菜單全寬並帶有過渡

Question

我正在創建一個下拉導航。 我希望當您懸停時下拉部分是全角的，並且在您懸停時讓下拉菜單淡入。 這方面的一個例子是在 LA Phil 網站上 - https://www.laphil.com/

我試過在下拉菜單內容中添加第二個 div，但這打破了它。

@media (min-width: 769px){
.primary-navigation ul.navigation-item-group li.nav-item.has-submenu ul.submenu.sub-menu {
    padding-bottom: 0em;
    padding-top: 2em;
}
.primary-navigation {
    transition: all 0.3s ease;
    width: initial;
    float: right;
    margin-top: 4em;
}
.primary-navigation ul li:hover > ul { 
  display: flex;
  top: auto;
  right: 0;
  width: 100%;
}

.primary-navigation ul ul > li { 
  position: relative;
  display: inline;
  margin: auto;
}
.primary-navigation ul ul {
    border-bottom: 2px solid #ee9fb5;
    border-top: 2px solid #ee9fb5;
}
.submenu.sub-menu {
    padding: 1em;
}
}

.primary-navigation ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-block;
}

.primary-navigation > li > ul.sub_menu {
  min-width: 10em;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #fff;
}

.primary-navigation ul li { padding: 0px; }

.primary-navigation > ul > li { display: inline-block; }

.primary-navigation ul li a {
  display: block;
  text-decoration: none;
  color: #000;
  font-size: 14px;
}
.primary-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 160px;
  background: #fff;
  z-index: 2;
}

.menu ul li:hover > ul { display: block; }

.menu ul ul > li { position: relative; }

.primary-navigation ul ul > li a {
  padding: 10px 15px;
}
.primary-navigation ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

 @media all and (max-width: 768px) {
a.menu-link {
  display: block;
  color: #000;
  float: left;
  text-decoration: none;
 // padding: 10px 16px;
  font-size: 1.5em;
}


.primary-navigation {
  clear: both;
  min-width: inherit;
  float: none;
}

.primary-navigation,
.primary-navigation > ul ul {
  overflow: hidden;
  max-height: 0;
  background-color: #fff;
}

.primary-navigation > li > ul.sub-menu {
  padding: 0px;
  border: none;
}


.primary-navigation.active,
.primary-navigation > ul ul.active { max-height: 100em; }

.primary-navigation ul { display: inline; }

.primary-navigation li,
.primary-navigation > ul > li { display: block; }

.primary-navigation > ul > li:last-of-type a { border: none; }

.primary-navigation li a {
  color: #000;
  display: block;
  position: relative;
}

.primary-navigation li.has-submenu > a:after {
  content: '+';
  position: absolute;
  top: 0;
  right: -1em;
  display: block;
  font-size: 1em;
  padding: 0.55em 0em;
}

.primary-navigation li.has-submenu > a.active:after { content: "-"; }

.primary-navigation ul ul,
.primary-navigation ul ul ul {
  display: inherit;
  position: relative;
  left: auto;
  top: auto;
  border: none;
}
a.menu-link:after {
  content: "\2630";
  font-weight: normal;
}

a.menu-link.active:after { content: "\2715"; }

li:last-child {
    border-bottom: 2px solid #ee9fb5;
    margin: 0 auto;
    width: 60%;
}
.primary-navigation .nav-item a, .primary-navigation .flexMenu-viewMore a {
    margin-bottom: 1em;
    margin-top: .5em;
}
.primary-navigation ul ul > li a {
  padding: 0px 0px;
}
.submenu li {
    font-size: xx-small;
}
.navigation-item-group {
    padding-top: 1em;
}
 }

<nav class="primary-navigation" role="navigation" id="menu">
    <ul class="navigation-item-group">
      <li class="nav-item"><a href="#" title="Calendar">Calendar</a></li>
      <li class="nav-item"><a href="#Category" title="Link">Category1</a>
        <ul class="submenu">
          <li><a href="#">Test1</a></li>
          <li><a href="#">More</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#Link" title="Link">Category2</a>
        <ul class="submenu">
          <li ><a href="#">Test1</a></li>
          <li ><a href="#">Test2</a></li>
          <li ><a href="#">More</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#Link" title="Link">Category3</a>
        <ul class="submenu">
          <li ><a href="#">Test1</a></li>
          <li ><a href="#">Test2</a></li>
          <li ><a href="#">More</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="#Link" title="Link">Category4</a>
        <ul class="submenu">
          <li ><a href="#">Test1</a></li>
          <li ><a href="#">More</a></li>
        </ul>
      </li>
            <li class="nav-item"><a href="#Link" title="Link">Category5</a>
        <ul class="submenu">
          <li ><a href="#">Test1</a></li>
          <li ><a href="#">More</a></li>
        </ul>
      </li>
      <li class="nav-item"><a href="http://pittsburghsymphonyorchestra.bigcartel.com/" title="Link">Shop</a></li>
    </ul>
  </nav>

我希望它看起來像 LA Phil 下拉菜單 -

https://www.laphl.com/

當用戶將鼠標懸停在菜單上時，我希望下拉菜單欄從屏幕的每一側伸展。 此外，當用戶懸停時，我希望下拉內容過渡。

Answer 1

如果你有.primary-navigation ul ul和.primary-navigation ul li:hover>ul ，你可以使用可見性、不透明度和過渡來修改它們的屬性來創建效果而不是基於顯示。

要拉伸整個屏幕寬度，您可以為.primary-navigation ul ul應用width: 100vw 。

.primary-navigation ul ul {
  display: flex;
  position: absolute;
  visibility: hidden;
  top: 100%;
  right: 0;
  width: 100vw;
  background: #fff;
  opacity: 0;
  transition: 0.32s;
  z-index: 2;
}
.primary-navigation ul li:hover>ul {
  visibility: visible;
  opacity: 1;
  transition: 0.32s 0.12s;
}