Drop Down Menu in Header

[crystalfrost]

I want to put a navigation menu in the header of all my boards, linking to custom pages. I have a code, but I want a horizontal navigation menu with vertical drop downs. When the item in the drop down menu is too short, such as where it says "E.H.A.", the first word from the next list item jumps up next to it (in this case "The").

Here's the board:

all-around-rp.proboards.com/board/152/genesis

Here's my header code:

<style type="text/css">
.menu
{width: 500px; height: 27px; font-size: 16px; font-weight: bold; text-align: center; font-family: Garamond; background-color: #BDBDBD; border-radius: 8px; border: solid #474747; color:black;}

.menu ul li
{
display:inline; padding:20px; position:relative; list-style:none; top:4px;
}

.menu li ul {margin:0px; padding:0px; display:none; position:absolute; left:-25px; top:40px; padding-bottom:10px; background-color:#BDBDBD; border:solid #474747;}

.menu li:hover ul {display:block; width:150px; }

<style type="text/css">
a.link {font-family:Garamond; font-size:18px;}
</style>

<style type="text/css">
a.link2 {font-family:Garamond; font-size:15px;}
</style>

<center>
<br>
<div class="menu">
<ul>
<li>Evos
<ul>
<li><a href="/page/bew-york-institute" class="link2">I Difensori</a></li>
<li><a href="/page/the-K????????" class="link2">The K????????</a></li>
<li><a href="/page/the-consortium" class="link2">The Consortium</a></li>
</ul>
</li>
<li>Humans
<ul>
<li><a href="/page/evo-human-alliance" class="link2">E.H.A</a></li>
<li><a href="/page/the-reverters" class="link2">The Reverters</a></li>
<li><a href="/page/other-humans" class="link2">Other Humans</a></li>
</ul>
</li>
<li>A.N.E.W.
<ul>
<li><a href="/page/ANEW-prisoners" class="link2">Prisoners</a></li>
<li><a href="/page/Evo Operatives" class="link2">Evo Ops</a></li>
<li><a href="/page/Human Operatives" class="link2">Human Ops</a></li>
</ul>
</li>
</ul>
</div>
<br><br>
</center>

[Tumbleweed]

Hi crystalfrost,

I noticed your post just now and see that is still not fixed. Sorry, I missed your question all this time. 

First you need to close the style tag on that first bit of css, like I did in red but that isn't going to fix it:

.menu li:hover ul {display:block; width:150px; }
</style>
<style type="text/css">

Add this in your css and that should fix the wrapping.

.menu ul a{
white-space:nowrap;
}

[crystalfrost]

Thanks for the help!

[Tumbleweed]

You're welcome.