CODEWITHSUNDEEP
css
Navneet Saini
Navneet Saini

Reputation: 944

Why is my text shifting to the left here?

I am trying to create a CSS Menu bar.

Here is Fiddle link

Now, notice in the first menu item (Brushes) where I added ul and gave it class of submenu, the text shifts to the left. For the bottom two, its aligned in the middle. Why is this happening and how can I solve this problem? I want all the menuItem text aligned in the middle even after adding subMenus.

Upvotes: 1

Views: 93

Answers (4)

Maurizio Battaghini
Maurizio Battaghini

Reputation: 478

The main problem is the "SUBMENU" element in page. It take spase and push the brushes menu to left

try to resolve putting:

.menuItems{
width: 100%;
}

and

.menuItems:hover{
width: 110%; /*example*/
}

Hope was helpful...

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

Setting width: 100% to .menuItems may hurts the effects. Just Remove width: inherit; from .menuItems a selector.

JsFiddle Demo

Upvotes: 1

Егор Щапов
Егор Щапов

Reputation: 89

If i understand you right, this helps you:

.menuItems a {
display: block;
line-height: 40px;
height: inherit;
width: inherit;
text-align: center;
}

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Reason is .menuItems is not having a width of 100%. If it is changed to 100%, it works fine.

Here is the WORKING SOLUTION

The Code Change:

.menuItems{
width: 100%;
}

Same goes with .menuItems:hover

Upvotes: 1

Related Questions