bootstrap 自动弹出下拉实例

css里面添加

/** 自动弹出下拉菜单 **/

.dropdown-hover .dropdown-menu li:hover .submenu

{

visibility:visible

}

.dropdown-hover .dropdown:hover .dropdown-menu

{

display:block

}

一级ul里面含    <ul class="nav dropdown-hover">

含子菜单的li里面含   <li class="dropdown">

参考网站  http://idc.wopus.org/

html代码 

<div class="navbar ">

                

                    <div class="navbar-inner">

                    

                                

                                

<div class="nav-collapse">

    <ul class="nav dropdown-hover">

        <li class="active"><a href="./idc_files/idc.htm">首 页</a></li>

        <li class="dropdown">

            <a href="http://idc.wopus.org/host/"  >

                国内主机 <b class="caret"></b>

            </a>

            <ul class="dropdown-menu">

                

    <li>

        <a href="http://idc.wopus.org/host/ct/">电信主机</a>

    </li>

    <li>

        <a href="http://idc.wopus.org/host/yun/">多线主机</a>

    </li>

    <li>

        <a href="http://idc.wopus.org/host/netcn/">万网双线主机</a>

    </li>

    <li>

        <a href="http://idc.wopus.org/host/hk/">香港主机</a>

    </li>

            </ul>

        </li>

        <li class="dropdown">

            <a href="http://idc.wopus.org/foreign/" class="dropdown-toggle" data-toggle="dropdown">

                国外主机 <b class="caret"></b>

            </a>

            <ul class="dropdown-menu">

                

    <li>

        <a href="http://idc.wopus.org/foreign/vps/">VPS合租</a>

    </li>

    <li>

        <a href="http://idc.wopus.org/foreign/sin/">新加坡主机</a>

    </li>

    <li>

        <a href="http://idc.wopus.org/foreign/cp/">美国主机</a>

    </li>

            </ul>

        </li>

        <li class="dropdown">

            <a href="http://idc.wopus.org/domain/" class="dropdown-toggle" data-toggle="dropdown">

                域 名 <b class="caret"></b>

            </a>

            <ul class="dropdown-menu">

                <li>

                    <a href="http://idc.wopus.org/domain/">域名注册</a>

                </li>

                <li>

                    <a href="http://idc.wopus.org/domain/price/">域名价格</a>

                </li>

                <li>

                    <a href="http://i.wopus.org/idc/domain/">域名管理</a>

                </li>

            </ul>

        </li>

        <li><a href="http://idc.wopus.org/article/">公 告</a></li>

        <li><a href="http://help.wopus.org/" target="_blank">主机帮助</a></li>

        

    </ul>

</div>

                            </div>

                        </div>

转载于:https://my.oschina.net/xiaons/blog/164212