Create DropDown Menu

Question

Create DropDown Menu

Could anyone help me? I'd like to turn this menu into a dropdown menu, but I still don't have the knowledge to do so, and I'd like to ask for help.

/ / CSS

nav#mainnav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

nav#mainnav li {
    padding:0;
    border-bottom: 1px solid #99C581;
    border-top: 1px solid #6FAB4F;
}

nav#mainnav li.selected-item  {
    border-bottom:none;
}

nav#mainnav li.selected-item a,
nav#mainnav li.selected-item a:hover {
    color:#80B763;
    font-weight:bold;
    background: #fff;
}

nav#mainnav li a:hover {
    background:#669D48;
    color: #fff;
    text-decoration:none;
}

nav#mainnav li a {
    color: #f0f0f0;
    display: block;
    padding: 15px 17px;
    text-align: right;
    font-weight:  bold;
    text-decoration: none;
}

/ / HTML

<nav id="mainnav">
  <ul>
    <li class="selected-item"><a href="index.html">Home</a></li>
    <li><a href="#">Exemplo 1</a></li>
    <li><a href="#">Exemplo 2</a></li>
    <li><a href="#">Exemplo 3</a></li>
    <li><a href="#">Exemplo 4</a></li>
   </ul>
</nav>

1

html css menu dropdown

Author: Pedro, 2016-02-20

Source

3 answers

score 1 · Answer 1

You can start by changing the HTML structure of your menu, not that it is not possible to do with this structure, but it would be better to work differently. This is just an example and you need to make the modifications according to your needs

#mainnav ul{
  list-style: none;
}

#mainnav ul li{
  padding:10px 15px;
  background:#000000;
}

.wrapper-menu{
  position:relative;
}

.dropdown{
  position:absolute;
  left:0;
  display:none;
}


.wrapper-dropdown:hover > .dropdown{
  display:block;
}

<nav id="mainnav">
  <ul class="wrapper-menu">
    <li class="wrapper-dropdown">
      <a href="index.html">Home</a>
      <ul class="dropdown">
        <li><a href="#">Exemplo 1</a></li>
        <li><a href="#">Exemplo 2</a></li>
        <li><a href="#">Exemplo 3</a></li>
        <li><a href="#">Exemplo 4</a></li>
      </ul>
    </li>
   </ul>
</nav>

This HTML structure for dropdown can house several dropdowns, with this structure you currently use you could only put a few options

score 0 · Answer 2

@Renan did you ask about css??

I will try to explain in detail:

First vc should realize that your code is inside a nav, OK vc said to the browser semantically that here inside the nav will be your browsing session ok, then vc put a ul and inside that ul, vc put 5 li (s);

Explaining how vc could style this in css;

Keep in mind that vc starts styling the parent ul,

ul.menu {
      list-style:none; //Repara, quero remover as bolinhas das li(s)
}

Now vc iriá stylizes your links;

/*Configura todos os links do menu*/
ul.menu a {
      text-decoration:none; //Quero remover o sublinhado da linha
      color: #fff; //cor do link
      display:block; //faz com que o elemento HTML seja renderizado como bloco, aqui acontece a magica;
}


/*Faz os <li>s ficarem na horizontal*/
 ul.menu > li {
       //Perceba que não quero estilizar todas as lis, somente as que são filhos direto da minha ul pai;
       //Quero que as li(s) ficam deitadas ex:Home Contact  AboutMe  etc
       float:left; //irão flutuar a esquerda
       position:relative; //A posição relativa ao pai
 }

Explanation of relative and absolute css positioning

/*Configurar os links do menu principal*/
ul.menu > li > a {
     position: relative;
     padding: 20px;
     margin: 0 5px;
}

/*Configurar o efeito ao clicar o mouse no link*/
ul.menu > li > a:active{
    top: 3px;
    left: 2px;
    box-shadow: 0px -2px 0px #009900;
    font-size: 12px;
    width: 150px;
    text-align: center;
}

/*Configurar o fundo do menu principal quando o mause passar em cima do meu link*/
ul.menu > li > a:hover{
    background: #009900;
}

If you had another ul inside your li(s):

/*Mostrar o submenu no evento do mouse hover*/
ul.menu > li:hover > ul.submenu{
    display: block;
}

The rest of the settings of the sub-menu is similar, until here if you understood the code, it will be easy to have the logic of how to build a drop down menu, it is connected that there are hundreds ways to do this, the interesting would be you try to understand the selector, the properties, values and the to declare the same, how the css hierarchy works is not easy at first to be beast in this, but practice leads to perfection. I hope I helped in some way.

score 0 · Answer 3

Hello, Bootstrap came to make our life easier with css. it standardizes the entire css structure and has on this site has a documentation with everything almost ready! :)

Simply associate one of the three Tags in the Head by referencing the css, the jQuery library, and the compiled version, all three in this order:

<!DOCTYPE html>
<html lang="en-US">
<head>

<!--Obedeça esta estrutura de diretório, primeiramente o Bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- A Biblioteca jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- O Javascript compilado -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Seu Site</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Página 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Página 1-1</a></li>
          <li><a href="#">Página 1-2</a></li>
          <li><a href="#">Página 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Página 2</a></li>
      <li><a href="#">Página 3</a></li>
    </ul>
  </div>
</nav>
</div>

</body>
</html>