Detailed css navigation bar to implement code and footage download

May 04, 2021 CSS

Navigation bar is the foundation of a website, beautiful and easy to use navigation bar is very important for any website. T raditionally, navigation bars are made up of graphical images placed in a row of table cells. B ecause tables are no longer recommended to locate any non-table page content, many people use structured XHTML tags and CSS formats to create navigation bars. Here's a look at how the simplest CSS navigation bar is implemented:

Detailed css navigation bar to implement code and footage download

First, let's write an HTML code for this drop - down menu. C reate a div as a container and put the navigation menu in this container. A s the following code, we use a sequenceless table to create this navigation menu. I n this navigation menu, there is a sub-menu under Portfolio, expressed in bold, and don't forget to turn off .

<ul>

<li><a href="#">About Me</a></li>

<li><a href="#">Portfolio</a>

<ul>

<li><a href="#">Print</a></li>

<li><a href="#">Photos</a></li>

</ul>

</li>

<li><a href="#">Contact Me</a></li>

</ul>

</div>

The CSS

First of all, let's set a style for the s nav div and give it a width, height, font size. and remove the default sequenceless table style.

*{ margin:0px; padding: 0px; }

#nav {

font-family: arial, sans-serif;

position: relative;

width: 390px;

height:56px;

font-size:14px;

color:#999;

margin: 0 auto;

}

#nav ul {

list-style-type: none;

}

In this step we set the left float to let the entire navigation level. And set the relative, remember to become a ancestral element, so that we can take advantage of the absolute positioning below.

#nav ul li {

float: left

position: relative;

}

In this step we set a style for the label to look like a press twist (div css tutorial - how to use css to create a similar twist navigation)

#nav ul li a {

text-align: center;

border-right:1px solid #e9e9e9;

padding:20px;

display:block;

text-decoration:none;

color:#999;

}

The most important part
This section will show you how to make the drop-down menu appear and hide. When the cursor does not move to the Portfolio drop-down menu does not appear, when the cursor moves to top of Portfolio, the drop-down menu displays, we use the display properties to achieve this effect.

#nav ul li ul {

display: none

}

#nav ul li:hover ul {

display: block;

position: absolute;

}

We style the hover state of the drop-down menu

#nav ul li:hover ul li a {

display:block;

background:#12aeef;

color:#ffffff;