How to Create a Menu in a Simple Web Layout Using CSS HTML

The menu is a mandatory navigation that must be owned by a website because by providing a menu for our website visitors it will be easier to explore all of our websites. Besides being useful for visitors, the menu feature will also make our display more attractive.

Actually, in my previous post, I already included the code to create a menu on the website, but I wasn’t too focused, so this time I wanted to share a little information with friends about how to make a menu on a website layout.

Here’s the HTML code we need to start creating the menu

Menu Gapunyakode

Don’t have a code

Steps to create a simple html web layout menu code

  • We put the HTML menu code inside the body tag
  • Next create a section using the div . tag
  • Create a menu list order using ul, li, label tags
  • Inside the li tag we will give the following menu name with the link using the tag
  • At this stage we have created the raw view

To beautify the appearance above we need a little more polish, by adding the css code to the menu display we will create a horizontal menu.

Steps to apply css code for html layout menu

body {
margins: 15px;
ul {
list-style-type: none;
margins: 0;
padding: 0;
overflow: hidden;
background-color: #333;

li {
float: left;

li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;

.active {
background-color: #FF0B7B;

li label {
color: white;

  • To get rid of the symbol point we provide a list-style-type css code with a value of none
  • code float : left will give effect to each menu will be sequential from left horizontally. If we don’t provide the code then the display of each menu will widen according to the width of the body and the next menu will be below it
  • css code text-decoration value of none will remove the line in each menu word
  • class .active serves to give effect to the active menu. because the .active class code contains the background-color css code, what will change is the color
  • save and see the result

Thank you for visiting, I hope the information is useful

Leave a Reply

Your email address will not be published. Required fields are marked *