我想制作一个显示在父菜单内部/顶部的下拉菜单。我想用纯css来做这件事。我（在Photoshop中）做了一个我想要的快速示例。这是一个链接。这是我现在所拥有的，但这是一个正常的下拉菜单，而不是一个停留在父容器中的菜单。
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:这是指向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>HTML
我从html中删除了/br，因为它迫使导航菜单下拉。
<body>
<ul>
<li>Hi
<ul>
<li><a href="">HOLA</a></li>
<li><a href="">HALO</a></li>
</ul>
</li>
</ul>
</body>
CSS
阅读css中的注释，了解所有更改/解释（询问是否有您不理解的内容）。我还从你的代码中删除了很多不必要的css（其中一些可能仍然存在）。
ul {
text-align: center;
font-size: 15px;
font-family: arial, sans-serif;
line-height: 32px;
margin: 0 auto;/*center nav-menu*/
padding: 0;
width: 300px;
background: #555;
list-style: none;
border-radius: 2px;
}
/*unnecessary now
ul:hover {
background: #666;*/
}
ul:active {
background: #444;
}
ul li {
display: block;
color: #fff;
position: relative;
width: 100%;
height: 100%;
}
/*unnecessary now
ul li:hover {
background: #666;
}*/
/*hide ul and making it the same dimensions as its parent*/
ul li ul {
padding: 0;
position: absolute;
left: 0px;
right: 0px;
top:0px;
bottom: 0px;
display: none;
}
/*make submenu appear on hover of ul*/
ul li:hover ul {
display: block;
}
/*style the subnavigation-list*/
ul li ul li {
display: block;
width: 50%;/*accomidates for 2 list items, adding more will drop them below*/
float: left;
}
/*style your buttons*/
ul li ul li a{
text-decoration: none;
color: white;
text-shadow: 0 -1px 0 #000;
display: block;
height: 100%;
width: 100%;
background-color: #555;
box-shadow: 0px 0px 1px 1px white inset;
}
/*style button on hover*/
ul li ul li a:hover{
background-color: #999;
}
JSFiddle