dropdown-menu does not work Bootstrap

Asked

Viewed 253 times

2

UPDATE

I am developing an application and I am doing the menu and when clicking on Sign in/Register it does not appear the items of dropdown-menu bootstrap does not work

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <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/bootstrap/bootstrap.min.js"></script>

    <script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.maskedinput.js" type="text/javascript"></script>
    <script src="js/jquery.maskedinput.min.js" type="text/javascript">
     </script>
    <script src="bootstrap/bootstrap.min.js" type="text/javascript">
   </script>
    <script src="bootstrap/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/css.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

 <ul class="menu_2">

<div class="btn-group" role="group">
 <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Entre/Cadastre-se
  <span class="caret"></span>
</button>
<ul class="dropdown-menu">
  <li><a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a></li>
  <li><a href="#"><i class="fa fa-gear"></i> Meus Dados</a></li>
  <li><a href="#"><i class="fa fa-group"></i> Fale Conosco</li>
    <li role="separator" class="divider"></li>
  <li><a href="#">Entrar</a></li>
  <li><a href="cadastro.jsp"> Cliente novo? Cadastre-se</a></li>
  </ul>
 </div>
 <button type="button" class="carrinho btn btn-default">Carrinho <i class="fa fa-shopping-cart"></i> ( )</button>
 </div>
  </ul>

   .menu_2{
  padding: 10px;
  font-size: 10pt;  
  margin-top: 40px;
  color: #6495ED;

  }

 .user{
  margin-right: 30px;
  font-size: 12pt;
  border: 1px solid;
   float: left;
   height: 49px;
   line-height: 49px;
   font-family: "Times New Roman";

   }

inserir a descrição da imagem aqui

html css html5 css3

1 answer

2


I didn’t test it here, but if you put the float in .menu_2 not right??

.menu_2{
padding: 10px;
font-size: 10pt;  
margin-top: 23px;
color: #6495ED;
float: left;
}

And you’ve tried using Boostrap??

Something more or less like the example below would solve your case, without having to tinker with CSS anymore:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="btn-group" role="group">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Entre/Cadastre-se
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#"><i class="fa fa-laptop"></i> Meus Pedidos</a></li>
      <li><a href="#"><i class="fa fa-gear"></i> Meus Dados</a></li>
      <li><a href="#"><i class="fa fa-group"></i> Fale Conosco</li>
        <li role="separator" class="divider"></li>
      <li><a href="#">Entrar</a></li>
      <li><a href="cadastro.jsp"> Cliente novo? Cadastre-se</a></li>
    </ul>
  </div>
   <button type="button" class="carrinho btn btn-default"><i class="fa fa-shopping-cart"></i></button>
</div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • Fernando VR I updated the question because I had another problem and I put the updated code you posted but when clicking Between/Register the intense dropdown-menu do not present

  • @Felipepatrocinio, so first you have to pay attention to the repeated scripts you are using, this can give conflicts and errors in your code. you are linking jquery and bootstrap twice in your code. You need to fix this. Another thing, always put everything q for javascript at the end of your code and not at the beginning, so it runs after q html is loaded. Take a look at the example I put, leaving CSS at the beginning and SCRIPT at the end. About Dropdowns, check out this link: https://getbootstrap.com/docs/3.components/#dropdowns

  • Sorry not to give more details now, I’m in the rush here, and not giving time to analyze your code, but just you enter the link I gave you, and see how q has to be the structure of dropdowns and follow the same logic. It’s very simple. Anything copies the code I sent you, and moves along line by line until you find where your code is giving problem.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.