Поместите изображение «плюс» рядом с пунктом меню

Question

Как разместить изображение «плюс» возле пункта меню? Вот link

Answer 1

Подведите <span class="collapse"> в <a> теге

затем, чтобы предотвратить соединение от стрельбы, в функции для распада просто положить

e.preventDefault; или return false;

Answer 2

Если вас беспокоит их дистанция? посмотрите, имеют ли элементы ширину, если да, попробуйте уменьшить ее, используйте display: inline-block и меняйте ширину на min-width. Вы можете обернуть текст в промежутке и при необходимости добавить немного правого края.

Answer 3

Элементы с классом expand и collapse имеют абсолютное позиционирование с top: 0; right: 0;. Это означает, что его расстояние от верхнего и правого краев (от его родительского элемента) составляет 0 пикселей.

Что бы я лично сделал в этом случае (совсем не то, что рекомендовал бы эксперт CSS), было бы удаление правила right из класса и добавление встроенного style="left: ##px" внутри каждого диапазона.

На моем экране, что лучше всего работает эта комбинация:

<li class=" level0 nav-2 active level-top m-dropdown menu-style-dropdown parent"> 
    <a href="http://45.55.85.113/products.html" class="level-top"> 
     <span> <span class="category_icon fa fa-tags"></span>SHOP</span> 
    </a><span class="expand" style="left: 55px"><i class="fa fa-minus-circle"></i></span> 
    <ul class="level0" style="display: block;"> 
     <li class=" level1 item classic nav-2-1 first parent"> 
      <a href="http://45.55.85.113/products/furniture.html"> 
       <span> <span class="category_icon fa fa-key"></span>Furniture</span> 
      </a><span class="collapse" style="left: 100px"><i class="fa fa-plus-circle"></i></span> 
      <ul class="level1"> 
       <li class=" level2 nav-2-1-1 first"> 
        <a href="http://45.55.85.113/products/furniture/patio-furniture.html"> 
         <span>Patio Furniture</span> 
        </a> 
       </li> 
       <li class=" level2 nav-2-1-2"> 
        <a href="http://45.55.85.113/products/furniture/cafe-chairs-and-barstools.html"> 
         <span>Cafe Chairs and Barstools</span> 
        </a> 
       </li> 
       <li class=" level2 nav-2-1-3 last"> 
        <a href="http://45.55.85.113/products/furniture/chairs-seating.html"> 
         <span>Chairs &amp; Seating</span> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <li class=" level1 item classic nav-2-2 parent"> 
      <a href="http://45.55.85.113/products/furniture-fixings.html"> 
       <span>Furniture Fixings</span> 
      </a><span class="collapse" style="left: 135px"><i class="fa fa-plus-circle"></i></span> 
      <ul class="level1"> 
       <li class=" level2 nav-2-2-4 first"> 
        <a href="http://45.55.85.113/products/furniture-fixings/connectors.html"> 
         <span>Connectors</span> 
        </a> 
       </li> 
       <li class=" level2 nav-2-2-5 last"> 
        <a href="http://45.55.85.113/products/furniture-fixings/insert-nuts.html"> 
         <span>Insert Nuts</span> 
        </a> 
       </li> 
      </ul> 
     </li> 
     <li class=" level1 item classic nav-2-3 last"> 
      <a href="http://45.55.85.113/products/electrical.html"> 
       <span>ELECTRICAL</span> 
      </a> 
     </li> 
    </ul> 
</li> 

или сокращенно:

left: 55px; 
left: 100px; 
left: 135px; 

соответственно магазин, мебель и мебель Закрепление