Here are two simple menus using CSS and an unordered list

CREATE A VERTICAL MENU WITH CSS

1. Put the following code in your CSS file.

.menuLook, li {
      margin: 0;
      padding: 0;
      list-style: none;
      }
	  
.linkLook a {
      display: block;
      width: 8em;
      line-height: 2em;
      font-size: 1em;
      text-decoration: none;
      background:  #D5973C;
      color: white;
      padding: .2em 0 .2em 1em;
      margin-bottom: .2em;
      }
    

2. Then put an unordered list in your HTML file like below. (Use your own links and names.)

<ul class="menuLook">
<li class="linkLook"><a href="dogs.html">Dogs</a></li>
<li class="linkLook"><a href="cats.html">Cats</a></li>
<li class="linkLook"><a href="fish.html">Fish</a></li>
<li class="linkLook"><a href="insects.html">Insects</a></li>
</ul>

CREATE A HORIZONTAL MENU WITH CSS

1. Put the following code in your CSS file.

#menu-outer { 	
height: 84px; 
} 

.table { 	
display: table;  /*Allows the centering to work*/ 	
margin: 0 auto 0 auto; 
} 

#horizontal-list ul{ 	
min-width: 696px; 	
list-style: none; 	
padding-top: 20px; 	
} 

#horizontal-list li { 		
display: inline; 	
} 

#horizontal-list li a {     
text-decoration: none;     
color: brown;     
border: black 2px solid;     
text-transform:uppercase;     
padding: 8px;     
float: left;     
background-color: aliceblue;     
margin-top: 15px; 
} 

 

2. Then put this code in your HTML file. Substitute an actual page name for the hashtag.

<nav id = "menu-outer">  
   <div class="table">     
     <ul id="horizontal-list">          
       <li><a href="#">Your Menu</a></li>          
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>         
       <li><a href="#">Your Menu</a></li>     
     </ul>     
   </div> 
</nav>