Drowbox - problem z pozycją


(Thesopranos1990) #1

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:


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 :slight_smile: