大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > CSS问答 > Bootstrap导航条鼠标悬停下拉菜单

Bootstrap导航条鼠标悬停下拉菜单

关注:0时间:2015-11-24浏览:1481回答:10问题发起人:daxueit

Bootstrap导航条鼠标悬停下拉菜单,鼠标移上菜单上去鼠标悬浮显示下拉菜单。

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。


回答列表

  • 11-24

    HTML代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Bootstrap导航条鼠标悬停下拉菜单</title>
    	<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
    	<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
    	<script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
    	</head>
    	<body>
    		<div class="container">
    			<div class="span12">
    				<h1>Bootstrap导航条鼠标悬停下拉菜单</h1>
    				<p>Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。</p>
    				<div class="navbar">
            <div class="navbar-inner">
              <ul class="nav">
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li class="dropdown"> <a href="#menu3">Menu3</a>
                  <ul class="dropdown-menu">
                    <li><a href="#menu7">Menu7</a></li>
    								<li><a href="#menu8">Menu8</a></li>
                  </ul>
                </li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
              </ul>
            </div>
          </div>
    			</div>
    		</div>
    	</body>
    </html>

    CSS代码

    .navbar .nav > li .dropdown-menu {
    	margin: 0;
    }
    .navbar .nav > li:hover .dropdown-menu {
    	display: block;
    }



我要回答

该问题已停止回答,谢谢您的关注^_^