A way to change background color of a menu list

gohankid77 · #1 Oct 12th, 2004, 03:13

Hello and thanks for taking the time to even read this.
I am using my own multi-level menu, and I am having trouble getting the background color to show up behind "menu". when I hover over "background".

It seems to display the horizontal rule, <hr />, on top even after the menu opens. I've tried setting a width and z-index for the[*] element, but it doesn't work. Does somebody know how to get it to show up? I've made the html and body white for ease of seeing the problem because I want the background of the menu to show up black since my page background is black (I know it is a bad practice, but my friend loves dark colors).

XHTML-

Code: Select all

<ul id="menulist">[*]
    background >
    <ul id="menu">[*]background-color[*]background-image[*]background-repeat[*]background-attachment[*]background-position[/list]  [/list]<hr />

CSS-

Code: Select all

hr {
width: 600px;
}

ul {
list-style-type: none;
}

ul#menulist {
width: 91px;
height: 1px;
display: block;
}

li>a {
display: block;
padding-right: 2px;
}

ul#menu>li {
display: none;
}

ul:hover>li>ul#menu>li {
display: block;
margin-left: 50px;
margin-top: -21px;
padding-bottom: 15px;
padding-left: 5px;
}

html, body {
background: #fff;
}

Rob · #2 Oct 12th, 2004, 11:14

Monie....

I would think long and hard before doing this because of the lack of browser support.

Use this code:

Code: Select all

<html>
<head>
<style>
hr {
	width: 600px; height:1px;
}

ul {
	list-style-type: none;
}

ul#menulist {
	width: 91px;
	height: 1px;
}

li>a {
	display: block;
	padding-right: 2px;
	white-space: nowrap;
}

ul#menu>li {
	display: none;
}

ul:hover>li>ul#menu>li {
	display: block;
	margin-left: 50px;
	margin-top: -21px;
	padding-bottom: 15px;
	padding-left: 5px;
	white-space: nowrap;
}

a:hover{color:#FF0000;}

html, body {
	background: #fff;
}
</style>
</head>
<body>
<ul id="menulist">[*]background ><ul id="menu">[*]background-color[*]background-image[*]background-repeat[*]background-attachment[*]background-position[/list]<hr />[/list]</body></html>

This should achieve what you want in Opera and Mozilla. You can even get the above to function for IE if you load the IE7 fixes.

It is important not to have any whitespace between li elements.. not even line breaks, so put all the ul and li code on one line.

Hope this helps.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Change Input Textbox Background Color	tejaxx	JavaScript Forum	4	Nov 19th, 2007 21:16
background color in xml	kool77	Other Programming Languages	2	Jul 7th, 2007 16:30
background color	kaz	Web Page Design	4	Aug 4th, 2005 18:28
Anybody know how to change the color of a text input form in	Physt	Web Page Design	7	Aug 16th, 2004 09:44
change links color	jenjen1018	Web Page Design	18	Jan 4th, 2004 21:52

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
A way to change background color of a menu list