Proszę o pomoc.
Nie mogę sobie poradzić z rozwijanym menu.
Chodzi głównie o odpowiednie przyczepienie podmenu do menu głównego. (Podczepiam podmenu do tekstu (teksty w menu głownym składają się z różnej ilości wyrazów), a nie umiem do całego bloku z menu).
A także o wyśrodkowanie tekstu w pionie.
(Gdy używam
display: flex;
align-items: center;
justify-content: center;
działa, ale wtedy jest jeszcze większy problem z ustawieniem podmenu).
Również mam problem z ustawieniem w 1 linii pioniowej np. tekst - "podwojny opis" - aby lewa strona wyrazów zaczynała się równo w pionie.
CSS
body
{
text-transform: uppercase;
color: blue;
}
ol > li {
float: right;
width: 120px;
height: 180px;
text-align: center;
margin-right: 3px;
list-style: none;
border: solid;
background-color: black;
}
a {
text-decoration: none;
word-break: break-word;
}
ol > li > ul {
list-style: none;
width: 220px;
margin-top: 30px;
padding: 0px;
}
ol > li > ul > li {
background-color: black;
height: 60px;
border: solid;
}
ol > li > ul > li > a {
color: red;
}
html
<body>
<div class="wrapper">
<ol>
<li><a href="#">Dwuczesciowy napis</a></li>
<li><a href="#">Krotko</a>
<ul>
<li><a href="#">Opis nr 1</a></li>
<li><a href="#">Opis nr 2</a></li>
<li><a href="#">Opis jednanazwa - druganazwa</a></li>
<li><a href="#">Opisy rozne, bardzo krotkie i bardzo dlugie oraz brak opisow</a></li>
</ul>
</li>
<li><a href="#">Trzyczesciowy dluuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuzszy napis</a></li>
<li><a href="#">Podwojny opis</a></li>
<li><a href="#">Napis kilkuczesciowyyyyyyyyyyyyyyyyyyyyyyy</a>
<ul>
<li><a href="#">Opis nr 1</a></li>
<li><a href="#">Opis nr 2</a></li>
<li><a href="#">Opis jednanazwa - druganazwa</a></li>
<li><a href="#">Opisy rozne, bardzo krotkie i bardzo dlugie oraz brak opisow</a></li>
</ul>
</li>
</ol>
</div>
</body>
Bardzo dziekuję za ewentualną pomoc.