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

Home Forums CSS Pure CSS Menu with submenus with flex

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #160237

    having problem making pure CSS menu bar as in

    using only display property flex (not to use any block property or floats)

    please provide me with css code, background-color or gradient color does not matter.

    Thanks in advance


    What have you tried so far?

    We don’t mind helping out with code you are having trouble with but you cant expect us to do it all for you.

    Perhaps you could show us what you are having issues with in Codepen?


    @ Paulie_D

    following is the coding for menu . sub-menu takes full width as well as it increase the nav height. Somehow when clicking this link open different page. Just copy the following link & paste to new tab to see coding in website.


    You want ME to make a Codepen for you?


    its alreday there sir,

        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a>
                        <li><a href="#">Photoshop</a></li>
                        <li><a href="#">Illiustrator</a></li>
                        <li><a href="#">Web Design</a>
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                <li><a href="#">Articles</a>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">User Experience</a></li>
                <li><a href="#">Inspiration</a></li>

    css file

    • {
      margin: 0;
      padding: 0;

      .body {
      font-size: 62.5%;
      nav {
      background-color: green;
      width: 100%;
      a {
      font-family:”Segoe UI”;
      nav ul {
      list-style: none;

      .menu {
      flex-flow:row wrap;
      max-width: 1024px;
      min-height: 40px;
      margin: 0 auto;

      nav ul ul {
      display: none;
      nav ul li:hover > ul {
      display: flex;
      flex-flow: column wrap;


    The link you gave is to another CSS-Tricks thread….not a Codepen.


    I know, you have to copy the address for codepen for open to new webpage, I have already mentioned above also, sorry for your inconvenience.


    You’re not using any positioning…why is that?


    The main problem you have is that you weren’t using positioning on your elements, which is what caused the nav bar to change height on the hover states.

    I forked your pen and applied the changes to your CSS; you’ll see my changes annotated with comments:

    I added position: relative; to the top-level list items (.menu li) and sub-menus (.menu ul). Then, I added position: absolute; to the two sub-menus (.menu li:hover ul and .menu li ul li:hover ul).

    You can see all the changes in my pen, linked above.

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