Hi,
I have written css for html menus.the html with css is here
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<!—//—><![CDATA[/><!—
sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=” over”;
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(” over\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
//—><!]]>
<style type=“text/css”>
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
color:black;
}
ul li
{
position: relative;
float: left;
width:auto;
white-space:nowrap;
padding-right:1px;
padding-top:1px;
}
ul ul ul
{
left:123px;
border: 1px solid #cccccc;
display:block;
background-color: #F1F1F1;
}
ul li:first-child {
list-style-type:none; text-align:left; width:179px; margin-left:1px; padding-left:0px; border-left:0px;
}
ul li li:first-child {
list-style-type:none; text-align:left; width:auto; margin-left:1px; padding-left:0px;
}
ul li li:{
list-style-type:none; text-align:left; width:auto; margin-left:1px; padding-left:0px;
}
li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top: auto;
display: none;
color:black;
width:auto;
}
li ul ul{
position: absolute;
left:100%; /* Set 1px less than menu width */
top:2px;
display: none;
color:black;
width:auto;
}
ul li a {
display: block;
text-decoration: none;
color:black;
background: #f1f1f1; /* IE6 Bug */
padding-left:8px;
padding-bottom:2px;
padding-top:2px;
padding-right:8px;
border: 1px solid #f1f1f1;
height:auto;
width:auto;
min-width:100px;
max-width:400px;
}
ul li a:hover
{
border:solid 1px #999999;
background-color:#cccccc;
width:auto;
min-width:100px;
max-width:400px;
}
ul li li a:hover
{
border:solid 1px #999999;
background-color:#cccccc;
width:auto;
min-width:100px;
max-width:400px;
}
li ul li a
{
padding-left: 8px;
margin-bottom:1px;
margin-top:1px;
margin-left:1px;
margin-right:1px;
min-width:100px;
max-width:400px;
}
ul li:hover ul ul
{
visibility:hidden;
}
ul li li:hover ul
{
visibility:visible;
}
ul li:hover ul,ul li li:hover ul,ul li li li:hover ul
{
display: block;
background-color: #F1F1F1;
border:solid 1px #999999;
width:auto;
min-width:100px;
max-width:400px;
}
</style>
</head>
<body>
<div style=“width:1257px;background-color:red”>
<ul>
<li>genericHome
</li>
<li>genericHome2
<ul>
<li>subitema
<ul>
<li>test 1ererererewrewrewrewr</li>
<li>test 2sdfsdfsdf</li>
<li>test 3df</li></ul>
</li>
<li>subitemb<ul>
<li>test 4sdfsdfdf</li>
<li>test 5sddsdfsdfsdfsdf</li>
</ul>
</li>
</ul>
</li>
<li>genericHome3
<ul>
<li>aubitema1</li>
</ul>
</li>
</ul>
</body>
</div>
</html>
this is working fine,but when i add some text to sub menu items like i shown here for subitem1,the background effect of hovering is differing.Actually it should be till end like for other items.
i tried working with min-width and max-width css properties but it remained as it is…plzz some one help me.
thanks.
