+ 4
How do you make a menu?
2 Answers
+ 16
Here is the simple one based on SoloLearn website menu.
This is the code for your stylesheet.
#menu {
background: #d22929;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font-size: 12px;
font-family: "Verdana", "Arial", Helvetica, sans-serif;
margin: 0px 10px 0px 0px;
padding: 0;
}
#menu a {
background: #d22929;
font-size: 1.2em;
color: #fff;
display: block;
float: left;
margin: 0;
padding: 7px 20px;
text-decoration: none;
}
#menu a:hover {
background: #d29c1a;
color: #fff;
}
This is the code that goes in your actual HTML page.
<html>
<ul id="menu">
<li><a href="https://www.sololearn.com/Courses/" title="Courses">Courses</a></li>
<li><a href="https://www.sololearn.com/Codes/" title="Codeplayground">Codeplayground</a></li>
<li><a href="https://www.sololearn.com/Discuss/" title="Discuss">Discuss </a></li>
<li><a href="https://www.sololearn.com/Leaderboard/" title="Top Learners">Top Learners</a></li>
</ul>
<html>
Here is the link of the code in Codeplayground.
https://code.sololearn.com/WWH5uq3JwKx2/#html
Make your own changes and have fun :)
+ 2
Thank you