如何作出這樣的下拉的引導

-1

我與自舉一個簡單的導航欄，

現在該怎麼做導航欄的下拉列表中，以這種像照片添加？

在紅色圓圈中標記了三角形邊緣。

我也曾嘗試this example但不是在這裏工作：'（

我的代碼在這裏給出：

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Bootstrap 101 Template</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
    </body> 
 
</html>

來源

2017-09-03 Amin

在堆棧溢出時，不鼓勵詢問一般幫助的問題。在發佈問題之前，預計您已經**研究了您的問題，並嘗試親自編寫代碼**。如果您遇到* specific *，請返回並在[Minimal，Complete和Verifiable示例]（https://stackoverflow.com/help/mcve）中包含您嘗試過的內容以及相關代碼的摘要。請閱讀[Stack Overflow用戶需要多少研究工作]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） – FluffyKitten

實際上我被困在創建三角形的形狀中（用紅色圓圈標記） – Amin

您仍然需要在[最小，完整和可驗證示例]中向我們顯示您已有的代碼*（https://stackoverflow.com/help/mcve），以便我們可以提供幫助。 – FluffyKitten

現場演示：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

代碼下拉

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    .dropdown-menu:before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #ccc; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 

.dropdown-menu:after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #ffffff; 
    border-left: 6px solid transparent; 
    content: ''; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <h2>Dropdowns</h2> 
    <p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">JavaScript</a></li> 
     <li class="divider"></li> 
     <li><a href="#">About Us</a></li> 
    </ul> 
    </div> 
</div> 

</body> 
</html>

來源

2017-09-03 11:22:14

其中一個帶有三角形邊緣的紅色圓圈標記爲 – Amin

@Amin：現在添加了CSS下拉菜單，它與您正在查看的完全相同。 –

如何作出這樣的下拉的引導

回答

相關問題