Colocando sub menu em menu

Victor Kovsky · Janeiro 25, 2019

Galera to com uma dor de cabeça danada quero abri um SUBmenu no meu MENU principal mas não consigo alguém ajuda?

<html>
<head>
<style type="text/css">
#menutop {
background:$(tabs.background.color); /* Cor de fundo */
border-left: 40px solid $(tabs.background.color); /* tamanho da borda e cor- não retire pq ela centraliza o menu */
width: 100%;
height: 45px;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
transition: .4s ease;
}
#topmenu {
width: 100%;
float: left;
font: $(tabs.font);
font-weight: 300 !important;
text-transform: none;
}
#topmenu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 0px 0px; /* Bordas aredondadas do sub-menu */
}
#topmenu li{
float:left;
padding:0px;
}
#topmenu li a{
border-right: 0px solid #fff;
color:$(tabs.text.color); /* Color de la fuente */
display:block;
line-height:45px;
margin:0px;
padding:0px 30px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
#topmenu li a:hover, .menu ul li:hover a {
background: $(tabs.selected.background.color); /* Cor das casas ao passar o cursor */
text-decoration:none;
color:$(tabs.selected.text.color);/* Color de la fuente */
}
#topmenu li ul {
background: #f9f9f9; /* Cor de fundo do sub-menu */
color: #000; !important;
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
#topmenu li:hover ul{
display:block;
}
#topmenu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
#topmenu li:hover li a {
background: none;
border-radius: 0px 0px 0px 0px; /* Borda das sub-casas */
}
#topmenu li ul a {
display:block;
height:45px;
font: $(tabs.text);
font-style:normal;
color:#000; /* Cor do texto ao passar o cursor */
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#topmenu li ul a:hover, .menu li ul li:hover a{
background: $(tabs.selected.background.color); /* Cor das sub-casas ao passar o cursor */
color:$(tabs.selected.text.color);/* Color de la fuente */
text-decoration:none;
}
</style>

</head>
<body>
<div id="menutop">
<div id="topmenu">
<ul>

</ul>
</div>
</div>

</body>
</html>

wanderval · Janeiro 27, 2019

Dá uma olhada nessa implementação, basicamente o que eu fiz foi adicionar uma tag "ul" dentro da tag "li" de cada item, e no evento hover é exibido o sub menu de cada item principal do menu:

HTML:

<div id="menutop">
   <div id="topmenu">
    <ul>
      <li><img src="https://4.bp.blogspot.com/-t56wax3rupo/XEsaJP0vvBI/AAAAAAAAADI/KnF75is9HEMHGH0KDxOqTX3QhS0_v5tZgCLcBGAs/s1600/asasas.png" alt="MENU">
       <ul>
          <li>
            <a href="URL">menu 1</a>
            <ul class="sub-menu">
              <li><a href="URL">menu 1 1</a></li>
              <li><a href="URL">menu 1 2</a></li>
              <li><a href="URL">menu 1 3</a></li>
            </ul>
         </li>
         <li>
           <a href="URL">menu 2</a>
           <ul class="sub-menu">
              <li><a href="URL">menu 2 1</a></li>
              <li><a href="URL">menu 2 2</a></li>
              <li><a href="URL">menu 2 3</a></li>
            </ul>
         </li>
         <li><a href="URL">menu 3</a></li>
         <li><a href="URL">menu 4</a></li>
        </ul>
      </li>
     </ul> 
   </div>
  </div>

CSS adicionado:

/*Custom CSS*/
#topmenu ul > li ul > li ul.sub-menu {
  display: none; 
}

#topmenu ul > li ul > li:hover ul.sub-menu{
  display: block;
  position: relative;
}

#topmenu  li li {
  display: inline-block;
}

#topmenu ul > li ul > li ul.sub-menu li {
  padding-left: 30px;
}