首页>>导航菜单>>jQuery下拉菜单，子菜单横向展开 横向排列(2014-05-18)

jQuery下拉菜单，子菜单横向展开 横向排列

jQuery下拉菜单，子菜单横向展开 横向排列
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="nav">  
  2.        <div class="navmain">  
  3.            <ul id="nav_all">  
  4.                <li><a href="http://www.freejs.net/">freejs</a>  
  5.                    <ul style="display: none;">  
  6.                        <li><a>这里可以写一些用于描述网站的话。</a></li>  
  7.                    </ul>  
  8.                </li>  
  9.                <li><a href="/">栏目二</a>  
  10.                    <ul style="display: none;">  
  11.                        <li style="width: 30px;"></li>  
  12.                        <li><a href="/">子栏目</a></li>  
  13.                        <li><a href="/">子栏目</a></li>  
  14.                        <li><a href="/">子栏目</a></li>  
  15.                        <li><a href="/">子栏目</a></li>  
  16.                        <li><a href="/">子栏目</a></li>  
  17.                    </ul>  
  18.                </li>  
  19.                <li><a href="/">栏目三</a>  
  20.                    <ul style="display: none;">  
  21.                        <li style="width: 30px;"></li>  
  22.                        <li><a href="/">子栏目</a></li>  
  23.                        <li><a href="/">子栏目</a></li>  
  24.                        <li><a href="/">子栏目</a></li>  
  25.                        <li><a href="/">子栏目</a></li>  
  26.                        <li><a href="/">子栏目</a></li>  
  27.                        <li><a href="/">子栏目</a></li>  
  28.                        <li><a href="/">子栏目</a></li>  
  29.                        <li><a href="/">子栏目</a></li>  
  30.                        <li><a href="/">子栏目</a></li>  
  31.                        <li><a href="/">子栏目</a></li>  
  32.                    </ul>  
  33.                </li>  
  34.                <li><a href="/">  
  35.                    <div style="_margin-top: 12px;"></div>  
  36.                    栏目四</a>  
  37.                    <ul style="display: none;">  
  38.                        <li style="width: 120px;"></li>  
  39.                        <li><a>别的栏目若没有子栏目，也可以写一些描述性的话。</a></li>  
  40.                    </ul>  
  41.                </li>  
  42.                <li><a href="/">栏目五</a>  
  43.                    <ul style="display: none;">  
  44.                        <li style="width: 280px;"></li>  
  45.                        <li><a href="/">子栏目</a></li>  
  46.                        <li><a href="/">子栏目</a></li>  
  47.                    </ul>  
  48.                </li>  
  49.                <li><a href="/">栏目六</a>  
  50.                    <ul style="display: none;">  
  51.                        <li style="width: 325px;"></li>  
  52.                        <li><a href="/"><b>子栏目</b></a></li>  
  53.                        <li><a href="/">子栏目</a></li>  
  54.                    </ul>  
  55.                </li>  
  56.                <li><a href="/">栏目七</a>  
  57.                    <ul style="display: none;">  
  58.                        <li style="width: 380px;"></li>  
  59.                        <li><a href="/">子栏目</a></li>  
  60.                        <li><a href="/">子栏目</a></li>  
  61.                        <li><a href="/">子栏目</a></li>  
  62.                        <li><a href="/">子栏目</a></li>  
  63.                    </ul>  
  64.                </li>  
  65.                <li><a href="/">栏目八</a>  
  66.                    <ul style="display: none;">  
  67.                        <li style="width: 440px;"></li>  
  68.                        <li><a>这里写下一段关于这个栏目的描述。</a></li>  
  69.                    </ul>  
  70.                </li>  
  71.                <li><a href="/">栏目九</a>  
  72.                    <ul style="display: none;">  
  73.                        <li style="width: 520px;"></li>  
  74.                        <li><a>相关描述。</a></li>  
  75.                    </ul>  
  76.                </li>  
  77.   
  78.            </ul>  
  79.        </div>  
  80.    </div>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_338.html