Horizontal and vertical menu-CodePudding

So I need to create vertical and horizontal menu. The horizontal one has to be done using "display: inline", but I don't really know how to do It. Also I would like to add some css editing like using hover to change button background so It will look like It's animated but I can't use js, only pure css. Add random sites to menu buttons

CodePudding user response：

use flexbox for your styling in horizontal and vertical: for instance :

//for horizontal
div{
 display: flex;
}

//for vertical
div{
 display : flex;
 flex-direction : column;
}

CodePudding user response：

Use display flex to do that. You'll get very useful guides here https://flexbox.malven.co/.

For css You can easily do that using :hover for example :

.item:hover {
    background-color: red;
    transition: background-color 0.5s ease;
}

You can play with different transition types to find one matching your requirements.