Tue, 2007-07-17 02:01
Hi,
I'm trying to make a css-style drop down horizontal menu. I got one working that is pretty good, but now I want to spice it up by putting a jpg on both sides (to the left and to the right) of the menu. These jpg's just make the menu look better than a horizontal bar. The problem is, when I put the left picture, then the div for the menu, then the right picture, the pictures appear on their own line. Or if I manage to get it looking right in one browser, it doesn't look right in Firefox. Is there a simple way to do this?? Basically, how would YOU do this?
Thanks
Tue, 2007-07-17 03:03
#1
Wumbate wrote:Basically, how
Wumbate wrote:
Basically, how would YOU do this?
By getting a look at your code first and then making suggestions.
Tue, 2007-07-17 03:45
#2
OK - sorry, here is the
OK - sorry, here is the css:
body {
text-align: center;
background-color: #F0F0F0;
}
.container {
margin-left: 25%;
margin-right: 25%;
margin-center: 50%;
}
#menu {
height: 18px;
background: #000000;
margin-left: auto;
margin-right: auto;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 6em;
float: left;
}
#menu h2 {
font: bold 12px/16px helvetica, arial, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-left-style: solid;
border-right-style: solid;
border-top-style: none;
border-bottom-style: solid;
border-color: #000000;
margin: 0;
}
#menu h2 {
color: #F00000;
background: #000000;
text-transform: uppercase;
}
#menu a {
color: #F00000;
text-decoration: none;
}
#menu li a {
color: #F00000;
background: #F0F0F0;
text-decoration: none;
font: bold 12px/16px helvetica, arial, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-left-style: solid;
border-right-style: solid;
border-top-style: none;
border-bottom-style: solid;
border-color: #000000;
margin: 0;
}
#menu a:hover {
color: #0000F0;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 100;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
.floatRight {
float: right;
}
.floatLeft {
float: left;
}
and here is the html:
Tue, 2007-07-17 04:04
#3
You don't need separate
You don't need separate <ul>s for every top level menu item - they should all be part of one single list. Then add your images as background-images to a) the container holding the <ul> and b) the <ul> itself.