Answered
Vertical Navigation Bar?
I am a beginner to Dreamweaver and am looking to know how to design and create a vertical navigation bar. I have only ever done horizontal menus and I want to change it up a bit. What steps would I take?
Nancy OSheaCorrect answer
Community Expert
March 19, 2019
Start with a new HTML document and an unordered list of links.
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
Style your navigation lists with CSS by adding this to your stylesheet.
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
nav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover, tap & click */
nav li a:hover,
nav li a:focus,
nav li a:active{
background-color: #555;
color: white;
}
Nancy O'Shea— Product User & Community Expert
AdChoices