Question

I've an menu navigation bar in my index.php, I cut only the parts necessary to show what is going on, I've searched thoroughly and didn't find an answer.

This is my index.php and css, I wrote down an page that my website has (incluirCliente.php) and whenever I hover my mouse over Animais and try to click in Incluir the browser doesn't go to incluirCliente.php, doesn't even try to. All it does is stick the page in the index, it doesn't prompt another page saying that it doesn't exist.

body,
html {
  margin: 0;
}
.content {
  padding: 30px;
}
/* MENU GERAL*/

.nav-main {
  width: 537px;
  background-color: lightgray;
  height: 70px;
  color: gray;
}
/* FIM MENU GERAL*/

/* NOME DA PET SHOP - SE MUDAR NOME MUDA WIDTH .nav-main */

.nav-main .logo {
  float: left;
  height: 40px;
  padding: 15px 30px;
  font-size: 1.4em;
  line-height: 40px;
}
/* FIM NOEM DA PET SHOP*/

/* LINKS MENU GERAK - ANIMAIS, PRODUTOS... */

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}
/* FIM LINKS*/

/* N TOCA NISSO v */

.nav-main > ul > li {
  float: left;
}
/* N TOCA NISSO ^ */

/* BLOCO INDIVIDUAL DO MENU - ANIMAIS, PRODUTO...*/

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}
/* FIM BLOCO INDIVIDUAL */

/* N TOCA v */

.nav-item:hover {
  background-color: black;
}
/* N TOCA ^ */

/* BLOCO INDIVIDUAL DO MENU SECUNDÁRIO - INCLUIR, EDITAR... */

.nav-content {
  position: absolute;
  top: 70px;
  overflow: hidden;
  background-color: lightgray;
  max-height: 0;
}
/* FIM BLOCO INDIVIDUAL DO MENU SECUNDÁRIO - INCLUIR, EDITAR... */

/* CONFIG MENU SECUNDÁRIO */

.nav-content a {
  color: white;
  text-decoration: none;
}
/* FIM CONFIG MENU SECUNDÁRIO */

/* N TOCA v */

.nav-content a:hover {
  text-decoration: underline;
}
/* N TOCA ^ */

/* TAMANHO DROPDOWN MENU */

.nav-sub-animais {
  padding: 20px;
}
.nav-sub-produtos {
  padding: 20px;
}
.nav-sub-servicos {
  padding: 20px;
}
.nav-sub-clientes {
  padding: 20px;
}
/* FIM TAMANHO DROPDOWN MENU */

/* DROPDOWN MENU*/

.nav-sub-animais ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 54px;
}
.nav-sub-produtos ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 57px;
}
.nav-sub-servicos ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 55px;
}
.nav-sub-clientes ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 53px;
}
/* FIM DROPDOWN MENU*/

/* ESTILO DROPDOWN MENU */

.nav-sub-animais ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-produtos ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-servicos ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-clientes ul li a {
  display: inline-block;
  padding: 5px 0;
}
/* FIM ESTILO DROPDOWN MENU */

/* NEGOCIO DE CLICAR - NEM PENSA EM MUDAR ALGO */

.nav-item:focus {
  background-color: #444;
}
.nav-item:focus ~ .nav-content {
  max-height: 400px;
  -webkit-transition: max-height 0.4s ease-in;
  -moz-transition: max-height 0.4s ease-in;
  transition: max-height 0.4s ease-in;
}

<!DOCTYPE html>

<head>
  <title>Menu Inical</title>
  <META charset="utf8">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <nav class="nav-main">
    <div class="logo">PETSHOP</div>

    <ul>
      <li>
        <a href="#" class="nav-item">Animais</a>
        <div class="nav-content">
          <div class="nav-sub-animais">
            <ul>
              <li><a href="incluirCliente.php">Incluir</a>
              </li>
              <li><a href="#">Editar</a>
              </li>
              <li><a href="#">Listar</a>
              </li>
              <li><a href="#">Excluir</a>
              </li>
            </ul>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="nav-item">Produtos</a>
        <div class="nav-content">
          <div class="nav-sub-produtos">
            <ul>
              <li><a href="#">Incluir</a>
              </li>
              <li><a href="#">Editar</a>
              </li>
              <li><a href="#">Listar</a>
              </li>
              <li><a href="#">Excluir</a>
              </li>
            </ul>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="nav-item">Serviços</a>
        <div class="nav-content">
          <div class="nav-sub-servicos">
            <ul>
              <li><a href="#">Incluir</a>
              </li>
              <li><a href="#">Editar</a>
              </li>
              <li><a href="#">Listar</a>
              </li>
              <li><a href="#">Excluir</a>
              </li>
            </ul>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="nav-item">Clientes</a>
        <div class="nav-content">
          <div class="nav-sub-clientes">
            <ul>
              <li><a href="#">Incluir</a>
              </li>
              <li><a href="#">Editar</a>
              </li>
              <li><a href="#">Listar</a>
              </li>
              <li><a href="#">Excluir</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>

  </nav>

</body>

Answer 1

点击不起作用，因为当.nav-item没有聚焦时，.nav-content会折叠。

if ("createEvent" in document) {
    var event = document.createEvent("HTMLEvents");
    event.initEvent("change", false, true);
    myEle.dispatchEvent(event);
} else
    myEle.fireEvent("onchange");

将此样式添加到您的CSS中。

/*.nav-content only open when .nav-item is focused*/
.nav-item:focus ~ .nav-content {
  max-height: 400px;
  -webkit-transition: max-height 0.4s ease-in;
  -moz-transition: max-height 0.4s ease-in;
  transition: max-height 0.4s ease-in;
}

.nav-item ~ .nav-content:hover {
  max-height: 400px;
  -webkit-transition: max-height 0.4s ease-in;
  -moz-transition: max-height 0.4s ease-in;
  transition: max-height 0.4s ease-in;
}

body,
html {
  margin: 0;
}
.content {
  padding: 30px;
}
/* MENU GERAL*/

.nav-main {
  width: 537px;
  background-color: lightgray;
  height: 70px;
  color: gray;
}
/* FIM MENU GERAL*/

/* NOME DA PET SHOP - SE MUDAR NOME MUDA WIDTH .nav-main */

.nav-main .logo {
  float: left;
  height: 40px;
  padding: 15px 30px;
  font-size: 1.4em;
  line-height: 40px;
}
/* FIM NOEM DA PET SHOP*/

/* LINKS MENU GERAK - ANIMAIS, PRODUTOS... */

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}
/* FIM LINKS*/

/* N TOCA NISSO v */

.nav-main > ul > li {
  float: left;
}
/* N TOCA NISSO ^ */

/* BLOCO INDIVIDUAL DO MENU - ANIMAIS, PRODUTO...*/

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}
/* FIM BLOCO INDIVIDUAL */

/* N TOCA v */

.nav-item:hover {
  background-color: black;
}
/* N TOCA ^ */

/* BLOCO INDIVIDUAL DO MENU SECUNDÁRIO - INCLUIR, EDITAR... */

.nav-content {
  position: absolute;
  top: 70px;
  overflow: hidden;
  background-color: lightgray;
  max-height: 0;
}
/* FIM BLOCO INDIVIDUAL DO MENU SECUNDÁRIO - INCLUIR, EDITAR... */

/* CONFIG MENU SECUNDÁRIO */

.nav-content a {
  color: white;
  text-decoration: none;
}
/* FIM CONFIG MENU SECUNDÁRIO */

/* N TOCA v */

.nav-content a:hover {
  text-decoration: underline;
}
/* N TOCA ^ */

/* TAMANHO DROPDOWN MENU */

.nav-sub-animais {
  padding: 20px;
}
.nav-sub-produtos {
  padding: 20px;
}
.nav-sub-servicos {
  padding: 20px;
}
.nav-sub-clientes {
  padding: 20px;
}
/* FIM TAMANHO DROPDOWN MENU */

/* DROPDOWN MENU*/

.nav-sub-animais ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 54px;
}
.nav-sub-produtos ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 57px;
}
.nav-sub-servicos ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 55px;
}
.nav-sub-clientes ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  text-align: center;
  width: 53px;
}
/* FIM DROPDOWN MENU*/

/* ESTILO DROPDOWN MENU */

.nav-sub-animais ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-produtos ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-servicos ul li a {
  display: inline-block;
  padding: 5px 0;
}
.nav-sub-clientes ul li a {
  display: inline-block;
  padding: 5px 0;
}
/* FIM ESTILO DROPDOWN MENU */

/* NEGOCIO DE CLICAR - NEM PENSA EM MUDAR ALGO */

.nav-item:focus {
  background-color: #444;
}
.nav-item:focus ~ .nav-content {
  max-height: 400px;
  -webkit-transition: max-height 0.4s ease-in;
  -moz-transition: max-height 0.4s ease-in;
  transition: max-height 0.4s ease-in;
}
.nav-item ~ .nav-content:hover {
  max-height: 400px;
  -webkit-transition: max-height 0.4s ease-in;
  -moz-transition: max-height 0.4s ease-in;
  transition: max-height 0.4s ease-in;
}

标记<a> not opening the link

1 个答案: