CODEWITHSUNDEEP
htmlcssdrop-down-menu
Papa De Beau
Papa De Beau

Reputation: 3828

css horizontal menu with drop-down to vertical menu with drop-down

I would like to change a horizontal menu with a drop-down to a vertical menu with the drop-down items floating on the right or left, as well as all submenus. I am assuming this is an easy fix but I can figure it out. Thanks

Here is a working example of the horizontal working: http://codepen.io/anon/pen/RPMZJV

Here is the CSS:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #909eab url(bg.png);
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
    margin: 100px auto; 
    text-align: center;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

Here is the html:

<html>

<head>
  <meta charset="utf-8" />
  <title>CSS Dropdown Menu</title>

  <link href="style.css" rel="stylesheet" />

</head>

<body>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>
           <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>

          </li>
          <li><a href="#">Illustrator</a></li>
          <li><a href="#">Web Design</a>
            <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Articles</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">User Experience</a></li>
        </ul>
      </li>
      <li><a href="#">Inspiration</a></li>
    </ul>
  </nav>

</body>

</html>

Upvotes: 1

Views: 1264

Answers (2)

Guy
Guy

Reputation: 11305

If I understood correctly you'll want to remove your float: left from the list-items, set a fixed with for your nav and then change the positioning of the dropdowns to your desired position.

As mentioned in the comments, to get the submenus to align with the menu item the user hovers on, you will need to set it to position: relative so that the absolute positioning of the child element is relative to that of the ul > li element.

nav ul > li {
  position: relative;
}

Updated Codepen

Upvotes: 2

KAD
KAD

Reputation: 11102

You need to remove the float of the list items and re-position the second level menu : 

      nav ul li {
    /*float: left;*/ <<<< removing float left
}

    ....


    Bbackground: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }


nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 30%;left:92%;//<<< setting new position for second ul
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

Upvotes: 0

Related Questions