Question

我想要一个这样的菜单：

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

我的问题出在CSS：

- ＆GT;我希望这个打开的菜单位于MENU 2（同一行）的正下方，如附图所示。

- ＆GT;我不知道为什么.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>

Answer 2

1）您不应将<li>以外的任何内容放置为列表的子级（<ul>或<ol>）。将子菜单移动到与其相关的菜单项中：

<li class="clickclass">
    MENU 2

    <ul class="message">
        <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>
</li>

2）将每个<li>设为position: relative，以便子菜单相对于其父菜单定位：

#menu li {
    position: relative;
    display: inline;   
    border: 1px solid #fff;
    margin-right: 10px;
}

3）将子菜单放在其父级的最左侧（我也删除了填充）：

.message { 
    position: absolute;
    left: 0;
    display: none;
    background: #fff;
    border: 1px solid #000;
    padding: 0;
}

Here is an updated JSFiddle

单击CSS的子菜单？

2 个答案: