The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Navigation dropdown with 2 columns

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #294062

    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 a {
    background: #20242A;
    color: #fff; }
    #nav > ul > li > ul {
    display: none; }

    Here’s the structure of my html nav:


    nav id=”nav”>



  • Home
  • Services

      Does anyone have any suggestions on how I should do this? I’m open to suggestions and ideas. I believe the CSS would need to set the 2 columns at ul li ul…

      Thanks for your help! I really appreciate it!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.