css - 单击CSS的子菜单？

Question

我想要这样的菜单:

当我点击消息图标时，显示一个包含消息的菜单。

我的问题在 CSS 中:

-> 我希望这个打开的菜单位于 MENU 2(同一行)的正下方，如附图所示。

-> 我不知道为什么 .message 是内联的。我不希望 .message 菜单是内联的。

我该如何解决这个问题？

CSS:

#menu{
 position: fixed;
 z-index: 101;
 top:0;
 color:#fff;
 font-weight:bold;
 height:50px;
 width:100%;
 min-width:50px;
 background:red;
}
#menu ul li{
 display:inline;   
 border:1px solid #fff;
 margin-right:10px;
}
.message{ 
    position:absolute;
    display:none;
    background:#fff;
    border:1px solid #000;
}

html:

<div id="menu">
   <ul>
      <li>MENU 1</li>
      <li class="clickclass">MENU 2</li>

      <div class="message">
         <ul>
            <li><a href=#>item1</a></li>
            <li><a href=#>item2</a></li>
            <li><a href=#>item3</a></li>
            <li><a href=#>item4</a></li>
         </ul>
      </div>     

      <li>MENU 3</li>
   </ul>

</div>

https://jsfiddle.net/p8h4ow1m/2/

Answer 1

这是一个几乎完美的切换菜单，使用 checkbox 您想要的结构不能单独使用 css 和您的 html 创建，所以我更改了它

#click{
    width:200px;
    opacity:0;
    position:absolute;
    height:40px;
  top:10px;
}

label{
    display:block;
    background:lightgrey;
    width:200px;
    border-radius:15px;
    cursor:pointer;
}

label ul{
    overflow:hidden;
    list-style-type:none;
}

label ul li{
    border-bottom:1px solid black;
}

label .hidden{
    height:0;
}

#click:checked + label .hidden{
    height:200px;
}

<input type="checkbox" id="click" />
<label>
    <ul>
        <li>Click Me!</li>
    </ul>
    <ul class="hidden">
        <li><a href=#>item1</a>
        </li>
        <li><a href=#>item2</a>
        </li>
        <li><a href=#>item3</a>
        </li>
        <li><a href=#>item4</a>
        </li>
    </ul>
</label>