CODEWITHSUNDEEP
htmlcssdrop-down-menu
ShellRox
ShellRox

Reputation: 2602

<li> element is brought down when div is added inside

I am making navigation menu (labels) that drop down another (div) menu when clicked. At the time, dropdown menus (divs) are always visible, for testing purposes.

At the beginning i added outer-bar div:

.outer-bar {
  position: relative;
  display: block;
  z-index: 1;
  text-align: center;
  top: 55px;
  background-color: black;
  height: 60px;
  width: 100%;
}

Then, for the menu, down-bar (<ul>) element:

.down-bar {
  list-style-type: none;
  font-size: 105%;
}

After that, for the navigation buttons, i used <label> elements inside down-bar:

   <div class="outer-bar">
        <ul class="down-bar" style="list-style:hidden">
            <li>
                <label id="down-nav-1" class="down-nav">Knives <b class="caret_down">&#9660;</b></label>
            </li>

With only labels inside, the navigation buttons would work perfectly, but then i added the dropdown (`div`) menu inside `<li>`.

            <div class="mainsizer">
                <div class="dropdown-menus" id="dropdown-menu-1">
                    <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
                    <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
                    <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
                    <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
                    <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
                    <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
                    <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
                    <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
                    <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
                    <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
                </div>
            </div>
        </li>

Fortunately, it worked perfectly fine as well, but the third navigation button Rifles was brought down from the other navigation buttons.

Please, see the result here.

Full Fiddle:

Here.

Problem & Possible Reason:

But the problem reason did seem obvious, Rifles dropdown div was smaller than the other ones. So i think it was brought down to balance horizontal symmetry between dropdown menus.

If that is the reason of the problem, then how i break the balance and put labels on the same line again?

If that is not the reason, then what could be? How could i fix it?

Thanks!

Upvotes: 0

Views: 35

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

add vertical-align-top on li

.down-bar li {
    display: inline-block;
    margin-right: 2%;
    margin-top: 15px;
    vertical-align: top;
}

Upvotes: 2

Related Questions