Как я могу получить HTML-выпадающий, чтобы начать ниже

Question

Веб-сайт, над которым я работал, очень интересен всем, потому что я хочу, чтобы он был очень чистым и хорошим сайтом для моей первой профессиональной работы.Единственный пункт, который меня раздражал, это то, что у моей навигационной панели есть всплывающее меню, и оно перекрывается логотипом компании.Я хотел знать, есть ли способ в CSS, чтобы раскрывающийся список начинался примерно на 12 пикселей ниже?

<div class="col-md-11 col-sm-12  text-left-xs text-left-sm ">
                        <div class="bar__module" >
                            <ul class="menu-horizontal ">
                                <li class="dropdown dropdown--hover "><a href="/motors/shop.aspx">Shop</a><span class="dropdown__trigger"></span>
                                    <div class="dropdown__container">
                                        <div class="container">
                                            <div class="row">
                                                <div class="dropdown__content col-md-12 text-left" style="background: linear-gradient(#E9E9E9, #ffffff);">
                                                    <div class="col-md-3 hidden-xs ">
                                                        <img alt="" src="../photosvideos/sidewindernewpics/Sw shield side copy.png" style="margin-bottom: -18px;" />
                                                    </div>
                                                    <div class="col-md-3 text-left">
                                                        <h5>Products</h5>
                                                        <ul class="menu-vertical">
                                                            <li><a href="/motors">About The Sidewinder</a></li>
                                                            <li><a href="/motors/shop.aspx">Shop</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

Пример того, что происходит

Я хочу, чтобы этот край был ниже, чтобы он не касался логотипа

Answer 1

На самом деле существует несколько способов переместить элемент на 12 пикселей в CSS:

• С помощью margin-top: 12px
• С помощью padding-top: 12px
• Используя border-top: 12px solid transparent (или пунктир, пунктир и т. Д.)
• Используя relative position и top: 12px
• Используя absolute position и top: 12px
• Используя fixed position и top: 12px
• Используя transform: translateY(12px)

Без дополнительного кода гораздо сложнее сказать, какой изэти решения лучше всего подходят для вашего случая.

Answer 2

Трудно помочь без иллюстрации проблемы, также вы должны включить некоторый код, чтобы облегчить понимание и помочь вам решить вашу проблему.

В любом случае, чтобы переместить элемент вниз на странице, есть несколько способов. Одним из них, и, вероятно, наиболее распространенным является использование margin-top.

.moveDown 
{
   margin-top: 12px;
}

Если ваш выпадающий элемент / элемент не перемещается, это может иметь какое-то отношение к позиции, для которой вы его разработали (мне сложно ответить без какого-либо кода / рисунков, на которые можно посмотреть ...)