Hi I am using a drop down menu adapted from the one in Stylin with CSS
by Charles Wyke Smith.
The CSS is below.
It works perfectly in Internet Explorer (using the csshover behaviour
file) but in Firefox (and presumably other standards compliant
browsers) it indents the menu on the screen then indents the drop down
box by (seemingly) the same amount. So, there is a gap between the edge
of the screen and the first item in the menu and then the drop down
items are not lined up with their parent main menu item.
If you want to have a look - please visit my website
http://www.my-rss.co.uk/ but you will need to create a temporary
account and then an rss feed to see the menu - which might be too much
bother. Hope the snippet below is enough info.
Can anyone help? It is driving me to distraction.
The menu itself is a hierarchical (to two levels) unordered list in a
div with an id of menuitems.
Thanks.
-------------------------------------------------------------------------------------------
#menuitems
{
width:100%;
padding:0px;
margin:0px;
text-align:left;
float:left;
border-bottom: 1px solid #F6A77C;
font-size:11px;
background-color: #ffdeb7;
z-index:100;
}
div#menuitems ul {
margin:0 0 0 0px;
}
div#menuitems li {
z-index:50;
float:left;
position:relative;
list-style-type:none;
background-color:#ffdeb7;
border-left:1px solid #F6A77C;
padding:3px;
}
div#menuitems li:first-child {
border-left:1px solid #F6A77C;
}
div#menuitems li:hover {
background-color:#ffffff;
}
div#menuitems a {
display: block;
padding: 0px 6px;
text-decoration:none;
color:#000000;
}
div#menuitems a:hover
{
color:#ff0000;
}
div#menuitems ul li ul {
margin:0;
position:absolute;
width:20em;
left:-1px;
top:20px;
}
div#menuitems ul li ul li {
width:100%;
border-left:1px solid #F6A77C;
border-bottom:1px solid #F6A77C;
border-right:1px solid #F6A77C;
padding:3px;
}
div#menuitems ul li ul li:first-child {
border-top:1px solid #F6A77C;
}
div#menuitems ul li ul {display:none;}
div#menuitems ul li:hover ul {display:block; }
