Question

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

更新了你的小提琴。你的代码很粗糙。我还是添加了一个下拉列表。这是小提琴链接

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添加到您的代码中即可。

下拉菜单帮助

2 个答案: