[Solved] Problem with menu

[kenpati]

Hello everyone i have several problems with my menu
http://just-example.url.ph/
1. In a tab (Freebies) i have drop-down menu, in this menu i have lower divider when i am adding some text i want to this is separator (http://just-example.url.ph/images/drop-down-separator.png) take maybe 80% of the total space and (the same width to any elements. Regardless of how much I am adding some text (if this possible please help))

2.and second problem add to the tab (Freebies) this image http://just-example.url.ph/images/arrow.png please :D

[Paulie_D]

Could you please put the demo into a Cdoepen.io example rathe rthan a test page.

It’s really hard to debug and tweak code using Developer Tools

However, both of these can easily be accomplished by pseudo-elements.

[kenpati]

here http://codepen.io/anon/pen/qKsoF :)

[Paulie_D]

This should fix the first issue

ul.nav ul li {
  float:none;
  list-style:none inside;
  width:100%;
  text-align:center;
  height:30px;
  background-image:url(http://just-example.url.ph/images/drop-down-separator.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 80% ;
}

Codepen Link

[Paulie_D]

…and this should be the other.

ul.nav li.drop-down {
  background-image: url(http://just-example.url.ph/images/arrow.png);
  background-size:12px 9px  ;
  background-position: right center;
}

Codepen Link 2

[kenpati]

OMG thanks you I actually forgot this (background-size)

[Paulie_D]

I actually forgot this (background-size)

That’s one reason I generally separate out complex CSS ‘shortcut’ properties into their various parts.

My CSS is a little longer in pre-production but a good minifier will combine them..hopefully.

[kenpati]

and how about second problem need this arrow.png with separator.png i try ::after but nothing :D

[Paulie_D]

Check out my second fiddle

http://codepen.io/Paulie-D/pen/HvjCq

[kenpati]

i need use double background?

[kenpati]

i need like this http://just-example.url.ph/arrow.png )

please?)

[kenpati]

somebody?)

[Paulie_D]

Yes, a double background would work.

Frankly, I don’t use separator images, there are other options like borders and such.

[kenpati]

thanks you close topic)

[Author]

Posts