Navigation dropdown with 2 columns

[m_lyons]

Hello everyone!

I’m new here and just found this site while trying to find a solution to an issue I am currently having.

I have a navigation drop down that has gotten too long. I want to split this into two columns, but I really have no idea how I would do that.

Here is my CSS right now:

#nav {
position: absolute;
right: 2.5em;
top: 0; }
#nav ul li {
float: left;
margin-left: 1.5em;
height: 7em;
line-height: 7em; }
#nav ul li a {
color: #fff;
-moz-transition: background-color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
color: #ccc;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
padding: 0.55em 1.4em 0.55em 1.4em;
border-radius: 6px;
outline: 0; }
#nav ul li a:hover {
color: #fff; }
#nav ul li.current_page_item a, #nav ul li.active a {
background: #20242A;
color: #fff; }
#nav > ul > li > ul {
display: none; }

Here’s the structure of my html nav:

<

nav id=”nav”>

<

ul>

[Author]

Posts