Sub-menus opening together

Asked

Viewed 76 times

1

I want the sub-menu to have one more layer of menu. I made the Christian code that would work, however, when passing the mouse in the first sub-menu of the menu (Protectors > Motor), the options of the second sub-menu layer of the "Lighthouse" option are being opened together. How do I fix this?

.menu-categories {
  height: 50px;
}

.menu-categories ul {
  height: 50px;
  display: inline-block;
  font-family: helvetica;
  font-weight: bold;
  position: relative;
  ;
  margin-left: 5px;
  margin-top: 0px;
  padding: 0px;
}

.menu-categories ul a {
  display: inline-block;
  background: gold;
  text-align: center;
  font-size: 12pt;
  color: black;
  width: 120px;
  padding: 15px;
  text-decoration: none;
}

.submenu-items {
  width: fit-content;
  margin-top: 2px;
  position: absolute;
  display: none;
}

.submenu-items li {
  width: fit-content;
  height: fit-content;
  margin-top: 2px;
  list-style: none;
  position: relative;
}

.submenu-items li a {
  width: 120px;
  padding: 15px;
  margin-top: 0px;
  text-align: center;
  border-right: solid black 3px;
}

.deep-menu {
  display: none;
  width: 200px;
  height: 5px;
}

.deep-menu ul {
  height: fit-content;
  left: 150px;
  bottom: 50px;
}


/* As caixas do menu, "menu-categories", contém a rolagem, 
e citando a classe "sub-menu items" ela será de rolagem individual */

.menu-categories ul:hover .submenu-items {
  display: block;
}

.submenu-items a:hover {
  background-color: rgb(255, 115, 0);
}

.menu-categories div:hover .deep-menu {
  display: block;
}
<div class="menu-categories">
  <ul><a href="protetor.html">Protetores</a>
    <div class="submenu-items">
      <li><a href="prot-motor.html" title="Protetores de motor">Motor</a></li>
      <div class="deep-menu">
        <ul>
          <li><a href="protetormotorcg" title="Protetor Honda CG">Honda CG 125/150/160</a></li>
          <li><a href="protetormotorxre" title="Protetor Honda XRE">Honda XRE 300</a></li>
        </ul>
      </div>
      <li><a href="prot-farol.html" title="Protetores de farol">Farol</a></li>
      <div class="deep-menu">
        <ul>
          <li><a href="protetorfarolfactor" title="Protetor de Farol Factor">Yamaha Factor</a></li>
          <li><a href="proetorfarolcb300" title="Protetor de Farol XRE">Honda CB300</a></li>
        </ul>
      </div>
      <li><a href="prot-carenagem.html" title="Protetores de carenagem">Carenagem</a></li>
    </div>
  </ul>
  <ul><a href="escapamento.html">Escapamentos</a>
    <div class="submenu-items">
      <li><a href="competition.html" title="Escapamento Competition">Competition</a></li>
      <li><a href="usaracing.html" title="Escapamento U.S.A. Racing">U.S.A. Racing</a></li>
    </div>
  </ul>
  <ul><a href="capacete.html">Capacetes</a>
    <div class="submenu-items">
      <li><a href="protorkcapacete.html" title="Capacetes Pro Tork">Pro Tork</a></li>
      <div class="deep-menu">
        <ul>
          <li><a href="g6788.html" title="Capacete G6 788">G6 788</a></li>
          <li><a href="newliberty.html" title="Capacete New Liberty Four">New Liberty Four</a></li>
        </ul>
      </div>
    </div>
  </ul>
</div>

html css

2 answers

-2

Solved. I created the function in JS and cited it with mouse actions in HTML: onmousemove="mostraSub('sub1')" onmouseleave="escondeSub('sub1')".

function escondeSub(sub){
    subfilho = document.getElementById(sub);
    subfilho.style.display = 'none'; 
  }

function mostraSub(sub){
    subfilho = document.getElementById(sub);
    subfilho.style.display = 'block';
}
.sub {
    display: none;
    left: 120px;
}
.sub ul {
    display: none;
    list-style: none;
}
.other-menus {
    cursor: pointer;
    display: flex;
    background: gold;
    justify-content: center;
    text-align: center;
    font-size: 12pt;
    color:black;
    max-width: 160px;
    margin-top: 3px;
    text-decoration: none;
}
.title-sub {
    padding: 0px;
    width: 120px;
    height: 15px;
}
.sub li {
    position: static;
    width: 120px;
    max-height: 50px;
    display: inline-block;
}
.menu-container ul {
    display:inline-block;
    height: 70px;
}
.menu-header {
    background: gold;
}
.menu-categories {
    height: 50px;
}
.menu-categories ul {
    height: 53px;
    display: inline-block;
    font-family:helvetica;
    font-weight: bold;
    position: relative;;
    margin-left: 5px;
    margin-top: 0px;
    padding: 0px;
}
.menu-categories ul a {
    display:inline-block;
    background: gold;
    text-align: center;
    font-size: 12pt;
    color:black;
    width: 120px;
    padding: 15px;
    text-decoration: none;
}
.submenu-items {
    width: fit-content;
    margin-top: 3px;
    position: absolute;
    display:none;
}
.submenu-items li {
    width: fit-content;
    height: fit-content;
    margin-top: 2px;
    list-style: none;
    position: relative;
}
.submenu-items li a {
    width: 120px;
    padding: 15px;
    margin-top: 0px;
    text-align:center;
    border-right: solid black 3px;
}
.menu-categories ul:hover .submenu-items {
    display: block;
}
<div class="menu-categories">
                <ul><a href="protetor.html">Protetores</a>
                        <div class="submenu-items">
                                <div class="other-menus" onmousemove="mostraSub('sub1')" onmouseleave="escondeSub('sub1')">
                                    <a class="title-sub">Motor</a>
                                        <ul class="sub" id="sub1" style="display: none;">
                                            <li><a href="protetormotorcg" title="Protetor Honda CG">Honda CG 125/150/160</a></li>
                                            <li><a href="protetormotorxre" title="Protetor Honda XRE">Honda XRE 300</a></li>
                                        </ul>
                                </div>
                                <div class="other-menus" onmousemove="mostraSub('sub2')" onmouseleave="escondeSub('sub2')">
                                    <a class="title-sub">Farol</a>
                                        <ul class="sub" id="sub2" style="display: none;">
                                            <li><a href="protetorfarolfactor" title="Protetor de Farol Factor">Yamaha Factor</a></li>
                                            <li><a href="proetorfarolcb300" title="Protetor de Farol XRE">Honda CB300</a></li>
                                        </ul>
                                </div>
                        </div>
                </ul> 
            </div>

  • 2

    Is not roughly similar to that end What are you trying to do? I say similar and approximately because the way put was a quick change in your code in order to only replicate the desired behavior, which may have caused some semantic errors that will be corrected if you confirm that this is the goal.

  • 1

    Augusto, that’s right! I saw that <li> was not involving deep-menu items. So I redid the menu code from 0 until to practice and understand better and it worked perfectly, now I’ll just redo the CSS.

-3


The problem is in the classes. See that for example:

.submenu-items a:hover {
  background-color: rgb(255, 115, 0);
}

.menu-categories div:hover .deep-menu {
  display: block;
}

When any element of the . class submenu-items to enable the Hover event this code block will be 'executed'. That is why, within ul, all options are displayed, such as ul Protectors. In conclusion, ideally you would make a code with Javascript to change the CSS properties of a given HTML element when a certain action is executed by the user.

Browser other questions tagged html css

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