Hjälp med hover - går inte hela vägen

Jag har en meny där hover går från första bokstaven till kanten på höger sig av meny diven. Det jag vill är att den ska gå över hela diven - Alltså från vänster kant till höger. Infogar en bild så ni ser mer exakt hur det ser ut!:

http://s21.postimg.org/3wvkgsnmf/image.png

free screen capture

ni behöver inte ora er för sluttags och sådant i html koden, jag har bara valt att inte ta med hela menyn eftersom jag anser att den är personlig. så lsutdivar och dylikt finns. och resten av menyn ser likadan ut som det ni får se!!

Tack på förhand!

Jag har en meny där hover går från första bokstaven till kanten på höger sig av meny diven. Det jag vill är att den ska gå över hela diven - Alltså från vänster kant till höger. Infogar en bild så ni ser mer exakt hur det ser ut!:

http://s21.postimg.org/3wvkgsnmf/image.png

free screen capture

HTML:

  <div class="menu"><div class="infobox"><h3>Kategorier</h3></div><ul class="leftmenu">
			  <li><a href="http://thefamily.be/filmer-2">Bilder</a></li>

CSS:

 .menu {
list-style: none;
background-color: #d7ebf9;
width: 200px;
height: 450px;
float: left;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top: 100px;
margin-left: 0px;
margin-bottom: 100px;
border-style:solid;
border-color:#8DC6FF;
border-width:1px;
color: #999;

	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
}
h3{
text-align: center;
vertical-align: middle;
line-height: 50px;  
font-weight: bold;
color: white;
text-decoration: none;
}


.menu a:link {
text-decoration:none;
display: block;
color: #3F4344;
font-weight:bold;
text-decoration:none;

} 
a:visited {
color:#3F4344;
}  



.menu a:hover {
background-color:#30ACFF;
width:100%;
color: white;
-moz-border-radius: 10px;
border-radius: 10px;


}
a:active {
color:#3F4344;
}
 
ul.leftmenu li {

list-style-type:none;
margin:0;
padding:0;

}

ni behöver inte ora er för sluttags och sådant i html koden, jag har bara valt att inte ta med hela menyn eftersom jag anser att den är personlig. så lsutdivar och dylikt finns. och resten av menyn ser likadan ut som det ni får se!!

Tack på förhand!

antingen gör jag fel eller så funka inte det heller

Jag vill ju ha texten i mitten men att hovern ska gå över hela menyn. Och jag får hovern att gå så som du visat. men så fort jag flyttar länkarna till mitten av menyn så följer hovern med.

Man ska ha en lista för navigationslänkarna, då de just utgör en lista.

Semantik.

Det är best-practice att göra menyn som en lista. Det är också SEO.

Jag har fått lära mig att det är en lista med länkar, alltså ska man använda <ul> och <li>. Jag gör så här:

<nav>
   <ul>
      <li>Start</li>
      <li>Bilder</li>
      <li>Videos</li>
   </ul>
</nav>

Det är förmodligen inget fel med det ö.h.t.: i princip alla sidor jag bygger till vardags är sådana eftersom vårt CMS genererar navigation med listor, men det behövs definitivt inte.

Det närmaste praktisk nytta man kommer med semantik är att hjälpa sökmotorer att förstå syftet med alla element på en sida, samt att underlätta för synskadade att navigera ens sida genom sina skärmläsare. Att placera sin navigation i en lista tillför förmodligen inget till något av de ändamålen, då sökmotorer får mer än tillräcklig information om länkarnas syfte genom <nav>, och skärmläsare verkar läsa upp navigation utan lista mer effektiv än i lista. Man kan argumentera för att Lynx-ish webbläsare får snyggare navigation om navigationen ligger i en lista, och att riktikgt gamla webbläsare har svårt med att applicera stilregler på vad som initialt varit inline-element... Men ja. Nja.

Personligen tycker jag att rekommendera/använda listor för navigation är att krångla till det i onödan. Varför sitta och nollställa sin <ul> från punkter och paddings, floata sina <li> och sedan skriva den markupen runt alla länkar när det räcker med att bara visa sina <a> som inline-block?

Skulle du kunna editera min befentliga css kod, så vore du världens gulligaste, har försökt med det du skrivit, men jag får bara inte till det, måste vara någonting jag missar. Ledsen om jag är trög men är fortfarande under upplärningstadiet. Hela css koden till menyen ser ut som följande:

Det där ser ut som webbläsarens default-padding på <ul>. Ge din ul padding: 0 så ska det se bra ut.

äntigen, tack så mycket! Om jag vill ha texten lite mer åt vänster sida, hur gör jag då? när jag testar med typ margin-left: 20px; så blir hoverbaren dum igen! och kategorierna blev centrerade med varandra också, vill ha dom typ så att första bokstaven i varje kategori ligger i kant med varandra

Ja jag testade det där också, och nu är allt bra, förutom att hovern går utanför diven på höger sida. hoppas jag inte är jobbig med dig nu