How to put a submenu in a menu I already have?

Navigation
3

I'm editing the blog, and I wanted to make a menu with submenus, but I do not know exactly what makes it happen. I tried searching google but I did not get anything. Only css tutorials appear, but nothing specific that can tell me what css code does that. I want to know exactly what makes a menu stick with a submenu ... javascript, css, jquery .. Anything ...

I'm using this code, which works fine ... link

I just want to put a submenu in it. As you are below: 

header {
  min-height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
  background: #ECECEC;
  z-index: 2;
}

header ul {
  padding: 15px 10px 0 0;
}

header li {
  border-left: 1px solid #ccc;
}

header li:first-child {
  border: none;
}

header li a {
  display: block;
  padding: 0 10px;
  color: #999;
  font-size: 16px;
  line-height: 30px;
  text-decoration: none;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

header li a:hover {
  color: #333;
}
header > ul > li > ul{
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-moz-opacity: 0.00;
opacity: 0.00;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
 
header > ul > li:hover > ul{
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
@media screen and (max-width: 767px) {
  header .control-nav {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid #333;
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }
  header .control-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: #333;
  }
  header .control-nav-close {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  header nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    border-left: 1px solid #ccc;
    background: #fff;
    overflow-x: auto;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
}

#control-nav:checked ~ .control-nav-close {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#control-nav:checked ~ nav {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}
<head>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>
<header>
  <h1 class="fL">
    <a href="#" title="">Teste</a>
  </h1>

  <nav class="fR">
    <ul class="l2">
      <li>
        <a href="#" title="">Menu</a>
      </li>
      <li>
        <a href="#" title="">Quem sou?</a>
        <li>
          <a href='#' title=''>Categorias</a>
          <ul>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 1</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 2</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 3</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 4</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 5</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 6</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 7</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 8</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 9</a></li>
            <li><a href='#' title='Sub Produto 1'>Sub Produto 10</a></li>
            <li><a href='#' title='Sub Produto 2'>Sub Produto 11</a></li>
            <li><a href='#' title='Sub Produto 3'>Sub Produto 12</a></li>
          </ul>
        </li>
        <li>
          <a href="#" title="">Contato</a>
        </li>
        <li>
          <a href="#" title="">Anuncie</a>
        </li>
    </ul>
  </nav>
</header>

How do I do now so that it only appears when I move the mouse?

I'm sorry if I did not explain it right!

    
asked by anonymous 02.02.2016 / 10:48

3 answers

0

The display: none hides the submenu and the display: block makes it appear ... I put the following code in css, and it worked. Note: The answers above are correct .. But here's how I put it on my menu. 

/*Escondendo o submenu*/
header li ul {
position: absolute;
display: none;
background-color: #ECECEC;
}
/*Estilo do submenu, e também fazendo-o aparecer.*/
header li ul a {
display: block;
text-decoration: none;
color: #777;
}
    
04.02.2016 / 15:10
2

Well, as you are using an HTML and CSS example, you could use this HTML and CSS and edit as best you want, follow the codes: 

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Bruto</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

E Follow the CSS: 

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

I found these codes in the following link:

link

I ran the test and it works fine.

Until.

    
03.02.2016 / 12:12
1

Just add these two classes to your CSS: 

/* SUBMENU */
header nav ul li > ul{ /* esse último "ul" seria o submenu */
  display: none;
}

header nav ul li:hover > ul{
   display: block;
}

The first one hides your SubMenu when you enter the site.

And the second opens SubMenu when you hover over the main LINK. Note the use of hover .

    
03.02.2016 / 12:17
Infinite Loop, object orientation I can not return the authenticated user in Laravel