Home > Web Front-end > HTML Tutorial > Create a drop-down navigation bar for a simple web page with CSS_html/css_WEB-ITnose

Create a drop-down navigation bar for a simple web page with CSS_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:43:00
Original
1737 people have browsed it

 

网页下拉导航栏的制作

网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器。

首先说明几个简单的伪选择器(比较常用的):

      

      link:连接平常的状态

      visited:连接被访问过之后

      hover:鼠标放到连接上的时候

      active:连接被按下的时候

  通常导航栏是用列表标签制作,通过伪选择器的控制,实现其下拉的效果。

  下面写一段简单导航栏:

    

  


    


CSS code:

.navbar{
Height: 120px;
Width: 100%;
text-align:left;
font-family: arial, sans-serif;
background:url(navbar.png) no-repeat;
padding-top:10px;
}
/***********************************/
/*First-level list attribute*/
.navbar ul{
float:left;
​ margin-top:0px;
width:91px;
padding-left:0px;
padding-top:0px;

}

.navbar ul li a{
text-align: center; /*border-right:1px solid #e9e9e9; */
​padding:10px;
​display:block;
​text-decoration:none; >/*******************************************/

.link a:hover{
  color: #F63;
 }
/****************************************** */
/*Secondary list attribute*/
.navbar ul li ul {
 display: none;/**/
     }
.navbar ul li:hover ul {

 display: block;

 position: absolute;
 background-color:#CCC;
  }
/*二Level list style*/
.navbar ul li ul{
 width : 95px; :center;
 padding-left:2px; >The display effect is as follows:

1. When the mouse is not on the title bar

2. When the mouse is on the title:

🎜>





Here, I just made a simple one. The interface is not very beautiful. You can make a very beautiful navigation bar yourself. What's in it? If there are any shortcomings, please point them out.






source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template