Put "plus" picture near menu item [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to put "plus" picture near menu item ? Here is the link

Answer 1

move the <span class="collapse"> within the <a> tag
then to prevent the link from firing, within the function for collapse simply put
e.preventDefault; or return false;

Answer 2

If you are worried about their distance? look if the elements have width, if yes try to reduce it use display:inline-block, and changing width to min-width.you can wrap the text in a span and add little right margin if needed.

Answer 3

Your elements with class expand and collapse have an absolute positionning with top: 0; right: 0; That means its distance from the top and right edges (from its parent element) are 0 pixels.
What I would personally do in this case (not at all what would be recommended by CSS experts) would be removing the right rule from the class and add an inline style="left: ##px"inside each span.
On my screen, what works best is this combination :
<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 & 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>
or for short :
left: 55px;
left: 100px;
left: 135px;
respectively for Shop, Furniture and Furniture Fixing