How to center menu

Asked

Viewed 747 times

0

I’m trying to center this menu but I can’t, I’ve tried several tips on the net but it doesn’t work, someone could help me?

HTML

    <div id='menu'>
    <div class='menu1'>
    <ul class='menu' id='menu-main'>
    <li class='active'><a href='/'>Home</a></li>
    <li><a href='#'>Video</a></li>
    <li><a href='#'>Music</a>
    <ul>
    <li><a class='trigger' href='#'>Sub Menu 1</a></li>
    <li><a class='trigger' href='#'>Sub Menu 2</a></li>
    <li><a class='trigger' href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Movie</a></li>
    <li><a href='#'>Games</a></li>

    </ul>
    </div>

    </div>

CSS

    #menu{width: 100%;
    height: 55px;}


    .menu1{width:1200px;
    height: 55px;  margin: 0 auto;}
    .menu{float:left; width:75%}
    .menu li{position:relative;list-style:none;float:left;display:block;height:45px}
    .menu li a{  padding: 14px 28px 14px 10px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    line-height: 30px;
    font-family: 'Fjalla One', sans-serif;
    color: #ffffff;
    height: 30px;
    text-transform: uppercase;
    display: block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}
    .menu li:first-child a{padding:14px 22px 8px 10px}
    .menu li:hover > a{color:#D04721}
    .menu ul{position: absolute;
    top: 55px;
    left: 0;
    opacity: 0;
    background: #131313;

    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;}
    .menu li:hover > ul{opacity:1}
    .menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}
    .menu li:hover > ul li{height:30px;overflow:visible;padding:0}
    .menu ul li a{color:#fff;font:14px Arial;width:120px;margin:0;padding:6px 0 6px 30px;text-shadow:none;}
    .menu ul li:first-child a{padding:6px 14px  6px 30px}
    .menu ul li:last-child a{border:none}
html css

2 answers

0


Here’s an idea.

#menu {
  width: 100%;
  height: 55px;
}

.menu1 {
  width: 1200px;
  height: 55px;
  margin: 0 auto;
  text-align: center;
}

.menu {
  display: inline-block;
  width: 75%
}

.menu li {
  position: relative;
  list-style: none;
  display: inline-block;
  height: 45px
}

.menu li a {
  padding: 14px 28px 14px 10px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  font-size: 20px;
  line-height: 30px;
  font-family: 'Fjalla One', sans-serif;
  color: #ffffff;
  height: 30px;
  text-transform: uppercase;
  display: block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.menu li:first-child a {
  padding: 14px 22px 8px 10px
}

.menu li:hover>a {
  color: #D04721
}

.menu ul {
  position: absolute;
  top: 55px;
  left: 0;
  opacity: 0;
  background: #131313;
  -moz-transition: opacity .25s ease .1s;
  -o-transition: opacity .25s ease .1s;
  -ms-transition: opacity .25s ease .1s;
  transition: opacity .25s ease .1s;
}

.menu li:hover>ul {
  opacity: 1
}

.menu ul li {
  height: 0;
  overflow: hidden;
  -webkit-transition: height .25s ease .1s;
  -moz-transition: height .25s ease .1s;
  -o-transition: height .25s ease .1s;
  -ms-transition: height .25s ease .1s;
  transition: height .25s ease .1s;
  padding: 0
}

.menu li:hover>ul li {
  height: 30px;
  overflow: visible;
  padding: 0
}

.menu ul li a {
  color: #fff;
  font: 14px Arial;
  width: 120px;
  margin: 0;
  padding: 6px 0 6px 30px;
  text-shadow: none;
}

.menu ul li:first-child a {
  padding: 6px 14px 6px 30px
}

.menu ul li:last-child a {
  border: none
}
<div id='menu'>
  <div class='menu1'>
    <ul class='menu' id='menu-main'>
      <li class='active'><a href='/'>Home</a></li>
      <li><a href='#'>Video</a></li>
      <li><a href='#'>Music</a>
        <ul>
          <li><a class='trigger' href='#'>Sub Menu 1</a></li>
          <li><a class='trigger' href='#'>Sub Menu 2</a></li>
          <li><a class='trigger' href='#'>Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href='#'>Movie</a></li>
      <li><a href='#'>Games</a></li>

    </ul>
  </div>

</div>

  • 1

    It worked perfectly the way I want it, thank you.

  • Good then @Luckshare22. Good luck!

-1

So. look that I just centered formatting the menu1 class

#menu{width: 100%;
    height: 55px; text-align: center}



.menu1{
    margin: 0 auto;
    width: 600px;
}
    .menu li{position:relative;list-style:none;float:left;display:block;height:45px}
    .menu li a{  padding: 14px 28px 14px 10px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    line-height: 30px;
    font-family: 'Fjalla One', sans-serif;
    color: #ffffff;
    height: 30px;
    text-transform: uppercase;
    display: block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}
    .menu li:first-child a{padding:14px 22px 8px 10px}
    .menu li:hover > a{color:#D04721}
    .menu ul{position: absolute;
    top: 55px;
    left: 0;
    opacity: 0;
    background: #131313;

    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;}
    .menu li:hover > ul{opacity:1}
    .menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}
    .menu li:hover > ul li{height:30px;overflow:visible;padding:0}
    .menu ul li a{color:#fff;font:14px Arial;width:120px;margin:0;padding:6px 0 6px 30px;text-shadow:none;}
    .menu ul li:first-child a{padding:6px 14px  6px 30px}
    .menu ul li:last-child a{border:none}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id='menu'>
    <div class='menu1'>
    <ul class='menu' id='menu-main'>
    <li class='active'><a href='/'>Home</a></li>
    <li><a href='#'>Video</a></li>
    <li><a href='#'>Music</a>
    <ul>
    <li><a class='trigger' href='#'>Sub Menu 1</a></li>
    <li><a class='trigger' href='#'>Sub Menu 2</a></li>
    <li><a class='trigger' href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Movie</a></li>
    <li><a href='#'>Games</a></li>

    </ul>
    </div>

    </div>
</body>
</html>

  • You can place your link content in the body of your answer by pasting the code here and using the "JS/HTML/CSS Snippet"

Browser other questions tagged html css

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