2
我有一个下拉选项的菜单,我试图调整从列表中选择的相应项目下的下拉菜单。到目前为止,它与左侧对齐,下拉ul列表位于应显示下拉列表的元素内。DropDown Aligned
我不确定我在做什么错在这里,有一些建议?
HTML
<div id="menu">
<div id="menu-wrapper">
<img id="home-icon" src="images/home.svg" />
<nav id="menu">
<ul>
<li><a href="">SUBSCRIBE</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">MARINA GUIDE</a></li>
<li class="submenu"><a href="">PRACTICAL</a>
<ul>
<li><a href="">Glossary</a></li>
<li><a href="">Tips</a></li>
</ul>
</li>
<li><a href="">OUT AT SEA</a></li>
<li><a href="">GEAR</a></li>
<li><a href="">FORUM</a></li>
</ul>
</nav>
<div id="menu-icon-container">
<img id="menu-icon" src="images/menu.svg" />
</div>
<div id="menu-icon-container">
<img id="menu-icon" src="images/search.svg" />
</div>
</div>
CSS
#menu-icon-container {
position: relative;
float: right;
height: 100%;
width: 60px;
background-color: ;
}
#menu-icon-container:hover {
background-color: #bf1b33;
cursor: pointer;
}
#menu-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
cursor: pointer;
}
#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
margin-left:20px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #00599b;
padding: 0px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-family: 'Open Sans', sans-serif;
}
#menu ul li a:hover {
border-bottom: 2px solid #bf1b33;
}
#menu ul ul
{
display:none;
position:absolute;
top:100%;
background: fuchsia;
padding:0
}
#menu ul ul li
{
float:none;
width:200px
}
#menu ul ul a
{
line-height:120%;
padding:10px 15px
}
#menu ul li:hover > ul
{
display:block
}
哇感谢@ketan更新和工作的感谢! [demo](https://jsfiddle.net/qjqagthw/4/) – Eugenio
@Eugenio:那么请给那个男人一个帮忙,并将他的回答标记为已接受。 – Connum
@Connum我点击了支票图标,它告诉我“你不能在两分钟内接受答案”我给系统一下再试一次:)!我当然会! – Eugenio