It’s allways nice to give.

 
Schadel: Saccucci: imagine this as an horizontal menu

Klase: Amikrop could be spans, or divs, or whwatever. but you should provide a link to see, otherwise it’s hard to tell

Sidi: Hmm, that’s interesting; when chrome is in device emulation mode it doesn’t properly obey css clip rules

Lovinggood: Amikrop, Preferred live pastebins: http://jsfiddle.net/http://codepen.io/http://paste.asmcbain.net/http://www.webdevout.net/test/

Angelica: Saccucci: http://jsfiddle.net/kwccc2xb/

Shelor: Saccucci: I want the whole part of each item to be highlighted, not just between its letters

Milch: The whole part of the #menu span

Gaulke: Or anyone else if they know

Popiolek: Amikrop: did you mean “#menu:hover span { . }” ?

Covin: I want only one item to be highlighted the one that the cursor is on

Wierzbicki: But I want the color to fill the whole part, until the border

Morganti: Amikrop: oh, you want the yellow to extend vertically to the black outline?

Scibetta: Amikrop oops, just got back, checking

Dobrinski: I got a css + jquery combo question, is this an ok place to ask or should i goto a jquery room?

Schechter: Amikrop: you’ll have to change the span to an inline block before you can mess with the height

Maritt: Just did, but same result

Proescher: It could work if I could place block elements one next to each other without adding new lines

Roscup: Amikrop http://jsfiddle.net/kwccc2xb/1/

Dromgoole: Amikrop that could do it

Cantv: It does what you said

Tropiano: Saccucci: i want only one item to be highlighted

Chopra: Not all three of them

Balasubramani: And how will it reach both ends left and right if it only highlights 1 item?

Bushell: Plus, it still didn’t highlight the whole border body

Martiez: I dont want it to reach both ends

Pascarelli: I want it to reach both ends vertically, and horizontally up to 1/3 of the whole thing

Tille: The part of each owns item

Alcivar: I want a horizontal border, devided into 3 parts, and when i hover on each part, it gets highlighted

Virkler: The 1/3 of the whole space, not just between the letters of the word

Popovich: Amikrop can you put a screen of how it should look?

Ledermann: Removing padding will make the highlight reach top-bottom ends

Vanderhoof: But I think that’s not what you want.

Rediske: Amikrop: cheap trick – http://jsfiddle.net/kwccc2xb/2/

Braylock: Yeah, something like that

Vogelgesang: Covered it with outline :

Ketron: Amikrop: your main problem is that you put things into a span which is inline and then you put padding on that span

Ouzts: Well, not exactly, since all the highlight areas cover each other if all present at once

Compston: Whats a good website that offers legal free background textures

Chevas: But still a nice try, thanks I guess

Panarella: Hello234123 https://stocksnap.io/ stuff like that?

Dorsainvil: All photos are free from copyright restrictions – No attribution required :

Braymiller: Amikrop: cleaner way to do it is to change the spans to tables – http://jsfiddle.net/kwccc2xb/3/

Stechlinski: How else could I have the same result mbm ? If I don’t use inline elements, I can’t avoid the newlines, and I don’t want newlines in the menu

Lechuga: Guess i need to give them credits at least?

Pipkins: Hello234123 “no attribution required” it says, so no

Sticher: Guess i ll give them credits anyway if i use it lol

Trageser: How does that #hover thing work

Voetberg: It’s allways nice to give proper credits, even when it is not required to