2
Ich habe ein Menü mit Drop-Down-Option, ich versuche, das Dropdown-Menü unter dem jeweiligen Element aus der Liste ausgewählt. Soweit ist nach links ausgerichtet, die Dropdown-Liste ist innerhalb des Elements, das die Dropdown-Liste anzeigen sollte.DropDown Aligned
Ich bin mir nicht sicher, was ich hier falsch mache, ein Vorschlag?
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
}
wow dank @ketan aktualisiert und dank arbeiten !! [demo] (https://jsfiddle.net/qjqagthw/4/) – Eugenio
@Eugenio: Dann tun Sie diesem Mann einen Gefallen und markieren Sie seine Antwort als akzeptiert. – Connum
@Connum Ich habe auf das Häkchen geklickt und es sagt mir "Du kannst keine Antwort in zwei Minuten annehmen" Ich gebe dem System einen Moment, um es erneut zu versuchen :)! Ich werde natürlich !! – Eugenio