Html 水平导航栏

我正在为我的网站制作一个水平导航栏，点击 在上角的按钮上

出现其他选项

然后将鼠标悬停在其他选项上，会显示更多选项：

然而，正如在截图中所看到的，“选项”、“选项2”和“选项3”并不相互关联，这正是我的目标。以下是HTML：

#菜单{
}
#乌尔曼{
}
#利曼{
列表样式：无；
}
#乌苏布{
可见性：隐藏；
}
#里斯本{
列表样式：无；
显示：内联；
}
#乌尔梅因：悬停#乌尔苏布{
能见度：可见；
}
#乌苏苏布{
可见性：隐藏；
}
#里斯ub：悬停#ulsuub{
能见度：可见；
}
#利苏布{
列表样式：无；
显示：内联；
}
#菜单a{
背景颜色：粉红色；
文字装饰：无；
}
#乌尔梅因#乌尔苏布{
显示：内联；
}

新菜单

试试这个CSS

 #menu{
    }
    #ulmain{
    }
    #limain{
        list-style:none;
    }
    #ulsub {
        visibility:hidden;
    }
    #lisub{
        list-style:none;
        display:inline-block;
    }
    #ulmain:hover #ulsub{
        visibility:visible;
    }
    #ulsubsub {
        visibility:hidden;
    }
    #lisub:hover #ulsubsub{
        visibility:visible;
    }
    #lisubsub{
        list-style:none;
        display:inline-block;
    }
    #menu a{
        background-color:pink;
        text-decoration:none;
    }
    #ulmain, #ulsub{
        display:block;
    }

同样，您将ul显示设为内联，将它们设为块，并将li设为显示：内联块

---

希望这有帮助……

请阅读此处：然后调整您的代码。谢谢您的评论！按照建议，我在“#lisub”中添加了“inline block”，但决定不在“#lisub”中添加它，因为在“#lisub”中没有它看起来更好选项、选项2和选项3现在是内联的。但是，是否有可能使“选项”与“菜单”内联？