Okay so I just made an html navigation with up to 5 sub navs. Im going to paste the code here along with a jsfiddle link.

HTML:

<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">About 1</a>
                            <ul>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About 2</a></li>
                        <li><a href="#">About 3</a></li>
                        <li><a href="#">About 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Buy</a></li>
            </ul>
        </nav>

And CSS:

nav {
    width: 800px;
    margin: 100px auto;
}

nav ul ul {
    display: none;
}

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

nav ul {
    background: #fff;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 10px;
    border-radius: 5px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #e1e1e1;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 15px 18px;
        color: #757575; text-decoration: none;
    }

nav ul ul {
    background: #e1e1e1; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #cbcbcb;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 30px;
            color: #757575;
        }   
            nav ul ul li a:hover {
                background: #757575;
            }



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

JSFiddle: http://jsfiddle.net/JQW4Q/

Works perfect, but the issue starts on the second level of the navigation.
The width is not big enough to hold the whole text for some reason.`
It comes in 2 lines.

Does anyone know what causes this issue, weirdly, I have always faced it.

Try setting a width on those elements..

nav ul ul li {
    float: none; 
    border-top: 1px solid #cbcbcb;
    position: relative;
    width: 200px;
}

I added a min-width of 100px to the A element as below:

nav ul ul ul li a {
    display: block;
    min-width: 100px;
}

This seemed to work, adding it to nav ul ul li made no difference.

adding it to nav ul ul li made no difference.

d780ec391f7dadae1ce53e085d351d82

Both worked fine for me. There are a variety of ways to get to address this as you can see..You can make each level of items a different width if you wish as well...

Thanks mate,
Another question is, After the 4th level, I want the drop downs to start appearing on the left, not the right, How can I achieve this?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.