How to Use CSS to write a drop-down menu ., Css write drop-down menu

How to Use CSS to write a drop-down menu ., Css write drop-down menu

Navigation menus are essential functions for every website and must be accessed by friends who learn how to create a website. How can I create a simple and beautiful level-2 drop-down menu in css style?

The following is my experience

 

Procedure:

Step 1:

On the homepage, open Sublime Text or other editors to create a navigation menu named nav.

<Div class = "nav">

<Ul>

<Li> <a href = "#"> Topic 1 </a> </li>

<Li> <a href = "#"> Column 2 </a> </li>

<Li> <a href = "#"> column 3 </a> </li>

<Li> <a href = "#"> Topic 4 </a> </li>

<Li> <a href = "#"> Topic 5 </a> </li>

</Ul>

</Div>

As shown in:

Step 2:

Now we add a style for the nav, first remove the default margin and padding,

Remove the list-style of the <ul> <li> label and the default underline Of the <a> label.

Next, add appropriate styles (based on actual needs) for beautification, such as the following style:

 

Page Preview:

 

Step 3:

In this way, a menu horizontal menu is created. Next we will add a level-2 drop-down menu for column 1, column 2, and column 3.

The Code is as follows:

<Div class = "nav">
<Ul>
<Li> <a href = "#"> Topic 1 </a>
<Ul>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Column 2 </a>
<Ul>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> column 3 </a>
<Ul>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
<Li> <a href = "#"> secondary topic </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Topic 4 </a> </li>
<Li> <a href = "#"> Topic 5 </a> </li>
</Ul>
</Div>

Step 4:

After adding the second-level column, we can now add css styles,

First, add relative positioning to the <ul> label under the <li> label,

Remove the <li> label as a floating style, and modify the <a> label as follows:

The Code is as follows:

. Nav ul li ul {

Position: absolute;

}

. Nav ul li {

Float: none;

}

. Nav ul li {

Border-right: none;

Border-top: 1px dotted # ccc;

Background: # f5f5f5;

}

 

Page refresh Effect

 

 

Step 5:

 

 

 

 

Next, we hide the level-2 menu and add the mouse sliding effect to it, so that when the mouse slides to the main column, the level-2 menu is displayed. The style is as follows:

. Nav ul li ul {

Position: absolute;

Display: none;

}

. Nav ul li {

Float: none;

}

. Nav ul li {

Border-right: none;

Border-top: 1px dotted # ccc;

Background: # f5f5f5;

}

. Nav ul li: hover ul {

Display: block;

}

Preview The effect again, as shown in:

 

Step 6:

Now, the horizontal level-2 drop-down menu has been created. All the code is attached here for your reference. Thank you for your browsing.