Css 垂直ul li导航，具有更大的中心下拉列表

我认为这很简单，我正在尝试制作一个带有数字的小导航，这些数字在下面的悬停上显示一个名称，应该是这样的：

但我不知道如何保持它的中心位置，而且数字之间没有很大的差距。这是一个

---

这里的结果多亏了@Ovakuro:

据我所知，唯一的方法是为ul儿童设置一个宽度，以便您可以在之后将其居中。这是必要的，如果你需要超越父母的宽度

我使用transform-translate，但如果需要完全向后兼容，可以使用js。另外，你可能会在屏幕两侧遇到问题，同样，js是你的朋友

注意：我在css中添加了/*new*/，这样你就可以看到我做了什么干杯

。下拉列表{
字号：10pt；
宽度：10px；
}
导航ul{
字号：0；
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
宽度：100%；
位置：相对；/*新*/
}
李海军{
显示：内联块；
保证金：0；
填充：0；
位置：相对位置；
宽度：自动；
}
导航a{
颜色：#444；
显示：块；
填充：1em；
文本对齐：居中；
文字装饰：无；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
}
纳夫利乌尔{
字号：10pt；
高度：20px；
左：0；
不透明度：0；
位置：绝对位置；
顶部：35px；
可见性：隐藏；
z指数：1；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
左：50%；/*新*/
转换：translateX（-50%）；/*新*/
宽度：200px；/*新*/
}
李海军：悬停{
不透明度：1；
顶部：50px；
能见度：可见；
}
李宇利{
宽度：100%；
}
纳夫利乌拉酒店{
背景:#bbb ;；
}

这接近你想要的吗

正文{
背景色：黑色；
}
.下拉列表{
字号：20pt；
宽度：10px；
}
导航ul{
字号：0；
列表样式：无；
保证金：0；
填充：0；
文本对齐：居中；
宽度：100%；
}
李海军{
显示：内联块；
保证金：0；
填充：0；
位置：相对位置；
宽度：自动；
}
导航a{
颜色：灰色；
显示：块；
填充：0 25px；
文本对齐：居中；
文字装饰：无；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
}
纳夫利乌尔{
字号：10pt；
高度：20px；
左：0；
不透明度：0；
位置：绝对位置；
顶部：35px；
可见性：隐藏；
z指数：1；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
}
李海军：悬停{
不透明度：1；
顶部：50px；
能见度：可见；
利润上限：-10px；
}
李宇利{
宽度：100%；
}
导航李：悬停ul：之前{
内容：“；
位置：绝对位置；
底部：-10px；
边框样式：实心；
边框颜色：#EDEDED透明；
显示：块；
顶部：-8px；
底部：自动；
右：15px；
边框宽度：0 10px 10px；
}
纳夫利乌拉酒店{
背景：#EDEDED；
宽度：100px；
左边距：-25px；
边缘底部：100px；
填充：10px；
颜色：#0050F7；
}
.下拉列表：悬停{
颜色：白色；
}

以下是一个使用的布局解决方案。我已经简化了你的CSS，如果你有任何问题，请告诉我

nav.cf，
.下拉列表{
列表样式：无；
保证金：0；
填充：0；
显示器：flex；
证明内容：中心；
}
资产负债表{
位置：相对位置；
}
资产负债表{
颜色：#444；
填充：0 10px；
文字装饰：无；
}
导航cf li：悬停下拉菜单{
不透明度：1；
能见度：可见；
}
/*在这里设置下拉菜单的样式*/
.下拉列表{
宽度：100%；
列表样式：无；
字号：10pt；
位置：绝对位置；
顶部：30px；
不透明度：0；
可见性：隐藏；
z指数：1；
-webkit过渡：全部.25秒轻松；
-moz过渡：全部.25秒轻松；
-ms过渡：全部.25秒轻松；
-o型过渡：全部0.25秒缓解；
过渡：全部.25秒缓解；
}
.下拉列表李{
显示器：flex；
}
导航cf下拉列表LIA{
填充：10px 20px；
背景:#bbb ;；
文本对齐：居中；
空白：nowrap；
}
/*三角*/
.下拉列表：在{
底部：100%；
内容：“；
位置：绝对位置；
边框：实心透明；
边框底色：#bbb；
边框宽度：10px；
}

或者如果您希望悬停标签始终居中，可以使用以下选项：

正文{
保证金：0；
填充：0；
}
.集装箱{
背景色：黑色；
宽度：500px；
高度：300px；
}
保险商实验室{
列表样式：无；
颜色：#666；
字体大小：30px；
保证金：0；
填充：0；
文本对齐：居中；
填充顶部：20px；
位置：相对位置；
}
ulli{
显示：内联块；
填充：0 12px；
}
.悬停{
位置：绝对位置；
顶部：70像素；
文本对齐：居中；
宽度：100%；
左：0；
显示：无；
}
.悬停跨度{
显示：内联块；
背景色：#fff；
颜色：蓝色；
字体大小：30px；
填充：12px 20px；
}
李：悬停{颜色：#bbb；}
li:hover.hover{display:block；}
.悬停：在{
内容：“；
显示：内联块；
宽度：0；
身高：0；
左边界：5
.dropdown {
    font-size: 10pt;
    width: 10px;
}
nav ul {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;
}

nav a {
    color: #444;
    display: block;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}


nav li ul {
    font-size: 10pt;
    height: 20px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

nav li:hover ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}

nav li ul li {
    width: 100%;
}

nav li ul a {
    background: #bbb;
}