0

O meu menu dropdown bootstrap está bugado, se alguém conseguir ajudar... CSS: http://pastebin.com/FWPahxUk http://image.prntscr.com/image/5b6dc92ca1c24ded880084b3f1cd04f8.png

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
                </div>
                <div class="collapse navbar-collapse">
<ul id="menu-header" class="nav navbar-nav navbar-right">
                        <li><a href="index.html" class="smoothScroll">PÁGINA PRINCIPAL</a></li>
<li><a href="servicos.html" data-toggle="dropdown" class="dropdown-toggle">SERVIÇOS <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="manuntencao.html"><i class="fa fa-cogs" aria-hidden="true"></i>
Manuntenção de websites</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="web.html"><i class="fa fa-code" aria-hidden="true"></i>
Desenvolvimento Web</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="redessociais.html"><i class="fa fa-level-up" aria-hidden="true"></i>
&nbsp&nbspRedes Sociais</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="cursos.html"><i class="fa fa-book" aria-hidden="true"></i>
&nbspCursos</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="seo.html"><i class="fa fa-search" aria-hidden="true"></i>
&nbsp&nbspSEO</a>
    <li id="menu-item-191" class="menu-item-191"><a style="text-align:justify;" href="suporte.html"><i class="fa fa-support" aria-hidden="true"></i>
&nbsp&nbspSuporte</a></li>
</li>
</ul>
<li><a href="contacto.html" class="smoothScroll">CONTACTO</a></li>
<li><a href="#" class="smoothScroll">ENSINO</a></li>
</li>
</ul>
</div>
    </div>
        </div>
3
  • Podes explicar qual é o problema?
    – Sergio
    2/07/2016 às 9:32
  • Eu que que o menu dropdown ficasse mais em baixo e não abrisse colado ao texto
    – Pedro
    2/07/2016 às 9:36
  • Tens muitas tags HTML sem estar fechadas, ou seja a sintaxe de HTML está partida.
    – Sergio
    2/07/2016 às 11:58

2 Respostas 2

1

Acho que o problema eram uns erros de abertura/fecho de algumas tags html:

Correção:

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul id="menu-header" class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html" class="smoothScroll">PÁGINA PRINCIPAL</a>
                </li>
                <li>
                    <a href="servicos.html" data-toggle="dropdown" class="dropdown-toggle">SERVIÇOS <span class="caret"></span></a>
                    <ul role="menu" class="dropdown-menu">
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="manuntencao.html"><i class="fa fa-cogs" aria-hidden="true"></i> Manuntenção de websites</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="web.html"><i class="fa fa-code" aria-hidden="true"></i> Desenvolvimento Web</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="redessociais.html"><i class="fa fa-level-up" aria-hidden="true"></i>&nbsp&nbspRedes Sociais</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="cursos.html"><i class="fa fa-book" aria-hidden="true"></i> &nbspCursos</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="seo.html"><i class="fa fa-search" aria-hidden="true"></i> &nbsp&nbspSEO</a>
                        </li>
                        <li id="menu-item-191" class="menu-item-191">
                            <a style="text-align:justify;" href="suporte.html"><i class="fa fa-support" aria-hidden="true"></i> &nbsp&nbspSuporte</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contacto.html" class="smoothScroll">CONTACTO</a>
                </li>
                <li>
                    <a href="#" class="smoothScroll">ENSINO</a>
                </li>
            </ul>
        </div>
    </div>
</div>

A sua barra no jsfiddle

Também pode ser que seja derivado de alguns css que está a definir, seja como for aqui tem a parte html corrigida

0
0

eu não posso comentar. mais vou tentar ajudar: Entenda P-X como ESPAÇO OCUPADO Entenda M-Y como ESPAÇO VAGO AO REDOR.

<ul role="menu" class="dropdown-menu p-X m-Y">
  <li class="menu-item dropdown p-X m-Y">
    <a href="" class="p-X m-Y">
      <i class="fa fa-level-up p-X m-Y"></i>
    </a>
  <li>
</ul>

P- é a distancia entre paragrafos
VALORES PARA P-X: p-0, p-1, p-2, p-3, p-4, p-5, p-6
M- É A DISTANCIA ENTRE MARGEM E ELEMENTO PAI
Valores para M-Y : m-auto , m-0, m-1, m-2, m-3, m-4, m-5
teste os valores em cada item. e me fale se deu certo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .