下拉菜单帮助

Question

我已经构建了一段时间的菜单，我需要对其进行更新，以便在服务选项卡上有一个下拉菜单以保存 space。遗憾的是我不太擅长下拉菜单，有人可以帮我添加这个吗？这是菜单的基本布局，请参阅 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>

Answer 1

只有 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/

Answer 2

已更新您的 fiddle。你的代码很粗糙。我仍然添加了一个下拉菜单。这里是 fiddle link

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 和 fiddle 中给出的 HTML 添加到您的代码中即可。

下拉菜单帮助

Drop Down Menu Assistance

html

css

menu

drop-down-menu