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:
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 .
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Photos</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
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;
}
#nav ul li {
float: left
position: relative;
}
#nav ul li a {
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:#999;
}
#nav ul li ul {
display: none
}
#nav ul li:hover ul {
display: block;
position: absolute;
}
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
#nav ul li:hover ul {
display: block;
position: absolute; }
#nav ul li:hover ul li a {
display:block;
background:#12aeef;
color:#ffffff;
width: 110px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none; }
#nav ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff; }
Color navigation menu implemented by pure CSS
The left navigation layout CSS page template
CSS bilingual navigation menu in Both English and Chinese
CSS horizontal drop-down menu
Div css drop-down navigation menu classification code
Five beautiful CSS horizontal drop-down menu navigation bars