Witam. Problem polega na tym,że nie umiem za bardzo manewrować boxem który pojawia się przy hover. Generalnie wszystko działa i jest dość ładnie ale ja chciałbym żeby boks pojawiał się pod tekstem w pozycji wyśrodkowanej w stosunku do słowa/linku na który się najeżdża. Dla wyjaśnienia chodzi o to, że jak słowo które po najeździe na nie myszką “wysuwa” boxa ma powiedzmy szerokość 30px a box ma mieć szerokość 90 px to ustawi się on w ten sposób, że 30px będzie po lewej stronie na dole od słowa, 30px pod nim i 30 px po prawej. Dodatkowo chciałbym aby box ten miał zaookrąglone rogi a nie takie twarde kwadratowe jak domyślnie. Da się tak zrobić za pomocą samego CSS?
Jak ktoś nie zrozumiał o co chodzi z tym wyśrodkowaniem czy zaokrąglonymi rogami to dokładni taki sam efekt jest zastosowany przy rozwijalnym menu na witrynie:
http://gmgames.org/
Boks pod menu jest wyśrodkowany a rogi boxa są zaokrąglone.
Tak wygląda HTML:
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
a tak CSS
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Pozdrawiam 