下拉菜单


  • 所有元素必须放在同一个.dropdown内!
  • 改下拉菜单宽度的话要改dropdown-menu的style

<ul class="dropdown-menu" style="min-width:150%;">
插入符:

<p>插入符实例
  <span class="caret"></span>
</p>

  • <div class="dropdown"></div> 包围了下拉菜单
  • <span class="caret"></span> 插入符
  • <button ... data-toggle="dropdown"> 声明dropdown事件实 现点击向下拓展
  • <ul class="dropdown-menu"></ul>下拉菜单中被隐藏的内容
  • <li></li> 内部元素
  • <li role="presentation" class="divider"></li> 中间线
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>
image.png

导航页的下拉菜单:

<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a></li>
    <li>
        <a href="#">SVN</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
            <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">Swing</a></li>
            <li>
                <a href="#">jMeter</a></li>
            <li>
                <a href="#">EJB</a></li>
            <li class="divider"></li>
            <li>
                <a href="#">分离的链接</a></li>
        </ul>
    </li>
    <li>
        <a href="#">PHP</a></li>
</ul>
image.png

怎么实现鼠标悬浮弹出?
.nav> li:hover .dropdown-menu {display: block;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容