I need help formatting menu

Hi Everyone, I’m new to Css and wanted to know

I’m on a Project for a Website Called Minecraft Rewards
And I wanted to know how Fasso

I have this command

<div id = "menu">
       <ul class = "menu">
         <li> <a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/" style="background-color: transparent;"> Start </ li>
         <li> <a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/" style="background-color: transparent;"> Store </a> < / li>
         <li> <a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/" style="background-color: transparent;"> About Us </a> </ li>
         <li> <a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/" style="background-color: transparent;"> Customers </a> < / li>

that looks like this:

I wanted it to look like this:


Can anybody help me?

Hello @MurilloFagundes welcome to the forums.

You will need to post more of your HTML as well as your CSS if you want someone to help you.

Having both an id and a class with the same name (menu) is likely to cause some confusion.

Sorry, I don’t understand.

2 Likes

That code is corrupted I’m afraid. As a beginner you should make extensive use of the html and css validators and run your code through them each time to make sure you haven’t missed something out.

I’ve corrected the html and given you a basic start in making a menu horizontal.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;}
.menu-wrap {
	background:#000;
	padding:10px;
}
.menu {
	margin:0;
	padding:0;
	list-style:none;
	max-width:1170px;
	margin:auto;
	display:flex;
}
.menu li{flex:1 0 0%;margin:0 5px;}
.btn {
	display:block;
	padding:20px 10px;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
.btn:hover,.btn.active {
	background:green;
	border-radius:4px;
}
</style>
</head>

<body>
<div class="menu-wrap">
  <ul class="menu">
    <li><a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/">Start</a></li>
    <li><a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/">Store</a></li>
    <li><a class="btn btn-custom" href="https://over-mc.com.br/minecraft-gratis/">About Us</a></li>
    <li><a class="btn btn-custom active" href="https://over-mc.com.br/minecraft-gratis/">Customers</a></li>
  </ul>
</div>
</body>
</html>

There are many other ways to do this and all depend on what happens next? Indeed it seems you probably have some css in place so the code I’ve given may not work in your context.

I strongly suggest that you take some time to take a few basic tutorials on html and css before you proceed so that you can approach this with some understanding of what’s going on. Otherwise it becomes a copy and paste exercise where you don’t learn anything and we do all the work for you :slight_smile:

3 Likes

thanks i am grate

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.