我无法正确构建CSS Dropdown菜单。 另外，如何使它从垂直下拉到水平下拉？

Question

I am having a ton of trouble. I am trying to create a drop down menu from 'about' and have not been able to center the menu correctly. It is always right of the menu. I believe it to have to do with the size of 'about'.

How can I fix this?

 .nav-main { position: absolute; top: 0; height: 65px; width: 100%; text-align: center; } .nav-main ul { position: relative; margin: 0 auto; padding: 0; list-style: none; font-size: 22px; line-height: 100%; font-family: 'Futura W01 Bold', sans-serif; text-align: center; text-transform: uppercase; display: inline-block; width: 90%; height: inherit; } .nav-top { position: relative; margin: 0; padding: 0 66px 0 50px; float: none; display: inline-block; list-style: none; height: inherit; background: transparent url(../images/nav-divide.png) no-repeat right center; } .nav-top:first-child { padding-left: 0; } .nav-top:last-child { background-image: none; padding-right: 0; } .nav-top > a { position: relative; display: block; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav-top a:hover, .nav-top.active a { color: #454545; border-bottom: 4px solid #00e9d9; text-decoration: none; } .nav-top ul { display: none; position: absolute; } .nav-top:hover ul { display: inline; } .nav-top li { float: center; background-color: #e9e9e9; } .nav-top li > a { position: relative; display: inline; margin: 0; color: #6f6f6f; text-decoration: none; padding-top: 20px; padding-bottom: 5px; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } 

 <nav class="nav-main" role="navigation"> <ul> <li class="nav-top"><a href="#welcome">Welcome</a></li> <li class="nav-top"><a href="#about">About</a> <ul> <li><a href="#about">Services</a></li> <li><a href="#client">Clients</a></li> <li><a href="#press">Press</a></li> <li><a href="#leadership">Leadership</a></li> <li><a href="#twitter">Twitter</a></li> </ul> </li> <li class="nav-top"><a href="#contact">Contact</a></li> </ul> <span class="nav-arrow"></span> </nav> 

Answer 1

Andrews:

To solve you problem, you need to indicate the position of your nested list because you are setting it up as "position: absolute" without coordinates. Add a "left value" to your UL CSS class in order to solve this issue:

.nav-top ul {
    display: none;
    position: absolute;
    left: 0;
}