Question

我有一个下拉标签式列表，以Suckerfish Dropdown为起点当我将鼠标悬停在1级标签上时，第二级锚文本会显示在多行上，就好像它们是换行符一样。这只发生在IE7中，而不是在IE8 / 9或FF中。

这是一个截图：
http://i1200.photobucket.com/albums/bb333/MacGirl1986/DropDownIssue.gif

继承人的CSS：

    #navWrap{
background-color:transparent;/*test color*/
overflow: visible;
padding: 0;
position:absolute;
right:100px;
top:0;
z-index:9000;
    }

    #tNav{font-size:13px;}

    #tNav ul{
padding: 0;
margin: 0;
list-style: none;
font-size:13px;
    }

    #tNav li {/*Level 1 - horizontal menu*/
float: left; 
border: solid 1px transparent;
position:relative;
    }

    #tNav a {/*level 1 text style*/
display: block;
padding: 3px 10px;
background-color:transparent;
font-weight:bold;
text-decoration: none;
    }

    #tNav a:visited, #tNav a:hover {
font-weight:bold;
color: #006400;
text-decoration:none;
    }

    #tNav li:hover ul {left: auto;}

    #tNav li:hover {
border:solid 1px #ccc;
background-color:#fff;
z-index:1000;
    }

    #tNav li ul {/*level 2 container- Second Level List*/
list-style: none;
position: absolute;
width: 120px;
left: -999em;
background-color:#fff;
border: solid 1px #ccc;
margin-top: 0px;
margin-left: -1px;
    }

    #tNav li ul a, #tNav li ul a:hover{ 
border: none;
font-weight:normal;
text-decoration: none;
display:block;
    }

    #tNav li ul a:hover, *this is area that is going to new line in IE*/
    #tNav li ul a:active,
    #tNav li ul a:focus/{
color: #880000;
font-weight:normal;
text-decoration:underline;
display:block;
    }

    #tNav ul li { clear:both;} 

    #tNav li ul li:hover {
border:solid 1px #fff;
}

继承人HTML：

    s<div id="navWrap">
          <ul id="tNav">
            <li><a href="#">Help</a>
              <ul class="level2">
                <li><a href="#" class="category-link">Help Center</a></li>
                <li><a href="#">Search Knowledge Base</a></li>
                <li><a href="#">Contact Support</a></li>
                <li><a href="#">Search Site Web Page</a></li>
                <li><a href="#">Browse FAQs</a></li>
              </ul>
            </li>
            <li><a href="#">Buyers</a>
              <ul>
                <li><a href="#">New Buyers</a></li>
                <li><a href="#">For Buyers</a></li>
                <li><a href="#">How To Buy</a></li>
                <li><a href="#">Buyer's Protection</a></li>
              </ul>
            </li>
            <li><a href="#">Sellers</a>
              <ul>
                <li><a href="#">New Sellers</a></li>
                <li><a href="#">For Sellers</a></li>
                <li><a href="#">How To Sell</a></li>
                <li><a href="#">Fees & Services</a></li>
                <li><a href="#">Join our Network</a></li>
                <li><a href="#">Sell an Item</a></li>
              </ul>
            </li>
    </ul>
</div>

Answer 1

只需在导航链接中添加宽度：

#tNav a {width:100px; }

使用的值必须是元素的宽度（120px）减去水平填充（左侧10px，右侧10px）= 100px。

http://jsfiddle.net/5sZm9/

IE7下拉列表 - 锚文本不显示内联

1 个答案: