【純CSS 下拉式選單】：CSS多層級menu、CSS下拉式menu

詳細內容
分類: CSS
點擊數: 6414

Multi-Level Drop-Down Menu for CSS


 

STYLE CSS

CSS設定裡/*---show---*/註解中的內容為下拉選單主要呈現的效果。

(/*---show---*/之外的CSS樣式可自行更換。本人製作最簡單的格式給各位，為在教學使用上較易理解。)

*{
 padding:0;
 margin:0;
}
#cssmenu{
 width:720px;
 margin-right: auto;
 margin-left: auto;
}
/*-------view style----------*/
.nav,.nav ul {
 list-style-type: none;
}
.drop a {
 color: #000;
 text-decoration: none;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
}
.drop{
 float:left;
 width:100px;
 background-color: #0C0;
 position:relative;
 height:20px;
 line-height: 20px;
}
.m4 {
 background-color:#093
}
.drop:hover{
 background-color: #FF0;
 color: #FFF;
}
.drop ul li:hover{
 background-color: #6C0; 

}
.drop .dlist{
 background-color: #F00;
 width:150px;
 position: absolute;
 top:20px;
 left:0px;
}
.m4 ul {
 background-color:#F60;
}
.drop .fly{
 display:block;
 position:relative;
 width:150px;

}

.drop .fly ul{
 position: absolute;
 display:block;
 width:150px;
 top:0px;
 right:-150px;
 background-color: #09F;
}
.m4 .fly ul {
 background-color:#FC0;
}
/*-----------show---------------*/
.drop ul{
 display: none;
}
.drop:hover ul {
 display: block;
}
.drop .fly ul {
 display: none;
}
.drop .fly:hover ul {
 display: block;
}
.drop .fly .fly ul {
 display: none;
}
.drop .fly .fly:hover ul {
 display: block;
}
.drop .fly .fly .fly ul {
 display: none;
}
.drop .fly .fly .fly:hover ul {
 display: block;
}

/*-------show-------------*/

HTML

<dl class="nav"> 
   <dd class="drop m1 "><a href="#">HOME</a></dd> 
   <dd class="drop m2"><a href="#">ABOUT US</a> 
                <ul class="dlist"> 
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li> 
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            <li><a href="#">EFFUVIUM</a></li> 
                            <li><a href="#">VIEW</a></li>  
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
<dd class="drop m3"><a href="#">DESIGN</a> 
                <ul class="dlist"> 
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>
                            <li><a href="#">LANDFIL</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>  
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            <li><a href="#">EFFUVIUM</a></li> 
                            <li><a href="#">VIEW</a></li>  
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
        <dd class="drop m4"><a href="#">DRAW</a> 
                <ul class="dlist"> 
                   <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>
                            <li><a href="#">LANDFIL</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>  
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            <li><a href="#">EFFUVIUM</a></li> 
                            <li><a href="#">VIEW</a></li>  
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
         <dd class="drop m5"><a href="#">FILM</a> 
             <ul class="dlist"> 
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>
                            <li><a href="#">LANDFIL</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>  
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
         <dd class="drop m5"><a href="#">PRODUCT</a> 
             <ul class="dlist">
                      <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a>  
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li>
                            <li><a href="#">video</a></li> 
                            <li><a href="#">video</a></li> 
                            <li><a href="#">video</a></li>  
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>
                            <li><a href="#">LANDFIL</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>  
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
         <dd class="drop m6"><a href="#">CANTACT</a> 
             <ul class="dlist"> 
               <li class="fly"><a href="#">PREVENTION</a> 
                  <ul> 
                     <li><a href="#">video</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>
                            <li><a href="#">LANDFIL</a></li> 
                     <li class="fly"><a  href="#">Dig-web</a> 
                        <ul> 
                           <li><a href="#">Kodak</a></li> 
                           <li><a href="#">Canon</a></li> 
                           <li><a href="#">Nikon</a></li> 
                           <li><a href="#">Panasonic</a></li> 
                        </ul> 
                     </li>  
                     <li><a href="#">TRUCKS</a></li>
                            <li><a href="#">PLANT</a></li> 
                            
                  </ul> 
               </li>
                    <li class="fly"><a href="#">PREVENTION2</a> 
                    <li class="fly"><a href="#">PREVENTION4</a> 
                    <li class="fly"><a href="#">PREVENTION5</a> 
                </ul>
      </dd>
</dl>

 

Demo
 

 

IE6 解決方法


body {
 _behavior: url("csshover3.htc");/*---ie6支援hover--加入body---*/
}

 

 

*註解：
關於CSS鏈結_behavior上增加(" ")這兩個符號解釋為url("csshover3.htc"); ----表示csshover3.htc在此網頁資料夾上。然而一般使用的是url(#);才是所謂的依照檔案位址指定路徑。

例如：有個圖片檔名為img.jpg要設定為body的背景。

  body{
           backgroud-img: url(/ucamc/..images/img.jpg);
           } /*----此img.jpg在外面的images資料夾裡。----*/ 

我測試使用("")兩個符號，設定圖片背景img.jpg
 
 body{
           backgroud-img: url("/ucamc/img.jpg");
           } /*-----------是沒有反應的----------*/ 
所以結論為，url("#") 只能設定使用_behavior載入在此網頁本身資料夾上。

相關資料夾路徑設定方法有：
 
  [ / ]：下層資料夾 (/imges/img.jpg)
  [../ ]：上層資料夾(../imges/img.jpg)
 
相信這樣解釋大家能夠了解，csshover將要放在哪裡做連結，比較不會混淆，而達不到功效。



 

範例檔案內附csshover3.htc檔案

下載範例程式碼

您會有興趣的文章：【jQuery教學】jQuery切換不同CSS樣式style：切換class、切換樣式、轉換不同CSS

 

Copyright © 2018 ucamc