知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    UL LI结构实现二级导航菜单(HTML+CSS+JS)

    作者:佳明妈 来源:懒人建站 2009-12-02 人气:
    UL LI结构的二级导航菜单,HTML+CSS+JS来实现。修改说明:宽高主要是修改下面的几个样式。

    UL LI结构的二级导航下拉菜单,HTML+CSS+JS来实现。

    修改说明:

    宽高主要是修改下面的几个样式。

    #nav a {
     display: block; width: 80px; text-align:center;
    }
    #nav li {
     float: left; width: 80px; background:#CCC;
    }
    #nav li ul li{
     float: left; width: 180px;
     background: #F6F6F6;
    }
    #nav li ul a{
     display: block; width: 165px;_width: 180px;height:auto; margin:0 auto;text-align:left; padding-left:15px;
    }

    部分结构如下:

    <ul id="nav">
    <li><a href="http://www.51xuediannao.com">懒人建站</a>
        <ul>
            <li><a href="http://www.51xuediannao.com/JS/nav/">CSS导航菜单</a></li>
            <li><a href="http://www.51xuediannao.com/JS/Slide/">FLASH焦点图</a></li>
            <li><a href="http://www.51xuediannao.com/JS/texiao/">网页特效JS</a></li>
            <li><a href="http://www.51xuediannao.com/JS/AD/">JS广告代码</a></li>
        </ul>
    </li>
    <li><a href="http://www.51xuediannao.com/show">欣赏借鉴</a>
         <ul>
            <li><a href="http://www.51xuediannao.com/show/qiye/">企业类网站</a></li>
            <li><a href="http://www.51xuediannao.com/show/hangye/">行业类网站</a></li>
            <li><a href="http://www.51xuediannao.com/show/blog/">BLOG类网站</a></li>
            <li><a href="http://www.51xuediannao.com/show/menhu/">门户类网站</a></li>
            <li><a href="http://www.51xuediannao.com/show/shop/">商城类网站</a></li>
         </ul>
    </li>
    <li><a href="http://www.51xuediannao.com/jiqiao/">建站技巧</a>
         <ul>
            <li><a href="http://www.51xuediannao.com/jiqiao/html/">HTML技巧</a></li>
            <li><a href="http://www.51xuediannao.com/jiqiao/css/">CSS技巧</a></li>
            <li><a href="http://www.51xuediannao.com/jiqiao/cms/">CMS建站技巧</a></li>
            <li><a href="http://www.51xuediannao.com/jiqiao/qita/">其他技巧</a></li>
         </ul>
    </li>
    <li><a href="http://51xuediannao.com">懒人建站</a>
        <ul>
            <li><a href="http://www.51xuediannao.com/JS/nav/">CSS导航菜单</a></li>
            <li><a href="http://www.51xuediannao.com/JS/Slide/">FLASH焦点图</a></li>
            <li><a href="http://www.51xuediannao.com/JS/texiao/">网页特效JS</a></li>
            <li><a href="http://www.51xuediannao.com/JS/AD/">JS广告代码</a></li>
        </ul>
    </li>

    <li><a href="#">在线演示</a>
        <ul>
            <li><a href="http://51xuediannao.com/JS/nav/">CSS导航菜单</a></li>
            <li><a href="http://51xuediannao.com/JS/Slide/">FLASH焦点图</a></li>
            <li><a href="http://51xuediannao.com/JS/texiao/">网页特效JS</a></li>
            <li><a href="http://51xuediannao.com/JS/AD/">JS广告代码</a></li>
        </ul>
    </li>
    <li><a href="http://51xuediannao.com/jiqiao/">建站技巧</a>
         <ul>
            <li><a href="http://51xuediannao.com/jiqiao/html/">HTML技巧</a></li>
            <li><a href="http://51xuediannao.com/jiqiao/css/">CSS技巧</a></li>
            <li><a href="http://51xuediannao.com/jiqiao/cms/">CMS建站技巧</a></li>
            <li><a href="http://51xuediannao.com/jiqiao/qita/">其他技巧</a></li>
         </ul>
    </li>
    </ul>

    ↓ 查看全文

    UL LI结构实现二级导航菜单(HTML+CSS+JS)由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    UL LI结构实现二级导航菜单(HTML+CSS+JS)-最新评论