Question

nav {float:left;position: relative;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;}
nav ul li:hover {background:#E6E6E6;}
nav ul li a {display:block;padding:15px 25px;color:#444;}
nav ul li ul {display:block;position:absolute;width:110px;background:#FFF;}
nav ul li ul li {width:110px;}
nav ul li ul li a {display:block;padding:15px 10px;color:#444;}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}

<nav>
<ul>
    <li><a href="#">Link 1</a></li>
    <li>
      <a href="#">Link 2</a>
      <ul class="fallback">
        <li><a href="#">Sub-Link 1</a></li>
        <li><a href="#">Sub-Link 2</a></li>
        <li><a href="#">Sub-Link 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Link 3</a>
      <ul class="fallback">
        <li><a href="#">Sub-Link 1</a></li>
        <li><a href="#">Sub-Link 2</a></li>
        <li><a href="#">Sub-Link 3</a></li>
        <li><a href="#">Sub-Link 4</a></li>
      </ul>
    </li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
  </ul>
</nav>

http://jsfiddle.net/nkqC8/

所以我试图在我的新设计上实现下拉导航栏，但左侧有这个额外的空间。我需要删除它，否则我无法在导航菜单上使用我的fontawesome图标。所以对此有何帮助？非常感谢！

Answer 1

将css的第2行更新为：

nav ul {text-align:center; padding: 0; }

ul元素默认情况下保留了填充。

jquery下拉导航栏中的额外空间

1 个答案: