Question

在我最近的项目中，我已将此菜单添加到index.html视图中：

      <table>
        <tr class="logo">
          <td><img src="#" alt="logo"/></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
        <tr class="menu">
          <td><a href="#">blablabla</a></td>
        </tr>
      </table>

此菜单位于此水平导航栏中：

<header>
  <ul>
    <li>...</li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
    <li><a href="#">blablabla</a></li>
  </ul>
</header>

我希望此菜单漂浮在导航栏上，如下所示：

任何人都知道如何做到这一点？

我目前的css样式：

table {
  z-index: 1;
}

table > tr.logo {
  width: 280px;
  height: 480px;
  background-color: #A9A9A9;
}

table > tr.menu {
  background-color: #DCDCDC;
}

table > tr.menu:hover {
  background-color: #C0C0C0;
}

table > tr.menu > a {
  text-decoration-color: #FAEBD7;
  font-family: 'Special Elite', cursive;
}

table > tr.menu:hover > a {
  text-decoration-color: #FFFAF0;
}

jsfiddle：https://jsfiddle.net/klebermo/09br9e5p/

更新

尝试更新代码以避免使用表格，我得到了这个：https://jsfiddle.net/klebermo/09br9e5p/2/

Answer 1

https://jsfiddle.net/09br9e5p/6/

我删除了许多混乱CSS的不必要的样式。你缺少的一个关键选择器是：

header ul ul{
/* Stuff */
}

将来，请清楚你要问的是什么。理解你是非常令人沮丧的。我甚至不完全知道这是否接近你的目标。

Answer 2

请勿在{{1}}内添加您的图片，而是再添加1个元素并将其放在其中。

<td></td>

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite|Luckiest+Guy|Slabo+27px|Open+Sans);

html, body {
  margin:0;
  padding:0;
}

header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}

header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 32px;
    overflow: hidden;
    background-color: #333;
    float: left;
    z-index: 2;
}

header ul.right {
  padding: 0;
  padding-right: 32px;
  float: right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

aside ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

aside li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-family: 'Special Elite', cursive;
}

/* Change the link color on hover */
aside li a:hover {
    background-color: #555;
    color: white;
}

aside li.active {
    background-color: #4CAF50;
}

.title {
  font-family: 'Luckiest Guy', cursive;
}

.user {
  font-family: 'Slabo 27px', serif;
}

div.main {
  font-family: 'Open Sans', sans-serif;
}

table {
  z-index: 1;
}

table > tr.logo {
  width: 280px;
  height: 480px;
  background-color: #A9A9A9;
}

table > tr.menu {
  background-color: #DCDCDC;
}

table > tr.menu:hover {
  background-color: #C0C0C0;
}

table > tr.menu > a {
  text-decoration-color: #FAEBD7;
  font-family: 'Special Elite', cursive;
}

table > tr.menu:hover > a {
  text-decoration-color: #FFFAF0;
}

垂直菜单“浮动”水平导航栏

2 个答案: