Question

我试过搜索表单＆amp;发现了类似的主题，但没有具体的帮助。我正在试图找出为什么当我将它放在我的html文件中时，我所做的下拉导航无法正常工作。

下拉悬停不起作用，我注意到它似乎受其下的内容影响。 https://beach-riot-2017.myshopify.com/ pw：beach-riot-2017

这是html：家

   <li><a href="#">Shop</a>
     <ul>
  <li class="dir"><a href="#">Swimwear</a>
    <ul>
      <li><a href="#">All</a></li>
      <li><a href="#">New Arrivals</a></li>
      <li><a href="#">Best Sellers</a></li>
      <li><a href="#">Bikinis</a></li>
      <li><a href="#">One Piece</a></li>
    </ul>
  </li>
  <li class="dir"><a href="#">Clothing</a>
    <ul>
      <li><a href="#">Dresses & Rompers</a></li>
      <li><a href="#">Tops</a></li>
      <li><a href="#">Bottoms</a></li>
      <li><a href="#">Sales</a></li>
    </ul>
  </li>
        <li class="dir"><a href="#">Shop By Collection</a>
    <ul>
      <li><a href="#">Spring 2017 - All</a></li>
      <li><a href="#">Resort 2016</a></li>
      <li><a href="#">Jasmine Collection</a></li>
      <li><a href="#">Seaside Flora Collection</a></li>
                <li><a href="#">Bridal Collection</a></li>
    </ul>
  </li>
</ul>
   </li>
   <li><a href="#">Instagram</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">About</a>
<ul>
  <li class="dir"><a href="#">Beach Riot</a>
  </li>
  <li class="dir"><a href="#">Contact Us</a>
  </li>
  <li class="dir"><a href="#">Press</a>
  </li>
  <li class="dir"><a href="#">Stockists</a>
  </li>
  <li class="dir"><a href="#">Return Policy</a>
  </li>
  </ul>
   <li><a href="#">Look Books</a>
<ul>
  <li class="dir"><a href="#">Spring 2017</a>
  </li>
  <li class="dir"><a href="#">Resort 2016s</a>
  </li>
  <li class="dir"><a href="#">BR X LUV AJ</a>
  </li>
  <li class="dir"><a href="#">Summer 2016</a>
  </li>
  <li class="dir"><a href="#">SCF X Beach Riot 2016</a>
  </li>
  </ul>

 </ul>
 </nav>

和CSS

  #primary2_nav_wrap
  {
margin-top:15px
  }

  #primary2_nav_wrap ul
  {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
  }

  #primary2_nav_wrap ul a
  {
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
  }

  #primary2_nav_wrap ul li
  {
position:relative;
float:left;
margin:0;
padding:0
  }

  #primary2_nav_wrap ul li.current-menu-item
  {
background:#ddd
  }

  #primary2_nav_wrap ul li:hover
  {
background:#f6f6f6
  }

  #primary2_nav_wrap ul ul
  {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
  }

  #primary2_nav_wrap ul ul li
  {
float:none;
width:200px
  }

  #primary2_nav_wrap ul ul a
  {
line-height:120%;
padding:10px 15px
  }

  #primary2_nav_wrap ul ul ul
  {
top:0;
left:100%
  }

  #primary2_nav_wrap ul li:hover > ul
  {
display:block
  }

谢谢！

Answer 1

试试这个，

 #primary2_nav_wrap
  {
margin-top:15px
  }

  #primary2_nav_wrap ul
  {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
  }

  #primary2_nav_wrap ul a
  {
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
  }

  #primary2_nav_wrap ul li
  {
position:relative;
float:left;
margin:0;
padding:0
  }

  #primary2_nav_wrap ul li.current-menu-item
  {
background:#ddd
  }

  #primary2_nav_wrap ul li:hover
  {
background:#f6f6f6
  }

  #primary2_nav_wrap ul ul
  {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
  }

  #primary2_nav_wrap ul ul li
  {
float:none;
width:200px
  }

  #primary2_nav_wrap ul ul a
  {
line-height:120%;
padding:10px 15px
  }

  #primary2_nav_wrap ul ul ul
  {
top:0;
left:100%
  }

  #primary2_nav_wrap ul li:hover > ul
  {
display:block
  }

<nav id="primary2_nav_wrap">
<ul>
<li><a href="#">Shop</a>
     <ul>
  <li class="dir"><a href="#">Swimwear</a>
    <ul>
      <li><a href="#">All</a></li>
      <li><a href="#">New Arrivals</a></li>
      <li><a href="#">Best Sellers</a></li>
      <li><a href="#">Bikinis</a></li>
      <li><a href="#">One Piece</a></li>
    </ul>
  </li>
  <li class="dir"><a href="#">Clothing</a>
    <ul>
      <li><a href="#">Dresses & Rompers</a></li>
      <li><a href="#">Tops</a></li>
      <li><a href="#">Bottoms</a></li>
      <li><a href="#">Sales</a></li>
    </ul>
  </li>
        <li class="dir"><a href="#">Shop By Collection</a>
    <ul>
      <li><a href="#">Spring 2017 - All</a></li>
      <li><a href="#">Resort 2016</a></li>
      <li><a href="#">Jasmine Collection</a></li>
      <li><a href="#">Seaside Flora Collection</a></li>
                <li><a href="#">Bridal Collection</a></li>
    </ul>
  </li>
</ul>
   </li>
   <li><a href="#">Instagram</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">About</a>
<ul>
  <li class="dir"><a href="#">Beach Riot</a>
  </li>
  <li class="dir"><a href="#">Contact Us</a>
  </li>
  <li class="dir"><a href="#">Press</a>
  </li>
  <li class="dir"><a href="#">Stockists</a>
  </li>
  <li class="dir"><a href="#">Return Policy</a>
  </li>
  </ul>
   <li><a href="#">Look Books</a>
<ul>
  <li class="dir"><a href="#">Spring 2017</a>
  </li>
  <li class="dir"><a href="#">Resort 2016s</a>
  </li>
  <li class="dir"><a href="#">BR X LUV AJ</a>
  </li>
  <li class="dir"><a href="#">Summer 2016</a>
  </li>
  <li class="dir"><a href="#">SCF X Beach Riot 2016</a>
  </li>
  </ul>

 </ul>
 </nav>

下拉菜单在悬停在下面的内容时不会保持打开状态

1 个答案: