學習CSS製作菜單列表，舉一反三

-Advertisement-

1、普通的二三級菜單 2、變成水平方向 3、彈簧式菜單製作的方式多種多樣，這次先給大家分享這幾種，如大家有好的建議和菜單效果，可以在下方回覆給我，大家共同學習一下。 ...

　　1、普通的二三級菜單

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css菜單演示</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: arial, 宋體, serif;
    font-size: 12px;
}
#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
}
#nav a {
    display: block;
    width: 80px;
    text-align: center;
}
#nav a:link {
    color: #666;
    text-decoration: none;
}
#nav a:visited {
    color: #666;
    text-decoration: none;
}
#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
#nav li {
    float: left;
    width: 80px;
    background: #CCC;
}
#nav li a:hover {
    background: #999;
}
#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 180px;
    position: absolute;
}
#nav li ul li {
    float: left;
    width: 180px;
    background: #F6F6F6;
}
#nav li ul a {
    display: block;
    width: 180px;
    w\idth: 156px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}
#nav li ul a:hover {
    color: #F3F3F3;
    text-decoration: none;
    font-weight: normal;
    background: #C00;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}
-->
</style>
<script type="text/javascript">
function menuFix() {
 var sfEls = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseDown=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onMouseUp=function() {
  this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");
  }
 }
}
window.onload=menuFix;
</script>
</head>
<body>
<ul id="nav">
  <li><a href="#">產品介紹</a>
    <ul>
      <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>
      <li><a href="#">產品一</a></li>
    </ul>
  </li>
  <li><a href="#">服務介紹</a>
    <ul>
      <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>
      <li><a href="#">服務二</a></li>
    </ul>
  </li>
  <li><a href="#">成功案例</a>
    <ul>
      <li><a href="#">案例三</a></li>
      <li><a href="#">案例</a></li>
      <li><a href="#">案例三案例三</a></li>
      <li><a href="#">案例三案例三案例三</a></li>
    </ul>
  </li>
  <li><a href="#">關於我們</a>
    <ul>
      <li><a href="#">我們四</a></li>
      <li><a href="#">我們四</a></li>
      <li><a href="#">我們四</a></li>
      <li><a href="#">我們四111</a></li>
    </ul>
  </li>
  <li><a href="#">線上演示</a>
    <ul>
      <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>
      <li><a href="#">演示演示</a></li>
      <li><a href="#">演示演示演示</a></li>
      <li><a href="#">演示演示演示演示演示</a></li>
    </ul>
  </li>
  <li><a href="#">聯繫我們</a>
    <ul>
      <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>
      <li><a href="#">聯繫聯繫聯繫</a></li>
      <li><a href="#">聯繫聯繫聯繫</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

2、變成水平方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css菜單演示</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: arial, 宋體, serif;
    font-size: 12px;
}
#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
    width: 80px;
}
#nav a {
    display: block;
    width: 80px;
    text-align: center;
}
#nav a:link {
    color: #666;
    text-decoration: none;
}
#nav a:visited {
    color: #666;
    text-decoration: none;
}
#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
#nav li {/*float: left*/;
    width: 80px;
    background: #CCC;
}
#nav li a:hover {
    background: #999;
}
#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 180px;
    position: absolute;
}
#nav li ul li {
    float: left;
    width: 180px;
    background: #F6F6F6;
}
#nav li ul a {
    display: block;
    width: 180px;
    w\idth: 156px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

PHP面向對象之標識對象

/* 標識對象模式這個模式主要功能就是創建sql語句中的wehre條件字元串的，下麵直接看代碼和註釋: */ namespace woo\mapper; //欄位對象 class Field { protected $name = null; //欄位名稱 protected $operator ... ...
6.比較排序之快速排序

快速排序（簡稱快排）因為其效率較高（平均O(nlogn)）經常在筆試題中對其考查。對於快排的第一步是選取一個“基數”，將會用這個“基數”與其它數進行比較交換。而這個“基數”的選擇將影響到快排的效率如何，但如果為了選擇基數而選擇基數則會本末倒置。例如為了找到最佳基數，則需要在整個待排序列中找到中位數 ...
Python編碼紀要

Python編碼的一些見解，翻譯節選自http://book.pythontips.com/en/latest/index.html ...
docker~通過vs2017的Dockerfile來生成鏡像

Dockerfile這個東西我們之前是介紹過，它方便，快捷，易用，而在vs2017中也對docker進行了支持，而生成docker image的方式就是有用Dockerfile為基礎的，在添加docker支持之後，vs會為我們在根目錄下生成一個Dockerfile的文件，我們可以通過docker客戶 ...
億級流量電商詳情頁系統的大型高併發與高可用緩存架構實戰

課程基於真實的每日上億流量的大型電商網站中的商品詳情頁系統，作為項目實戰。詳細講解如何實現一個複雜的緩存系統架構，去直接支撐電商背景下的高併發與高性能的訪問，同時基於緩存架構本身所處的複雜分散式系統架構環境下，如何設計與實現一個高可用的分散式系統架構。 ...
行內元素轉為塊級元素的方法

以下彙總三種行內元素轉為塊級元素的方法：（1）display （2）float （3）position（absolute和fixed）少說多做，運行以下代碼看效果：通過審查元素查看是否轉為塊級元素： ...
nw.js的localStorage的物理儲存位置

#前言因為在做美團外賣商家端的nw.js殼子項目，需要保證在殼子裡面使用localStorage的數據可以持久化保存。發現nw可以保存，即使刪除應用重寫打包也可以保存，所以解決了這個需求，但是還是需要知道具體儲存在哪裡，否則不清楚什麼情況下數據會丟失。# 儲存位置nw.js打包出來的應用的local... ...
html中使用JS實現圖片輪播效果

1.首先是效果圖，要在網頁中實現下圖的輪播效果，有四張圖片，每張圖片有自己的標題，然後還有右下角的小方框，滑鼠懸浮在小方框上，會切換到對應的圖片中去。 2.先是HTML中的內容，最外層是輪播圖整個的容器“slideShowContainer”，裡邊是用來裝圖片的“picUl”和用來顯示小方框的“do ...