• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

CSS: help meeeee with menu items

mewtini

sorry guys, don’t lose
Pronoun
she/her
so I have a menu

and I have li:hover so that when I hover over it the background color lights up

but the color goes only from the left edge of the link text to the right edge

here, have a wonderful text-graphic thing

|<--->|Text here |
That <---> is the space I want highlighted. The |Text here | part is the part that is highlighted, and the last | is the right edge of the menu. (Yeah, left aligned.)

I've tried expanding li:hover's width, tried going left: 50%, and so forth.

How do I fix this? I looked at <span> although frankly right now I'm just frustrated >:(
 

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
The li element has a left margin by default - that's probably what's creating the empty space. Set margin:0; on the lis and give them a padding instead.

Although I would recommend giving the list item no margins or padding and instead giving the links inside the list items display:block and the padding you want. That way the actual clickable part extends all the way across, too.
 

mewtini

sorry guys, don’t lose
Pronoun
she/her
The li element has a left margin by default - that's probably what's creating the empty space. Set margin:0; on the lis and give them a padding instead.

Although I would recommend giving the list item no margins or padding and instead giving the links inside the list items display:block and the padding you want. That way the actual clickable part extends all the way across, too.
I think that #leftmenu li is set to display:block already! I'll try setting it to margin:0 and see how it goes, then.

Right now the clickable part is all of the highlighted-across-bit, so.

Thanks!
 
Top