CODEWITHSUNDEEP
javascripthtmlcss
TDJSS
TDJSS

Reputation: 21

How to create a Vertical Navigation Menu?

Here is a menu using HTML and CSS. Menu items are placed horizontally and submenus use vertical layout. How should main menu items be changed to be layed out vertically too?

<ul>
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
    </ul>
  </li>
</ul>

Upvotes: 0

Views: 505

Answers (1)

user2021917
user2021917

Reputation:

You have to do some minor changes and it will work as vertical. and as you looking some more style to add on it you can do it easily.

Check this fiddle CLICK HERE

#menu
{
    width: 120px;/*change width*/
}
#menu li
{

    display: block; /*keep it block*/
    }
#menu ul
{

    top: 0; /*change this */
    left: 100%; /*change this */
}
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left:-13px; /* change this*/
    top:7px; /* change this*/
    width: 0;
    height: 0;
    border: 5px solid transparent; /* change this*/
    /*border-right: 5px solid transparent;*/ /*don't need this*/
    border-right: 8px solid #444; /* change this*/
}

#menu ul li:first-child a:hover:after
{
    border-right-color: #04acec;  /* change this*/
}

I wrote in comments what to change specific to achieve what you want. You can manipulate more

Upvotes: 1

Related Questions