-1

I have the following HTML:

<div class="MenuContents">
    <ul class="dropdown-menu">
        <li><a id="index" href="index.html">Home</a></li>
        <li><a id="gamePage" href="gamePage.html">Game</a></li>
        <li><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
        <li class="float-right"><a id="about" href="about.html">About</a></li>
    </ul>
    <div class="dropdown">
        <button class="dropbtn">Game Design</button>
        <div class="dropdown-content">
            <a id="GameIdea" href="GameIdea.html">Link 1</a>
            <a id="GameMechanics" href="GameMechanics.html">Link 2</a>
            <a id="GameCharacters" href="GameCharacters.html">Link 3</a>
            <a id="Inspiration" href="Inspiration.html">Link 3</a>
        </div>
    </div>
</div>

I have an unordered list for the menu items in my banner, but for the "Game Design" option I wanted it to be a drop down menu, my solution basically led this "Game Design" option to be removed from the unordered list as a list item and become its own div after the origional unordered list.

My question is: How can I position this div on the same line right next to the last list item in the unordered list it used to be part of, so that it all looks like the one thing?

Currently the div sits bellow the unordered list.

Buddy Christ
  • 1,364
  • 8
  • 22
Kyle_Pearce
  • 111
  • 1
  • 8

1 Answers1

1

You can try this:

CSS

ul.dropdown-menu, .dropdown{
  display: inline-block;
  vertical-align: top;
}

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36