Create Dropdown Menu

Asked

Viewed 4,152 times

1

Could someone help me? I would like to turn this menu into a dropdown menu, but I don’t have the knowledge yet, and I would 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>
html css menu dropdown

  • See on the website Dinamic Drive. There are many things ready, and it is possible to customize.

  • http://www.w3schools.com/css/css_dropdowns.asp

3 answers

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

0

Hello, Bootstrap came to make life easier with css. it standardizes the whole css structure and has on that website has a documentation with everything almost ready! :)

Simply associate one of the three Tags in Head by referencing the css, jQuery library and 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>

0

@Renan you asked about css??

I will try to explain in detail:

First you should realize that your code is inside a Nav, ok you said to the browser semantically that here inside the Nav will be your navigation session ok, soon after you put a ul and inside that ul, you put 5 li(s);

Explaining how you could style this in css;

Keep in mind that you start styling ul father,

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

now you would style 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 inside your li(s) another ul:

/*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, even here if you understood the code, it will be easy for you to have the logic of how to build a drop down menu, get turned on that there are hundreds ways to do this, the interesting thing would be you try to understand the selector, properties, values and the way of declaring them, how the hierarchy of css works is not easy to get mad at first, but practice leads to perfection. I hope I’ve helped in some way.

Browser other questions tagged html css menu dropdown

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