垂直菜單「漂浮在」導航欄水平

在我最近的項目，我有這個菜單添加到我的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/

UPDATE

嘗試更新的代碼，以避免在使用表，我得到這個：https://jsfiddle.net/klebermo/09br9e5p/2/

來源

2016-06-09 Kleber Mota

我建議不要使用表格進行佈局，其中包括菜單佈局。你會沒事的一些幫助，給你語義代碼來完成相同的效果？此外，此菜單是否可摺疊菜單？ – MassDebates

如果我可以使用表格工作，我可以嘗試其他佈局。我很滿意任何幫助來實現我想要的效果。這不是一個可摺疊的菜單。 –

@MassDebates嘗試更新代碼，以避免使用表ans我得到這個：https：//jsfiddle.net/klebermo/09br9e5p/2/。我如何讓菜單中的項目保持垂直放置而不是水平放置？ –

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

我刪除了很多的都塞滿了CSS不必要的樣式。您丟失的關鍵選擇器是：

header ul ul{ 
/* Stuff */ 
}

未來，請清楚您的要求。瞭解你，這非常令人沮喪。我甚至不完全知道這是否接近你的目標。

來源

2016-06-09 14:29:35 MassDebates

請勿在<td></td>之內放入您的圖片，而應使用m再添加1個元素並將其放置在裏面。

@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; 
 
}

<body> 
 
    <header> 
 
    <ul> 
 
    <li><img class="logo" src="#" alt="logo"></li> 
 
     <li> 
 
      <table> 
 
      <tbody> 
 
       
 
      <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> 
 
      </tbody></table> 
 
     </li> 
 
     <li><a href="#">blablabla</a></li> 
 
     <li><a href="#">blablabla</a></li> 
 
     <li><a href="#">blablabla</a></li> 
 
     </ul> 
 
    </header> 
 
    <main> 
 
     <article> 
 
     </article> 
 
    </main> 
 
    </body>

來源

2016-06-09 13:27:34 Pushpendra

垂直菜單「漂浮在」導航欄水平

回答

相關問題