View Full Version : menu item backgroundcolor

Nov 23rd, 2009, 04:45 PM
I've got a few lines of code for a menu I'm building, though I need some help with it. How can I change the div's backgroundcolor of the menu item the user moves over? My css isn't very good :S

<div style="width:830px;height:25px;border: 10px solid #fff;margin: 0px auto;background: #F68B1F;">
<div style="float:left;width:100px;height:100%;background: #F17022;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Home</div></div>
<div style="float:left;width:200px;height:100%;background: #F68B1F;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Menuitem1</div></div>
<div style="float:left;width:140px;height:100%;background: #F68B1F;border-right:1px solid #fff;text-align:center;"><div style="margin-top:0px;color: #fff;">Menuitem2</div></div>

Nov 23rd, 2009, 05:32 PM
Hello docock,
Make your buttons a link and then style those links with a hover affect.
Here's an example based on your code, minus the inline styles:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
#container {
height: 400px;
width: 850px;
margin: 30px auto;
background: #fff;
font-size: 0.8em;
#menu {
width: 830px;
height: 25px;
border: 10px solid #fff;
background: #F68B1F;
.button a{
float: left;
width: 100px;
height: 25px;
background: #F17022;
border-right: 1px solid #fff;
text-align: center;
.button a:hover {background: #f00;}
<div id="container">
<div id="menu">
<div class="button"><a href="#">Home</a></div>
<div class="button"><a href="#">Menuitem1</a></div>
<div class="button"><a href="#">Menuitem2</a></div>
<!--end menu--></div>
<!--end container--></div>

I have some menu examples up here (http://nopeople.com/design/CSS%20tips/index.html)that might help you.