Question

我正在创建一个带有子菜单的水平菜单（图c），但我能得到的只是图a但我想要的东西如图b或图c：

enter image description here

图a的HTML和CSS代码：

<html>
<head>
<style type="text/css">
ul li{
    display:inline;
    background-color:red;
}
ul li ul{
    display:inline;
}
ul li li{
    position:relative;
    top:20px;
    display:inline;
    background-color:green;
}
li{
    border:1px solid white;
}
li:hover{
    border:1px solid blue;
}
</style>
<title>Untitled Document</title>
</head>

<body>
<ul>
  <li>overview</li>
  <li>alarm
    <ul>
      <li>view</li>
      <li>config</li>
    </ul>
  </li>
  <li>log</li>
  <li>config
    <ul>
      <li>tag</li>
      <li>security</li>
    </ul>
  </li>
</ul>
</body>
</html>

问题是：如何创建输出，如图b或图c？我希望子菜单显示在其父菜单下，而父菜单不会延长这么久。

Answer 1

@Alex;检查此链接http://jsfiddle.net/sandeep/9SH4S/可能对您有所帮助。

的CSS：

ul li{
    display:inline;
    background-color:red;
    position:relative;
}
ul li ul{
    display:inline;
    position:absolute;
    top:20px;
    left:0;
    white-space:nowrap;
}
ul li li{
    display:inline;
    background-color:green;
}
li{
    border:1px solid white;
}
li:hover{
    border:1px solid blue;
}

使用嵌套列表创建包含子菜单的水平菜单

1 个答案: