Jump to content
opl12

Nav Bar com DropDown em html

Recommended Posts

Podem me ajudar?
Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha

o que estou fazendo de errado?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
  <!-- Última versão CSS compilada e minificada -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Última versão JavaScript compilada e minificada -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>::: TESTE :::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}
</style>
  </head>
  <body>


  
	<nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
        <!--<img  width="80px" height="30" src="#" title="seu texto" vspace="10px"/>-->
        </div>

        <ul class="nav navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li>
            <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li>
            <li class="nav-link"><a href="#">LINK C</a></li>
            <li><a href="#">LINK D</a></li>
            <li><a href="#">LINK E</a></li>
            <li><a href="#">LINK F</a></li>
            <li><a href="#" target="a_blank">LINK G</a></li>   
                <div class="dropdown">
                    <div class="dropdown-content" id="myDropdown">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </div> 
        </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>  User</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li>
      </ul>

  </div>
</nav>




  </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Felper
      Criei um sistema de login com php e mysql mas não consigo realizar o login mesmo tendo certeza de que os dados foram cadastrados com sucesso. Não sei o que fiz de errado. Vejam o código:
      <?php $login2 = $_POST['loginlogar']; $senha2 = $_POST['senhalogar']; $link = mysqli_connect("localhost", "root", "", "bancolanche") or die("<h1>Não foi possível conectar!!</h1>". mysqli_error()); $banco = mysqli_select_db($link, "bancolanche") or die("<h1>Não foi possível abrir banco de dados!!</h1>". mysqli_error()); $sql = "SELECT login, senha FROM users"; $resulta = mysqli_query($link, $sql); while ($book = $resulta->fetch_object()) { $logindb = $book->login; $senhadb = $book->senha; } if($login2 == "" || $senha2 == ""){ $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Há campos de preenchimento obrigatório em branco.</h1>"; header("Location: logar.php"); } else { if($logindb==$login2 && $senhadb==$senha2){ $_SESSION['msg'] = "<h1 style='color:green'>Logoff realizado com sucesso!</h1>"; header("Location: index.html"); } else { $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Usuário inexistente ou senha incorreta.</h1>"; header("Location: logar.php"); } } mysqli_close($link); ?>  
    • By Felper
      Estou criando um jogo de avançar casas e não estou conseguindo somar os valores sorteados pelo dado. Quero fazer assim:
      let somadado=0;
      let valorsorteado=5;
      somadado=5;
      valorsorteado=3;
      somadado=8;
      valorsorteado=2;
      somadado=10;
       
      Assim por diante. 
       
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By Vanessa Andrade
      Bom dia Pessoal!
       Gostaria da ajuda de vocês, não tenho conhecimento aprofundado em html e css e a tray não quer me dar suporte para alteração desta fonte dizendo que é padrão.....
      Enfim a fonte está minuscula mal dá para entender o que está escrito, e não acho onde altero...
      https://www.lacee.com.br/loja/extra.php?loja=495949&amp;pagina=afiliados
       

    • By asacap1000
      Galera estou desenvolvendo uma aplicação na qual eu preciso mostrar as câmeras de monitoramento, as câmeras são da HIKVISION e tenho o link pronto pra mostrar porém sempre pede login e senha como mostra a imagem abaixo:

       
      Existe alguma forma de chamar essa tela e preencher via script 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.