Странный CSS / Nav Blank Space - PullRequest
Новая
       19

Странный CSS / Nav Blank Space

0 голосов
/ 20 сентября 2011

Привет, сообщество переполнения стека, мы встречаемся снова.Я создал эту двухуровневую панель навигации с помощью CSS, и у меня все заработало, но для одной маленькой проблемы есть пробел, от которого я не могу избавиться

Вот HTML 

<ul id="nav-top">
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">Join TGA</a></li>
    </ul>

    <img src="wp-content/themes/tga/pictures/topbanner.jpg" id="top-banner" />
    <div id="header">
    <ul id="nav-bottom">
            <li><a href="#">Percoidei</a>
        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
    </li>

    <li><a href="#">Anabantoidei</a>
        <ul>
            <li><a href="#">Climbing perches</a></li>
            <li><a href="#">Labyrinthfishes</a></li>
            <li><a href="#">Kissing gouramis</a></li>
            <li><a href="#">Pike-heads</a></li>
            <li><a href="#">Giant gouramis</a></li>
        </ul>
    </li>

А вот и CSS 

#nav-bottom{
    list-style-type:none;
    height: 34px;
    margin:0;
    padding:0;
    overflow:hidden;
    background-image: url(pictures/nav-graphic.png);
    line-height: 2;
}

#nav-bottom li:hover {
    list-style-type:none;
    height: 34px;
    margin:0;
    padding:0;
    overflow:hidden;
    line-height: 2;
    background-color: #494949;
    color: white;
}

#nav-bottom li{
    float:left;
}

#nav-bottom a{
    display:block;
    width:100px;
    text-decoration: none;
    color: black;
}



#nav-bottom li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    list-style-type:none;
    background-color: #494949;
    color: white;
}


#nav-bottom li ul li a {
    color: white;
    width: 10em;
    border-bottom:1px solid white;
}

#nav-bottom li ul li a:hover {
    color: white;
    width: 10em;
    background-color: #2a2a2a;
    text-align: left;
    border-bottom:1px solid white;
}

#nav-bottom li:hover ul {
    left: auto;
}

Вот как это выглядит

посмотрите на ссылку ниже (извините, у вас нет точек повода для загрузки изображения)

Что я делаю неправильно, что вызывает это пустое пространство?

Хорошо, вот пустое пространство, о котором я говорю http://i52.tinypic.com/dcsg9j.png

И я загрузил его в jsfiddle(крутой сайт разработчиков это нравится) и там он работает нормально, как вы думаете, это проблема с моим браузером (Chrome 14.0.835.163 работает на Mac), он также пустое место в Firefox?http://jsfiddle.net/donvito101/ZWeVq/

1 Ответ

0 голосов
/ 20 сентября 2011

Полагаю, вы имеете в виду пробел, который отступает в подменю? В этом случае это вероятно, потому что вы начинаете новое в подменю, которое всегда имеет отступ. Поместите несколько px отрицательного отступа (или поля?) Для # nav-bottom ul, и все будет хорошо! например, 

#nav-bottom ul { padding-left: -15px; }
...