下拉CSS错误

Question

我最近安装了一个下拉菜单，但它无法正常工作。这也发生在下面带有文字的其他页面上。造成这种情况的原因是什么？如何纠正？

我已经在这个下拉菜单中工作了一段时间，并决定我自己无法做到这一点。我已经搜索了许多解决方案，并看到了几个关于css下拉菜单的youtube教程，但不知怎的，它们总是为有问题的人工作但不适合我。

FIDDLE

＆＃13;

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;

    }

Answer 2

只需从提供的代码中查看，看起来你已经从另一个网站复制/粘贴了一个“脏”布局（布局与交互）

嵌套在服务下面的UL元素有很多内联样式 - 这可能是在其父元素悬停时注入Javascript的结果。

最好删除所有这些内联样式并再次使用。

Answer 3

你应该这样使用 -

＆＃13;

＆＃13;

.logo {
      float: left;
      background: #FFF;
      padding: 28px 29px 19px 30px;
    }
    .top-nav ul li {
      display: inline-block;
      float: left;
      position: relative;
    }
    .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;
    }

    .top-nav > ul > li > ul{
    	padding: 0;
          position: absolute;
          /*top: 48px;*/
          left: 0;
          width: 150px;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
          display: none;
          /*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;
    }
     .top-nav > ul > li:hover > ul{
		display: block;
     }

＆＃13;

 <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>
          <li>
          <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>

＆＃13;

＆＃13;

＆＃13;