Html css迷你蛋糕

我在试着做看起来像小蛋糕的纽扣

我该如何插入蛋糕的顶部

例如：

ul#menutop{
填充：0；
利润率：50px 20px 20px 10px；
}
李梅努托普{
显示：内联；
}
ul#menutop li a{
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
字体大小：25px；
背景颜色：蓝色；
}
我的名字叫李娜：悬停{
背景颜色：橙色；
}

您可以为html中的每个

li

项添加一个span：

<ul id="menutop">
<li> <span></span> <a href="">Test</a></li>
    <li> <span></span> <a href="">Test</a></li>
    <li> <span></span><a href="">Test</a></li>
</ul>

---

一把小提琴，这样你可以玩它，希望这有帮助

如果您不想创建额外的标记，可以随时使用

ul#menutop{
填充：0；
利润率：50px 20px 20px 10px；
}
李梅努托普{
显示：内联；
}
ul#menutop li a{
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
字体大小：25px；
背景颜色：蓝色；
位置：相对位置；
}
我的名字叫李娜：悬停{
背景颜色：橙色；
}
李梅努托普：之后{
背景：红色；
边界半径：5px 5px 0 0/5px 5px 0 0；
内容：''；
高度：20px；
宽度：75%；
位置：绝对位置；
顶部：-20px；
左：50%；
转化：translateX（-50%）；
}

在使用之前，您可以按照以下方式进行操作

ul#menutop li a::before {
    background-color: blue;
    content: "";
    height: 10px;
    left: 50%;
    margin-top: -15px;
    position: absolute;
    transform: translate(-50%, 0px);
    width: 50px;
}

和

位置：相对于
li

ul#menutop li {
    display: inline;
    position: relative;

}

完整代码如下：


ul#menutop{
填充：0；
利润率：50px 20px 20px 10px；
}
李梅努托普{
显示：内联；
位置：相对位置；
}
ul#menutop li a{
颜色：白色；
填充：10px 20px；
文字装饰：无；
边界半径：4px4p0；
字体大小：25px；
背景颜色：蓝色；
}
李梅努托普：之前{
背景颜色：蓝色；
内容：“；
高度：10px；
左：50%；
利润上限：-15px；
位置：绝对位置；
转换：转换（-50%，0px）；
宽度：50px；
}
我的名字叫李娜：悬停{
背景颜色：橙色；
}
李梅努托普：悬停：在{
背景颜色：橙色；
}




如果我是你OP，我会同意这个答案，非常好，没有@Quoid所说的额外标记的麻烦。
ul#menutop li {
    display: inline;
    position: relative;

}