HTML和CSS示例（二）——菜单

一、菜单

取消项目符号 list-style-type: none;
让li彼此水平相连 float: left;
取消下划线 text-decoration:none;
将链接转为块级元素 display: block;
设定菜单每项的宽度 width: 100px;
设定菜单的边距 padding: 5px;

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>菜单</title>
<style>
.nav {
  list-style-type:none; /* 取消项目符号 */
}
.nav li {
  float: left; /* 让li彼此水平相连 */
}
.nav a {
  border: white 1px solid;
  background: purple;
  display: block;   
  width: 100px;
  padding: 5px;
  text-align: center;
  text-decoration: none;  /* 取消下划线 */
  color: white; 
  font-weight: bold;
}
.nav a:hover {
  color: red; 
}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">网站首页</a></li>
  <li><a href="#">校园新闻</a></li>
  <li><a href="#">学校概况</a></li>
  <li><a href="#">专业介绍</a></li>
  <li><a href="#">学生活动</a></li>
</ul>
</body>
</html>

菜单是一个无序列表做成的，每个项目的背景颜色为紫色，字体为白色，用了float:left故每个项目水平上紧挨在一起，取消项目符号list-style-type:none，故生成菜单效果图，如：
图片说明
鼠标覆盖在任一链接上字体颜色将会变红，如下：

二、按钮菜单

取消项目符号 list-style-type: none;
<a>有四个伪类，link，visited（已访问链接样式），hover（鼠标覆盖链接样式），active（被单击样式）
光标类型为手指 cursor: pointer;
（还有很多其他的类型，如：wait、text、move等）

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>菜单</title>
<style>
.nav {
  list-style-type:none; /* 取消项目符号 */
}
.nav a{
  display: block;   
  width: 100px;
  text-align: center;
  margin: 10px;
  padding: 5px;
  text-decoration: none; 
  background: linear-gradient(to bottom, #fff, #69c);
  border: 1px solid #9ab;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 0 #fff;
  color: #036;
  text-shadow: 1px 1px 1px #fff;
  width: 100px; 
  font-size: 12pt;
  font-family:'微软雅黑';  
}

.nav a:hover {
  background: linear-gradient(to bottom, #fff, #9cf);
  border: 1px solid #cde;
  color: #c33;
  /*光标类型，pointer为手指*/
  cursor: pointer; 
}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">网站首页</a></li>
  <li><a href="#">校园新闻</a></li>
  <li><a href="#">学校概况</a></li>
  <li><a href="#">专业介绍</a></li>
  <li><a href="#">学生活动</a></li>
</ul>
</body>
</html>

手指指向按钮链接时字体变红（原谅那只好丑的手）
图片说明

三、下拉菜单

不显示下拉菜单： display:none;

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>课程表</title>
<style>
  #navBar {

  }
  #navBar ul {
    padding: 0;
    list-style: none;
    background: #eee;
  }
  #navBar ul > li {
    float: left;
    width: 120px;
  }
  #navBar li > a {

  }
  #navBar ul ul {
    display: none;
  }
  #navBar ul ul li {
    float: none;
  }
  #navBar li:hover > ul {
    display: block;
  }
</style>
</head>
<body>
  <h2>下拉菜单示例</h2>
  <nav id="navBar">
    <ul>
      <li><a href="">菜单一</a>
        <ul>
          <li><a href="">菜单1 —— 1</a></li>
          <li><a href="">菜单1 —— 2</a></li>
          <li><a href="">菜单1 —— 3</a></li>
        </ul>
      </li>
      <li><a href="">菜单二</a>
        <ul>
          <li><a href="">菜单2 —— 1</a></li>
          <li><a href="">菜单2 —— 2</a></li>
          <li><a href="">菜单2 —— 3</a></li>
          <li><a href="">菜单2 —— 4</a></li>
        </ul>
      </li>
      <li><a href="">菜单三</a>
        <ul>
          <li><a href="">菜单3 —— 1</a></li>
          <li><a href="">菜单3 —— 2</a></li>
          <li><a href="">菜单3 —— 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

下拉菜单是用嵌套无序列表做出来的。

鼠标覆盖任一链接会弹出下拉子菜单：
图片说明