PDA

View Full Version : drop down menu and bg image for each <li>



mikacruz
Mar 13th, 2009, 11:17 PM
Hello,

I am still working on implementing the "son of suckerfish" drop down.
And I'm not sure Im going the right way about applying to each of the primary <li> a different style (color and background image on hover).
Basically I was thinking of applying a class to each of <li> such as

#nav .home a:hover {color:#00FF00; background-image:url("/images/hover_test.gif");} line 180

and

<ul id="nav">
<li class="home"><a href="#">Programming</a>
<ul>
<li><a href="#">Structured</a>
<ul>
<li><a href="#">PL/1</a></li>
<li><a href="#">Pascal</a></li>
<li><a href="#">C</a></li>
</ul>
</ul> line 38,

and then set the further <li> in the drop down to bg image: none, but that doesnt work. Hence my problem is that I dont know how to apply bg image of class "home" to the first family of <li> (the horizontal menu)


If someone has a quick clue about whats best to do, please help. thx a lot

Here is the html link. (http://europeoples.eu/index_t.html)
and CSS link (http://europeoples.eu/style.css)

Majoracle
Mar 14th, 2009, 12:03 AM
I'd just use an ID, basically the same why you wanna use class. You can clear the backgrounds from the drop downs with a single line. Something like:


<ul id="nav">
<li id="home"><a href="#">Programming</a>
<ul>
<li><a href="#">Structured</a>
<ul>
<li><a href="#">PL/1</a></li>
<li><a href="#">Pascal</a></li>
<li><a href="#">C</a></li>
</ul>
</ul>
<li id="about"><a href="#">About</a>
<ul>
<li><a href="#">Structured</a>
<ul>
<li><a href="#">PL/1</a></li>
<li><a href="#">Pascal</a></li>
<li><a href="#">C</a></li>
</ul>
</ul>
</ul>


#nav li#home a:hover {color:#00FF00; background-image:url("/images/hover_test.gif");}
#nav li#about a:hover {color:#00FF00; background-image:url("/images/hover_test.gif");}

/* remove backgrounds from drop downs */
#nav li li a:hover {background-image:none;}

mikacruz
Mar 14th, 2009, 12:16 AM
that does the same as the class... the bg:none applied to the sublist doesnt work. There must be a better way to do this...
?

rustang289
Mar 14th, 2009, 10:02 AM
you can fine tune this code to include your images or you can just look at it to get an idea


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Programing StructuredPL/1PascalC</title>

<style type="text/css" media="screen">
body{
behavior:url("csshover2.htc");
}
.pd_menu_01 {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: #0000A0;
width:150px;
border:solid 1px #004080;
clear:both;
} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {
list-style-type:none;
padding:0; margin:0;
}
.pd_menu_01 ul li {
float:left;
position:relative;
z-index:auto !important ;
z-index:1000 ;
border-right:solid 1px #004080;
border-left:solid 1px #004080;}

.pd_menu_01 ul li a {
color: #FFFFFF;
background: #0000A0;
float:none !important ;
float:left ; display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}

.pd_menu_01 ul li ul {

display:none;
border:none;
color: #FFFFFF;
background: #0000A0;
width:1px
}
.pd_menu_01 ul li:hover a {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.pd_menu_01 ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #004080;
border-bottom: solid 1px #004080;
background-color:#0000FF;
color:#FFFFFF;
} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;color:#FFFF00;
} /*Color subcells hovering mode*/

.pd_menu_01 ul li a:hover {
background-color:#008000;
text-decoration:none;
color:#FFFF00;
}/*Color main cells hovering mode*/

.pd_menu_01 ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.pd_menu_01 ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF;
}/*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #004080;
border-bottom: solid 1px #004080;
background-color:#0000FF;
color:#FFFFFF;
}
.pd_menu_01 ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00;
} /*Color subcells hovering mode*/
</style>

</head>

<body>
<div class="pd_menu_01 ">
<ul><li><a href="/">Programing</a>
<ul>
<li><a href="#" >Structured</a></li>
<li><a href="#" >PL/1</a></li>
<li><a href="#" >Pascal</a></li>
<li><a href="#" >C</a></li>
</ul>
</li></ul>

</div>

</body>

</html>

mikacruz
Mar 14th, 2009, 12:53 PM
so you suggest putting it each parent and its respective familly into a div.. I think i tried that but trying now again, cheers...

mikacruz
Mar 14th, 2009, 03:00 PM
keepin the script I was using before, this seems to work now (and sorry for duplicating thread, didnt manage to remove one):

css:

#nav li.home a:hover {color:#00FF00; background-image:url("/images/hover_test.gif");}
#nav li.home ul a:hover {background: none;}

html:

<ul id="nav">
<li class="home"><a href="#">Programming</a>
<ul>
<li><a href="#">Structured</a>
<ul>
<li><a href="#">PL/1</a></li>
<li><a href="#">Pascal</a></li>
<li><a href="#">C</a></li>

</ul>
</li>
<li><a href="#">Object Oriented</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">SmallTalk</a></li>

</ul>
</li>
<li>Rules Based
<ul>
<li><a href="#">Filetab</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Markup</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">XHTML</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">EDI</a></li>
</ul>

</li>
</ul>