<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">名稱</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">active</a></li> <li><a href="#">純連結</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉選單 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉選單 1</a></li> <li><a href="#">下拉選單 2</a></li> <li><a href="#">下拉選單 3</a></li> <li class="divider"></li> <li><a href="#">下拉選單 4</a></li> <li class="divider"> < /li> <li><a href="#">下拉選單 5</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉選單含圖 <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#"> <img src="https://picsum.photos/100/100/?random=1"> 下拉選單 1 </a> </li> <li> <a href="#"> <img src="https://picsum.photos/100/100/?random=11"> 下拉選單 2 </a> </li> <li> <a href="#"> <img src="https://picsum.photos/100/100/?random=10"> 下拉選單 3 </a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="輸入要搜尋的文字"> </div> <button type="submit" class="btn btn-default">搜尋</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">連結</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉選單 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉選單 1</a></li> <li><a href="#">下拉選單 2</a></li> <li><a href="#">下拉選單 3</a></li> <li class="divider"></li> <li><a href="#">下拉選單 4</a></li> </ul> </li> </ul> </div> </div> </nav> </div>

body { margin: 30px 0px; } .navbar-default .navbar-nav>li.dropdown:hover>a, .navbar-default .navbar-nav>li.dropdown:hover>a:hover, .navbar-default .navbar-nav>li.dropdown:hover>a:focus { background-color: rgb(231, 231, 231); color: rgb(85, 85, 85); } li.dropdown:hover>.dropdown-menu { display: block; }