Раскрывающийся список IE7 - текст привязки не отображается - PullRequest
Новая
       24

Раскрывающийся список IE7 - текст привязки не отображается

0 голосов
/ 16 ноября 2011

У меня есть раскрывающийся список в виде вкладок, использующий раскрывающийся список Suckerfish.
При наведении курсора на вкладку уровня 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>

1 Ответ

0 голосов
/ 16 ноября 2011

Просто добавьте ширину к вашим ссылкам навигации: 

#tNav a {width:100px; }

Используемое значение должно быть шириной элемента (120px) минус горизонтальный отступ (10px слева и 10px вправо) = 100px.

http://jsfiddle.net/5sZm9/

...