下拉式菜單幫助

我已經爲現在製作了一個菜單，我需要更新它以從服務選項卡上下拉以節省空間。可悲的是我不太擅長下拉菜單，任何人都可以幫我添加這個嗎？這裏是菜單的基本佈局，請參閱CSS的jsfiddle頁面。下拉式菜單幫助

<div id="menu-container"> 
<div style="position:fixed; top:0; right:0; color:#FFF; font-size:12px;">V. 0.772</div> 
    <div id="menu"> 
    <div id="nav"> 
      <ul> 
       <li class="menu-hover-underline"><a href="#about">Home</a></li> 
       <li class="menu-hover-underline"><a href="#services">Services</a></li>    
       <li class="menu-hover-underline"><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     <!-- Your logo goes in this div below --> 
     <div id="menu-logo"> 
      <a class="logo-hover" href="#home"><img id="logo"src="images/logo.png" style="border:none;" /></a> 
     </div> 
    </div> 
</div>

來源

2015-07-10 Tyharo

JS小提琴的鏈接，夥計。 – mechanicals

此外，在HTML中沒有子菜單*。 –

對不起，這篇文章已經更新了鏈接。 – Tyharo

更新您的提琴。你的代碼很粗糙。我仍然添加了一個下拉列表。這裏是小提琴鏈接

https://jsfiddle.net/soue5fd0/1/

CSS

#nav .menu-hover-underline>ul { 
    position: absolute; 
    display: none; 
    padding-left: 0; 
    background-color:#477187; 
    width: 100%; 
    padding-bottom: 10px; 
} 
#nav .menu-hover-underline:hover ul { 
    display: block; 
} 
#nav .menu-hover-underline ul li { 
    color: red; 
    display: block; 
    padding: 5px; 
    margin: 0; 
    font-size: 15px; 
    height: auto; 
    text-align: center; 
    cursor: pointer; 
    margin-bottom: 10px; 
}

只需添加這個CSS並在撥弄你的代碼中給出的HTML。

來源

2015-07-10 15:05:00 mechanicals

謝謝你工作完美！是的代碼是粗糙的，我打算一旦下降工作清理它。 – Tyharo

這是多麼簡單的下拉菜單隻能用CSS來實現。添加您的鏈接和任何你想要的。

HTML

<ul> 
    <li>Home</li> 
    <li>Services 
    <ul> 
    <li>Web Design</li> 
    <li>Web Development</li> 
    <li>Illustrations</li> 
    </ul></li> 
</ul>

CSS

ul { 
} 
ul li { 
    display: inline-block; 
    position: relative; 
    padding: 15px 20px; 
} 
ul li:hover { 
    background: #555; 
    color: #fff; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 48px; 
    left: 0; 
    width: 150px; 
    display: none; 
} 
ul li ul li { 
    background: #555; 
    display: block; 
    color: #fff; 
} 
ul li:hover ul { 
    display: block; 
}

這裏的jsfiddle：https://jsfiddle.net/8wnwnba7/

來源

2015-07-10 14:51:20

下拉式菜單幫助

回答

相關問題