How to align the drop up menu

Question

I've basically copy/pasted the code from Drop-down menu that opens up/upward with pure css

body {
  padding: 3em;
}

#menu>li:hover ul {
  display: block;
}

#menu * {
  padding: 0;
  margin: 0;
  font: 12px georgia;
  list-style-type: none;
}

#menu {
  float: center;
  text-align: center;
  line-height: 10px;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #3B5330;
}

#menu a:hover {
  background: #B0BD97;
}

#menu ul {}

#menu ul li ul li a:hover {
  background: #ECF1E7;
  padding-left: 9px;
  border-left: solid 1px #000;
}

#menu ul li ul li {
  width: 140px;
  border: none;
  color: #B0BD97;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  background: #B0BD97;
  z-index: 1;
}

#menu ul li ul li a {
  font: 11px arial;
  font-weight: normal;
  font-variant: small-caps;
  padding-top: 3px;
  padding-bottom: 3px;
}

#menu ul li {
  float: left;
  width: 146px;
  font-weight: bold;
  border-top: solid 1px #283923;
  border-bottom: solid 1px #283923;
  background: #979E71;
}

#menu ul li a {
  font-weight: bold;
  padding: 15px 10px;
}

#menu li {
  position: relative;
  float: left;
}

#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
  display: none;
  list-style-type: none;
  width: 140px;
  bottom: 0;
}

#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
  display: block;
}

#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

<iframe style="width:100%">padding</iframe>
<div id="menu" style="text-align:center; float: center; width: 100%">
  <ul>
    <li>
      <center>item1</center>
      <ul>
        <li><a href="f1.html">A</a></li>
        <li><a href="f2.html">B</a></li>
        <li><a href="f3.htmll">C</a></li>
      </ul>
    </li>
  </ul>
</div>

No matter what I do, I cannot align the menu to sit in the center of the web page.

Your help would be highly appreciated.

Thanks in advance.

the div with id=menu should horizontally aligned center? or horizontal and vertically aligned so that it is in middle of page? — repzero, Apr 12 '17 at 03:19

score 0 · Accepted Answer · answered Apr 12 '17 at 03:19

Like this? I added the following css:

#menu {
  position: absolute;
  left: 50%;
  transform:translate(-50%, 0);
}

body {
  padding: 3em;
}

#menu {
  position: absolute;
  left: 50%;
  transform:translate(-50%, 0);
}

#menu>li:hover ul {
  display: block;
}

#menu * {
  padding: 0;
  margin: 0;
  font: 12px georgia;
  list-style-type: none;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #3B5330;
}

#menu a:hover {
  background: #B0BD97;
}

#menu ul {}

#menu ul li ul li a:hover {
  background: #ECF1E7;
  padding-left: 9px;
  border-left: solid 1px #000;
}

#menu ul li ul li {
  width: 140px;
  border: none;
  color: #B0BD97;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  background: #B0BD97;
  z-index: 1;
}

#menu ul li ul li a {
  font: 11px arial;
  font-weight: normal;
  font-variant: small-caps;
  padding-top: 3px;
  padding-bottom: 3px;
}

#menu ul li {
  float: left;
  width: 146px;
  font-weight: bold;
  border-top: solid 1px #283923;
  border-bottom: solid 1px #283923;
  background: #979E71;
}

#menu ul li a {
  font-weight: bold;
  padding: 15px 10px;
}

#menu li {
  position: relative;
  float: left;
}

#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
  display: none;
  list-style-type: none;
  width: 140px;
  bottom: 0;
}

#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
  display: block;
}

#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

<iframe style="width:100%">padding</iframe>
<div id="menu">
  <ul>
    <li>
      <center>item1</center>
      <ul>
        <li><a href="f1.html">A</a></li>
        <li><a href="f2.html">B</a></li>
        <li><a href="f3.htmll">C</a></li>
      </ul>
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Apr 12 '17 at 03:20

0

You can horizontally center #menu by following CSS rules:

define #menu's display as inline-block
Add a container div outside of #menu and make its text-align as center.

I've made a fiddle for your code, please check.

answered Apr 12 '17 at 03:20

shaochuancs

15,342
3
54
62

score 0 · Answer 3 · answered Apr 12 '17 at 03:35

Update your HTML code as below.

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel = "stylesheet" type = "text/css" href = "menu.css"/>
  <title>Frames Test</title>
</head>
<body>

 <iframe style="width:100%">padding</iframe>
 <div class="container" style="text-align:center">
 <div id="menu" style="text-align:center; float: center;display:inline-block">
    <ul>
        <li><center>item1</center>
                <ul>
                        <li><a href="f1.html">A</a></li>
                        <li><a href="f2.html">B</a></li>
                        <li><a href="f3.htmll">C</a></li>
                </ul>
        </li>   
    </ul>
</div>
</div>
</body>
</html>

How to align the drop up menu

3 Answers3