小编use*_*449的帖子

我有一个使用CSS的下拉菜单,现在我被告知他们希望下拉菜单显示有点慢.一切都很好,但是当用户将鼠标悬停在导航上时,我无法减缓转换速度.使用仅CSS解决方案执行此操作的最佳方法是什么？

演示JSFiddle

HTML

<nav>
  <ul>
    <li><a href="#">Line 1</a></li>
    <li><a href="#">Line 2</a>
      <ul>
        <li><a href="#">SubCat 1</a></li>
        <li><a href="#">SubCat 2</a></li>
        <li><a href="#">SubCat 3</a></li>
      </ul>
    </li>
    <li><a href="#">Line 3</a>
      <ul>
        <li><a href="#">SubCat 4</a></li>
        <li><a href="#">SubCat 5</a></li>
        <li><a href="#">SubCat 6</a></li>
      </ul>
    </li>
    <li><a href="#">Line 4</a>
      <ul>
        <li><a href="#">SubCat 7</a></li>
        <li><a href="#">SubCat 8</a></li>
        <li><a href="#">SubCat 9</a></li>
      </ul>
    </li> 
  </ul>
</nav>

CSS

nav {
    background: url(../images/global/Navigation_Full.png) no-repeat;
    width: 540px;
    height: 54px;
    margin: 0 auto;
    color: #000;
}

nav ul{
    display: inline-table;
    list-style: none;
    width: 100%; …