Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page:
<div id = "movemenu"><ul class = "menu">
<li class = "menu"><a href = "">About</a></li>
<li class = "menu"><a href = "pali_pictures.html">Pictures</a></li>
<li class = "menu"><a href = "">Contact</a></li>
</ul></div>
Below is the code snippet for the menu on the second webpage:
<div id = "movemenu"><ul class = "menu">
<li class = "menu"><a href = "pali_bio.html">About</a></li>
<li class = "menu"><a href = "pali_pictures.html">Pictures</a></li>
<li class = "menu"><a href = "">Contact</a></li>
</ul></div>
Lastly, here's the associated CSS styling for the menus:
.menu ul {
width: 200px;
padding: 1px;
list-style-type: none;
margin-right:auto;
margin-left:auto;
display: inline-block;
}
.menu a {
width: 6em;
text-decoration: none;
color: white;
background-color: #3399FF;
padding: 0.5em 0.5em;
border: 2px dotted darkblue;
}
.menu a:hover {
background-color: #297ACC;
}
.menu li {
display: inline;
}
#movemenu {
text-align:center;
}