CSS导航栏错误

时间:2014-07-15 09:34:50

标签: css

如何删除此处显示的空格?

enter image description here

嗨,我的代码上有一个CSS Bug,问题显示在图片中。输出一个额外的空间。 我从谷歌复制了这段代码。我浪费了很多时间才找到,但没有什么事情发生。

这是我的HTML代码

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a>
                        <ul>

                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a>
                        <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a></li>

                        </ul>


                        </li>
                        </ul>


                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

,CSS是

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 

    list-style: none;
    position: relative;
    display: inline-table;
}

    nav ul li {
        float: left;
    }

        nav ul li a {
            display: block; padding:5px;
            text-decoration: none;
        }


    nav ul ul {

        position: absolute; top: 100%;
    }
        nav ul ul li {

            float: none;position: relative;
        }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

3 个答案:

答案 0 :(得分:1)

您必须删除ul元素的填充和边距。例如:

nav ul ul { margin-left: 0; padding-left: 0;}

这里是fiddle

答案 1 :(得分:0)

您可以使用css通用选择器选择器*

*{
    margin:0;
    padding:0;
}

fiddle

看看Universal Selector

答案 2 :(得分:0)

试试这个

我删除

来自padding:5px;

nav ul li a

并添加

padding: 0 10px;

nav ul li a

小提琴:http://jsfiddle.net/rqELv/