I cant put this dropdown menu on center!

HTML & CSS
1 
<html>
  <head>
      <body background="image.png">
    <title>Block Security</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <style>
      body{
          font-family: Arial, "Times New Roman";
          color:white;
          background-size:cover;
      }
      input[type=text] {
  width: 30%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-position: 5px 5px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
ul li{
    float:left;
    width: 200px;
    height: 40px;
    background-color:black;
    opacity: .8;
    line-height:40px;
    text-align:center;
    font-size:20px;
}
ul li a {
    text-decoration:none;
    color:white;
    display:block;
}

ul li a:hover {
    background-color:green;
}
ul li ul li{
    display:none;
}
ul li:hover ul li{
    display:block;
}
  </style>
  <center>
      <head>
         
          <ul>
              <li><a href= "/index.php">Home</a></li>
              <li><a href= "">About</a>
          <ul>
              <li><a href= "/oursystem.php">Our System</a></li>
              <li><a href= "/ourteam.php">Our Team</a></li>
              <li><a href= "/howdidwe.php">How did we?</a></li>
              <li><a href= "/whatareweusing.php">What are we using?</a></li>
              </ul>
              </li>
              <li><a href="">Things to do</a>
              <ul>
                  <li><a href= "/netupdate.php">Next Update</a></li>
                  </ul>
                  </li>
              <li><a href="http://client.recaptcha.com.tr.ht/">Login</a></li>
              <li><a>News</a>
              <ul>
                  <li><a href="/blog.php">Our Blog</a></li>
              </ul>
              </li>
            </ul>
          
      </head>
      
</html>

Thanks from now. :slight_smile:

2

Give the menu list a margin auto, then give it a width or table display to center.

Note: About the sub menus, the usual way is to hide/show the sub list, not the sub list items. :slight_smile:

3 Likes
3

Oh Thanks :slight_smile: :slight_smile:

1 Like
4

@HaydiKod

To add to that: Do not hide the sub ul with display:none;
It will make it inaccessible for screen readers and for tabbing.
https://webaim.org/techniques/css/invisiblecontent/

Use absolute positioning on the sub ul and hide it off-screen with a negative offset value.

ul li{
    float:left;
    width: 200px;
    height: 40px;
    background-color:black;
    opacity: .8;
    line-height:40px;
    text-align:center;
    font-size:20px;
    position:relative; /*containing block*/
}
ul li a {
    text-decoration:none;
    color:white;
    display:block;
}

ul li a:hover {
    background-color:green;
}
li ul{
    position:absolute;
    top:auto;
    left:-999em;
}
li:hover ul{
    left:0;
}
4 Likes
5

Thanks it also solved my problem :smiley:

@Ray.H

6

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