可扩展菜单框（水平）

Question

我正在玩这个想法：

在这个区块中，我有两个<a> s作为按钮和一个<ul>并尝试float使它们粘在一起。实现此效果的主要思想是ul的操作宽度/显示状态或简单的菜单部分。

<nav>
  <a class="nav-btn">Logo</a>
  <ul>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
     <li><a href="">Menu 1</a></li>
  </ul>
  <a class="nav-btn">Logo</a>
</nav>

但我的主要问题是＆＃34;如何使宽度灵活自动？＆＃34; 不，百分比或像素！ 主要部分（灰色背景）应自动展开/折叠，并根据其内容根据需要占用尽可能多的空间。当菜单关闭并假设我们设置＆＃34;菜单＆＃34;的宽度时。为零，背景应调整，这两个按钮应该像图片。

您建议使用哪种结构或HTML？

非常赞赏！

Answer 1

您可以按原样使用html结构。您将设置以下css属性以获得基本布局设置：

a, li {
  display: block;
  float: left;
}

比你可以切换＆lt; ul＆gt;的显示属性通过javascript。见：js FIDDLE

您还可以使用导航的悬停状态通过css

切换li的可见性

ul {
    display: none;
}

nav:hover ul {
    display: block;
}

请参阅：css FIDDLE

如果徽标不是链接，您可能希望使用div而不是。[/ p>