How to make a menu with all gray background?

Asked

Viewed 70 times

-1

I want to make a menu like this in the photo only with a gray background.navegador

Css code:

#menu ul{
    position:absolute;
    list-style:none;
    text-transform:uppercase;
    left:-40px;
    top:54%;

}

li{

    margin:-20px 50px 0px 50px;
    background-color:darkgray;
    text-align: center;
    display:inline-block;
    padding:10px 65px 10px 2px;

}
html css image browser

  • Good evening! I advise you to paste the code to help, but it’s still very simple and easy to change. There is very little information in your post. No one can help without knowing more. See more!

  • Puts your html too

1 answer

0

From the Example Below, you will be able to create a Top Nav of your liking, you can change code and add what you want or even create one based on this:

<html>
<head>
<style>
body {margin: 0;}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-style: oblique;

}

ul.topnav li a:hover:not(.active) {background-color: #111;}

ul.topnav li a.active {background-color: #0095ff;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
</style>
</head>
<body>

<ul class="topnav">
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">Movies</a></li>
  <li class="right"><a href="#">Logout</a></li>
</ul>

<div style="padding:0 16px;">
  <h2>Seu Conteúdo</h2>
</div>

</body>
</html>

Browser other questions tagged html css image browser

You are not signed in. Login or sign up in order to post.