Html CSS：子菜单对齐和样式（严格来说是CSS；没有javascript）

我正在努力让我的第一份菜单生效。我掌握了基本知识。我正在努力使它尽可能简单。我必须仔细观察我想要的外观（而不是我真正想要的外观）：

主要问题是子菜单。它们将一个堆叠在另一个之下，而不是堆叠在父菜单的右侧。此外，第一级子菜单并不堆叠在主菜单上的行的正下方，而是在主菜单中

我注意到的另一个问题是，我想添加rgba

背景色

（透明度）。但是，对于每个子菜单级别，透明度都会更改

我也接受任何css3提示，让它看起来“华而不实”和花哨=）

HTML:

你可以试试

.submenu { background-color: rgba( 0,0,0,0.25 );
    margin-left: 25px;}

透明度值是相加的-子菜单中的子菜单将添加两次，因此第二个子菜单的透明度将降低。从较低的值开始，这将非常有用

添加边距会将文本向右移动，我更喜欢每个子菜单“包含”自己的子菜单的方式

---

如果您想要仅CSS下拉菜单，请退出。这几乎是实现这一目标的实际方式

使用JavaScript来解决早期版本Internet Explorer对伪元素缺乏支持的问题有点困难，但我认为这是IE7及以下版本，因此可能会被删除，具体取决于您希望对IE<7等较旧浏览器的支持级别。其他浏览器（Firefox、Chrome、Safari、Opera等）将只显示CSS菜单和功能

/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/


nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
    text-decoration:none;
    font-size: 20px;
    color:#191919;
    padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }

.submenu { background-color: rgba( 0,0,0,0.25 );
    margin-left: 25px;}