制作导航栏的几种方法

1、简单的垂直导航栏
2、简单的水平导航栏
3、解决导航栏尾部li与ul的底边框重叠的问题
4、导航栏突出显示当前页
5、纯CSS导航栏下拉菜单

1、简单的垂直导航栏

<ul class="nav">
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Our Services</a></li>
      <li><a href="work.html">Our Work</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="contact.html">Contact</a></li>
</ul>

将li内的a链接的样式设置成display: block;（垂直导航）或display: inline-block;（水平导航），此时整个单独的导航栏都能够被点击

2、简单的水平导航栏

1.创建搜索结果页面的简单水平导航栏，使用有序列表ol

<ol class="pagination">
       <li><a href="search.html?page=1" rel="prev">Prev</a></li>
       <li><a href="search.html?page=1">1</a></li>
       <li class="active">2</li>
       <li><a href="search.html?page=3">3</a></li>
       <li><a href="search.html?page=4">4</a></li>
       <li><a href="search.html?page=5">5</a></li>
       <li><a href="search.html?page=3" rel="next">Next</a></li>
</ol>

2.li设置浮动或display: inline-block

ol.pagination li {
       float: left;
       margin-right: 10px;
}

3.当鼠标悬停时，页码背景变成蓝色，链接文本变成白色，与激活页码的样式相同

ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.active {
       background-color: #00f;
       color: #fff;
}

4.Prev和Next利用rel属性选择器，避免增加其它class

ol.pagination a[rel="prev"],
ol.pagination a[rel="next"] {
       border: none;
}

5.Prev和Next的两边如果需要添加箭头，可以使用:before和:after伪类以及content属性

ol.pagination a[rel="prev"]:before {
       content: "&lt;&lt;";
       padding-right: 5px;
}

ol.pagination a[rel="next"]:after {
       content: "&gt;&gt;";
       padding-left: 5px;
}

3、解决导航栏尾部`li`与`ul`的底边框重叠的问题

去掉ul的底边框

ul.nav {
      border-bottom: 0;
}

最后一个li设置last类，并去掉其底边框

ul.nav li.last {
      border-bottom: 0;
}

对ul使用:last-child伪类

ul.nav:last-child {
      border-bottom: 0;
}

4、导航栏突出显示当前页

在当前li上添加.active类，对该class单独设置样式
使用以下方法：

1.在每个页面的body元素中添加一个id

<body id="home">
         <ul class="nav">
             <li class="home"><a href="home.html">Home</a></li>
             <li class="about"><a href="about.html">About</a></li>
             <li class="services"><a href="services.html">Our Services</a></li>
             <li class="work"><a href="work.html">Our Work</a></li>
             <li class="news"><a href="news.html">News</a></li>
             <li class="contact"><a href="contact.html">Contact</a></li>
         </ul>
</body>

2.在nav的每个li中添加一个对应的类名

body#home ul.nav li.home a,
body#about ul.nav li.about a,
body#services ul.nav li.services a,
body#work ul.nav li.work a,
body#news ul.nav li.news a,
body#contact ul.nav li.contact a {
         //...
         cursor: default;
         /*将鼠标光标设置为显示默认箭头样式，此时鼠标在经过导航栏中的当前页时，不会改变状态，因此不会诱使用户点击当前页面的链接*/
}

3.使用body的id和li类名的唯一组合，在导航条上显示当前页

5、纯`CSS`导航栏下拉菜单

1.建立多层导航栏列表

<ul class="nav">
       <li><a href="/home/">Home</a></li>
       <li><a href="/products/">Products</a>
           <ul>
               <li><a href="/products/silverback/">Silverback</a></li>
               <li><a href="/products/fontdeck/">Font Deck</a></li>
           </ul>
       </li>
       <li><a href="/services/">Services</a>
           <ul>
               <li><a href="/services/design/">Design</a></li>
               <li><a href="/services/development/">Development</a></li>
               <li><a href="/services/consultancy/">Consultancy</a></li>
           </ul>
       </li>
       <li><a href="/contact/">Contact Us</a></li>
</ul>

2.重置样式、添加样式，并使ul和li都浮动，防止高度塌陷

ul.nav, ul.nav ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
       float: left;
       border: 1px solid #486B02;
       background-color: #8BD400;
}

 ul.nav li {
       float: left;
       width: 20px;
}

3.把ul的宽度设置为与li相同，确保垂直对齐；并把ul设置为position: absolute;，在激活之前把下拉ul隐藏到屏幕左边之外（也可将下拉ul设置为display: none，但屏幕阅读器将无法访问这些内容）

ul.nav li ul {
       position: absolute;
       width: 20px;
       left: -9999px;
       /*display: none;*/
       margin-left: -1px;
}

4.在父li中添加:hover伪类，将下拉ul改回正常位置外（也可将:hover伪类设置为display: block，缺点同上）

.nav li:hover ul {
       left: auto;
       /*display: block;*/
}

5.设置a链接样式，修改列表外观，并设置背景颜色和边框等

ul.nav a {
       display: block;
       //...
}

 ul.nav li li a {
       //...
}

 ul.nav li:last-child a {
       border-right: 0;
       border-bottom: 0;
}

 ul a:hover,
ul a:focus {
       //...
}