我想制作一个显示在父菜单内部/顶部的下拉菜单。我想用纯 css 来做这件事。我已经为我正在寻找的东西做了一个简单的例子(在 Photoshop 中)。 Here is a link.这是我现在拥有的，但这会生成一个普通的下拉菜单，而不是保留在父容器中的菜单。
CSS:
.titlebox ul {
text-align: center;
font-size: 15px;
font-family: arial,sans-serif;
line-height: 32px;
margin: 0;
width: 100%;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
.titlebox ul:hover {background: #666;}
.titlebox ul:active {background: #444;}
.titlebox ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
.titlebox ul li:hover {
background: #666;
}
.titlebox ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
}
.titlebox ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
.titlebox ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
.titlebox ul li ul li:hover {background: #666;}
HTML(快速):
<ul>
<li>Hi<br/>
<ul>
<li><a href="http://www.google.com">Google</a><br/></li>
<li>HOLA<br/></li>
<li>HALO<br/></li>
</ul></li>
</ul>
感谢任何帮助!我知道这可能有点令人困惑，但我不知道该如何解释。如果您有任何问题，请随时提出!
谢谢， 乌萨马汗
编辑 1: 这是 link到 JSFiddle。
最佳答案
我想这是你要找的。如果不是，你能告诉我哪里错了吗。
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0;
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px !important;
transition: all 0.15s ease;
}
ul:hover {
background: #666;
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 32px !important;
}
ul li:hover {
background: #666;
}
ul li:hover ul {
display: inline;
opacity: 1;
visibility: visible;
margin-left:10px;
}
ul li ul {
padding: 0;
position: absolute;
top: 0px;
right: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: inline;
color: #fff;
text-shadow: 0 -1px 0 #000;
float: left;
width: 33%;
}
ul li ul li:hover a{
color: white;
}
ul li ul li:hover {
background: #777;
}<body>
<ul>
<li>Hi
<ul>
<li><a href="http://www.google.com">Google1</a></li>
<li><a href="http://www.google.com">Google2</a></li>
<li><a href="http://www.google.com">Google3</a></li>
</ul>
</li>
</ul>
</body>关于css - 有没有一种方法可以在纯 CSS 中的父主体内部/之上显示下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26771198/