how to set background for a <li>

**jsfreak** · 10-01-2008 06:50 AM

Hi guys, i'm trying to create a navigation bar for my new site which change the color status when its hovered, but the way i'm using it only changes the <a> background color, i'd like to change the whole background color for the whole <li> tag, which is a common effect nowadays......any advice?

//code

<html>
<head>
<script type="text/javascript">
</script>

<style type="text/css">
body{background-color: #cccc77; margin: 0; padding: 0;}
#container{border: 2px solid gold; width: 400px; height: 350px; margin: 20px auto;}
#menu{height: 30px; width: 398px; border: 1px solid #6666cc; margin: 0px auto;}
#menu ul{margin: 0; padding: 0;}
#menu li{list-style-type: none; margin-left: 50px; display: inline;}
#menu a{text-decoration: none; color: #5555cc; font-family: verdana;}
#menu a:hover{text-decoration: none; background-color: red; color: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Viaggi</a></li>
<li><a href="#">Destinations</a></li>
</ul>
</div>
</div>
</body>
</html>

**Fang** · 10-01-2008 09:01 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
</script>

<style type="text/css">
body{background-color: #cccc77; margin: 0; padding: 0;}
#container{border: 2px solid gold; width: 399px; height: 350px; margin: 20px auto;}
#menu{height: 30px; width: 396px; border: 1px solid #6666cc; margin: 0px;}
#menu ul {margin: 0; padding: 0;}
#menu li{list-style-type: none; float:left;}
#menu a{display:block;width:132px;line-height:30px;text-align:center;text-decoration: none; color: #5555cc; font-family: verdana;}
#menu a:hover{text-decoration: none; background-color: red; color: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Viaggi</a></li>
<li><a href="#">Destinations</a></li>
</ul>
</div>
</div>
</body>
</html>

**kickasschick** · 10-01-2008 09:28 AM

li a:hover {
background-color: red;
}

The above rule would only apply to links in lists.
http://css.maxdesign.com.au/listamat...rizontal04.htm

Thread: how to set background for a <li>

Thread Tools

Display

how to set background for a <li>

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions