Question

我有这个代码，我需要将子菜单放到左边，我该怎么做？

li a:hover {
    background:#46871E;
}

li:hover ul ul, li.over ul ul { 
    display:none; 
}

li:hover ul, li li:hover ul, li.over ul, 
li li.over ul { 
    display: block;
}

HTML代码很大，这只是一点点：

<div class="ink-grid">
  <header class="vspace">
    <a href="index.php"> <img src="img/customLogo.png"> </a>

  </header>
  <nav class="ink-navigation" id="nav_menu">
    <ul class="menu horizontal green rounded shadowed"><b>E_NOTICE : </b> type 8 -- Undefined variable: url -- at line 13
      <br>
      <li><a href="index.php"><b>Início</b></a></li>
      <li class="active">
        <a><b>Sobre nós</b></a>
        <ul class="submenu">
          <li>
            <a href="quemSomosA.php">Quem somos</a>
          </li>
          <li>
            <a href="missaoevisao.php">Missão e Visão</a>
          </li>
          <li>
            <a href="eixodeatuacao.php">Eixos de Atuação</a>
          </li>
          <li>
            <a href="mensagem.php">Envie-nos uma Mensagem</a>
          </li>
        </ul>
      </li>
      <li>
        <a><b>Membros</b></a>
        <ul class="submenu">
          <li>
            <a href="membrosrede.php">Membros da Rede</a>
          </li>
          <li>
            <a href="VantagensparaMembrosdaRede.php">Vantagens e Beneficios</a>
          </li>
        </ul>
      </li>
      <li>
        <a><b>Recursos</b></a>
        <ul class="submenu">
          <li>
            <a href="Documentos.php">Documentos</a>
          </li>
          <li>
            <a href="#">Galeria</a>
            <ul>
              <li>
                <a href="fotografias.php"> Fotografias </a>
              </li>
              <li>
                <a href="video.php"> Multimédia </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a><b>Qualificação e Emprego</b></a>
        <ul class="submenu large-100">
          <li>
            <a href="Anossaperspectiva.php">A nossa Perspetiva</a>
          </li>
          <li>
            <a href="Principaisatividades.php"> Principais Atividades</a>
          </li>
        </ul>
      </li>
      <li>
        <a><b>Rede de Front Offices</b></a>
        <ul class="submenu large-100">
          <li>
            <a href="login.php">Entrar</a>
          </li>
          <li>
            <a href="anossaperspectiva_R.php">A nossa Perspetiva</a>
          </li>
          <li>
            <a href="PrincipaisAtividades1.php"> Principais Atividades</a>
          </li>
          <li>
            <a href="#">Gabinetes de Atendimento</a>
            <ul>
              <li>
                <a href="QuemSomos.php">Onde estamos</a>
              </li>
              <li>
                <a href="GabinetesdeAtendimento.php">Contactos</a>
              </li>
            </ul>
          </li>

        </ul>
      </li>
      <li>
        <a><b>Empreendedorismo e Desenvolvimento Local</b></a>
        <ul class="submenu large-100">
          <li>
            <a href="Anossaperspectiva_E.php">A nossa Perspetiva</a>
          </li>
          <li>
            <a href="PrincipaisAtividades2.php"> Principais Atividades</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

JSFiddle

Answer 1

我不确切知道你的结构。所以我假设你有一个这样的子菜单：

<ul class="menu">
  <li>Rede the Front Offices
    <ul class="submenu1">
      <li>Gabinetes de atendimento
        <ul class="submenu2">
          <li>Onde Estamos</li>
          <li>Contactos</li>
        </ul>
      </li>
      <li>...</li>
    </ul>
  </li>
</ul>

我会将submenu2放在左边，如下代码所示：

.submenu2{
  position: absolute;
  right: 100%;
  top:0;
  bottom:auto;
  display:none;
  }

Answer 2

li:hover ul, li li:hover ul, li.over ul, 
li li.over ul { 
   display: block;
   float:left;
}

HTML / CSS - 浮动左侧菜单

2 个答案: