Question

网站：http://michaelstricklandconsulting.com

nav ul {
background: none;
list-style: none;
margin: 0;
padding-left: 0;
}

nav ul li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}  

nav ul li ul {
background: white;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
display: none;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}

ul li ul li {
clear: both;
width: 100%;
}

当我将鼠标悬停在菜单上时，子菜单偏离中心。我希望蓝色背景与ul元素对齐。有没有一种快速的方法来移动这些元素的位置？

For Example: What I Do
             Why Vistage and
             Why Michael
             Coaching Academy

Answer 1

男人，我进入了您的网站，并且对此进行了更改：

.nav-horizontal li {
    float: left;
    margin: 0 10px;
}

对此：

.nav-horizontal li {
    float: left;
    margin: 0 0;
}

成功了

Answer 2

更改此：

.nav-horizontal li {
  float: left;
  margin: 0 10px; 
}

nav ul li {
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

收件人：

.nav-horizontal li {
  float: left;
  margin: 0; 
}

nav ul li {
  display: block;
  float: left;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

希望这会有所帮助！

CSS Navbar子菜单如何居中？

2 个答案: