下拉式菜单帮助

我已经为现在制作了一个菜单，我需要更新它以从服务选项卡上下拉以节省空间。可悲的是我不太擅长下拉菜单，任何人都可以帮我添加这个吗？这里是菜单的基本布局，请参阅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

下拉式菜单帮助

回答

相关问题