CODEWITHSUNDEEP
css
user3770026
user3770026

Reputation:

CSS Navigation Bar Bug

How to remove the space shown here?

enter image description here

Hi , I have a CSS Bug on my code, the problem is shown in the picture. an extra space is outputing. I copied this code from google. i wasted a lot of time to find that but nothing came good.

Here is my HTML code

<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>

and the CSS is 

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;
    }

Upvotes: 3

Views: 56

Answers (3)

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

Try this

i remove

padding:5px; from nav ul li a

and add

padding: 0 10px; for nav ul li a

Fiddle: http://jsfiddle.net/rqELv/

Upvotes: 0

Hristo Valkanov
Hristo Valkanov

Reputation: 1687

You have to remove both padding and margin for the ul element. for example with this:

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

here's a fiddle.

Upvotes: 1

Alex Char
Alex Char

Reputation: 33228

You can use css universal selector selector *:

*{
    margin:0;
    padding:0;
}

fiddle

Take a look here Universal Selector

Upvotes: 0

Related Questions