jquery - 下拉 CSS 错误

Question

我最近安装了一个下拉菜单，但它不起作用。这也发生在下面有文字的其他页面上。是什么原因造成的，我该如何纠正？

我已经在这个下拉菜单上工作了一段时间了，我决定我不能自己做。我在谷歌上搜索了很多解决方案，并看到了几个关于 css 下拉菜单的 youtube 教程，但不知何故，它们总是对有问题的人有用，但对我不起作用。

FIDDLE

    .logo {
      float: left;
      background: #FFF;
      padding: 28px 29px 19px 30px;
    }
    .top-nav ul li {
      display: inline-block;
      float: left;
    }
    .top-nav ul li a {
      background: #fff;
      float: none;
      display: inline-block;
      padding: 40px 47.6px;
      letter-spacing: 2px;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
      color: #32332e;
      font-size: 0.875em;
      transition: 0.5s ease;
      -o-transition: 0.5s ease;
      -webkit-transition: 0.5s ease;
      margin: 0 -1px;
      border-left: 1px solid #fff;
      text-decoration: none;
    }
    .top-nav li.active> a,
    .top-nav li> a:hover {
      color: #FFF;
      background: #404642;
    }
    .top-nav {
      float: right;
      background: #fff;
    }
    .main-header {
      margin-top: 16px;
      background: #fff;
    }

<div class="main-header">
  <div class="logo">
    <a href="index.html">
      <img src="images/logo2.png" title="logo" />
    </a>
  </div>
  <div class="top-nav">

    <span class="menu"></span>
    <ul>
      <li class="active"><a href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="projects.html">Mission</a>
      </li>
      <li><a href="services.html">Services</a>
        <ul style="padding: 0;
          position: absolute;
          top: 48px;
          left: 0;
          width: 150px;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
          display: none;opacity: 0;
          visibility: hidden;
          -webkit-transiton: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          -ms-transition: opacity 0.2s;
          -o-transition: opacity 0.2s; -transition: opacity 0.2s;">
          <li style=" background: #555; 
          display: block; 
          color: #fff;
          text-shadow: 0 -1px 0 #000;"><a href='#'>Product 1</a>
          </li>
          <li class='has-sub'><a href='#'>Product 2</a>
          </li>
        </ul>
      </li>
      <li><a href="blog.html">Blog</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
      <div class="clearfix"></div>
    </ul>
  </div>
  <div class="clearfix"></div>
</div>

Answer 1

您需要删除子 ul 中的 css 代码，并在您的 css 文件中添加两个 css 类。这是 fiddle

.top-nav li:hover ul{
        display:block ;
    }
    .top-nav li ul{
        padding: 0;     
        position:absolute;
       display:none;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s; -transition: opacity 0.2s;

    }