Navigation HTML and CSS structure

Few times I had explain how to create a good navigation structure, so here it comes:

So good navigation should be based on ul > li > a structure wrapped into nav tag:

<nav class=”main_nav”>
<ul>
<li>
<a href=”link1”>Link 1</a>
</li>
<li>
<a href=”link2”>Link 2</a>
</li>
<li>
<a href=”link3”>Link 3</a>
</li>
<li>
<a href=”link4”>Link 4</a>
</li>
</ul>
</nav>

so when you have this structure you can create now the CSS basic code:

.main_nav {}
.main_nav ul {}
.main_nav li {}
.main_nav a {}

It is not complicated! Lets check the multilevel menu.

Multilevel menu

This is most known issue in websites:

<nav class=”main_nav”>
<ul>
<li>
<a href=”link1”>Link 1</a>

        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href="link1"&gt;Link 1.1&lt;/a&gt;

            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link2"&gt;Link 1.2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link3"&gt;Link 1.3&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link4"&gt;Link 1.4&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="link2"&gt;Link 2&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="link3"&gt;Link 3&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="link4"&gt;Link 4&lt;/a&gt;

        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href="link1"&gt;Link 4.1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link2"&gt;Link 4.2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link3"&gt;Link 4.3&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="link4"&gt;Link 4.4&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;

</nav>
Now lets shortly introduce the CSS structre:

.main_nav {}
.main_nav ul {} // all ul’s
.main_nav li {} // all li’s
.main_nav a {} // all a’s

.main_nav ul ul {} // second level ul’s and deeper
.main_nav li li {} // second level li’s and deeper
.main_nav ul ul a {} // second level a’s and deeper