各类的导航

鼠标悬浮时高度发生改变

* {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 800px;
      height: 50px;
      border-bottom: 1px solid #000;
      margin: 50px auto;
    }
    li {
      margin-top: 5px;
      list-style: none;
      float: left;
      border: solid #444;
      border-width: 1px 1px 0;
      margin-right: 11px;
    }
    a {
      display: block;
      height: 44px;
      padding: 0 19px;
      background: #fff;
    }
    li:hover {
      margin-top: 0;
    }
    li:hover a {
      height: 50px;
    }

body部分代码

<ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
  </ul>

鼠标悬浮时从英语显示为中文

ul {
      width: 800px;
      height: 26px;
      background: pink;
      border-bottom: 10px solid orange;
      padding: 0;
      margin: 50px auto;
    }
    li {
      list-style: none;
      float: left;
      margin-right: 7px;
    }
    a {
      display: block;
      width: 102px;
      height: 26px;
      background: #ccc;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
    }
    .zh {
      display: none;
    }
    li:hover .en {
      display: none;
    }
    li:hover .zh {
      display: block;
    }

body代码部分

<ul>
    <li>
      <a href="#" class="en">English1</a>
      <a href="#" class="zh">汉语</a>
    </li>
    <li>
      <a href="#" class="en">English2</a>
      <a href="#" class="zh">汉语</a>
    </li>
    <li>
      <a href="#" class="en">English3</a>
      <a href="#" class="zh">汉语</a>
    </li>
    <li>
      <a href="#" class="en">English4</a>
      <a href="#" class="zh">汉语</a>
    </li>
  </ul>

鼠标悬浮时出现黄色背景

css部分代码

* {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 800px;
      height: 44px;
      /* border: 1px solid #000; */
      margin: 50px auto;
      background: url(images/line.png) repeat-x left bottom;
    }
    li {
      margin: 0 5px;
      list-style: none;
      float: left;
    }
    a {
      display: block;
      width: 77px;
      height: 38px;
      /* background: pink; */
      margin-top: 6px;
      text-align: center;
      line-height: 30px;
    }
    a:hover {
      margin-top: 0px;
      height: 44px;
      background: url(images/line2.png) repeat-x;
    }

body部分代码

<ul>
    <li>
      <a href="#">simple</a>
    </li>
    <li>
      <a href="#">simple</a>
    </li>
    <li>
      <a href="#">simple</a>
    </li>
    <li>
      <a href="#">simple</a>
    </li>
    <li>
      <a href="#">simple</a>
    </li>
  </ul>

二级导航

css部分代码

* {
      margin: 0;
      padding: 0;
    }
    li {
      width: 200px;
      height: 50px;
      list-style: none;
      text-align: center;
      line-height: 50px;
      background: pink;
      border: 2px solid #000;
    }
    .firstUl {
      width: 900px;
      height: 50px;
      margin: 50px auto;
    }
    .firstUl>li {
      float: left;
      position: relative;
    }
    .secondUl {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 52px;
      left: -2px;
      display: none;
    }
    .secondUl>li {
      position: relative;
    }
    
    .thirdUl {
      width: 200px;
      height: 150px;
      position: absolute;
      left: 202px;
      top: -2px;
      display: none;
    }

    .firstUl>li:hover .secondUl {
      display: block;
    }
    .secondUl>li:hover .thirdUl {
      display: block;
    }

html部分代码

<ul class="firstUl">
    <li>首页</li>
    <li>
      产品中心
      <ul class="secondUl">
        <li>产品1</li>
        <li>产品2</li>
        <li>
          产品3
          <ul class="thirdUl">
            <li>产品31</li>
            <li>产品32</li>
            <li>产品33</li>
          </ul>
        </li>
        <li>
          产品4
          <ul class="thirdUl">
            <li>产品41</li>
            <li>产品42</li>
            <li>产品43</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      客户服务
      <ul class="secondUl">
        <li>客户1</li>
        <li>客户2</li>
        <li>客户3</li>
        <li>客户4</li>
      </ul>
    </li>
    <li>联系我们</li>
  </ul>

二级导航

 * {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 800px;
      height: 50px;
      border: 1px solid #000;
      margin: 50px auto;
      position: relative;
    }
    li {
      width: 200px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      list-style: none;
      float: left;
    }
    div {
      width: 900px;
      height: 300px;
      background: pink;
      position: absolute;
      left: -50px;
      top: 51px;
      display: none;
    }
    li:hover div {
      display: block;
    }

<ul>
    <li>
      人擦培养
      <div>1</div>
    </li>
    <li>
      人擦培养
      <div>2</div>
    </li>
    <li>
      人擦培养
      <div>3</div>
    </li>
    <li>
      人擦培养
      <div>4</div>
    </li>
  </ul>