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

Home Forums Design fiverr menu "categories" design

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

    Hi everyone,
    Can someone please teach how us how to design a menu the “category” menu in fiverr website in css.



    What is it about this menu that you want to learn about?


    The hover effect and each category has vertical line between sub categories

    This might be very easy but I’m a beginner


    Do you use, and/or know how to use (Chrome)DevTools? When you can then the following can be seen by opening up DevTools and inspect element (looking at the DOM – rendered source code).

    The hover effect comes from this absolute positioned wrapping div that is revealed on hovering the parent list-item.

    /* line 70 of demo: */
    .main-cat-list>li .menu-cont {
      background-color: #fff;
      position: absolute;
      left: -1px;
      top: 100%;
      z-index: 10;
      display: none;
      width: 0;
      border: 1px #dddddd solid;
      padding: 15px 0;
      box-sizing: border-box;
      border-radius: 0 3px 3px 3px;
    /* line 152 of demo: */
    .main-cat-list>li:hover .menu-cont {
      display: block;
      width: auto;

    “vertical line between sub categories” is just a 1px width border:

    .main-cat-list>li .menu-cont ul:first-child {
      border-right: 1px #dddddd solid;

    Menu in itself is not responsive. The entire menu is inserted with javaScript, that is: different menu’s for different platforms (like on mobile).


    Also, when you do a search for “mega drop-down menu css” you can find lot’s of other examples and tutorials. Keep in mind though that these can be difficult to implement on touch devices (no hover there).

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