<script language="JavaScript" type="text/javascript">
function zoomin(){
if(parent.parent.document.body.style.zoom!=0)
parent.parent.document.body.style.zoom*=1.2;
else
parent.parent.document.body.style.zoom=1.2;
}
function zoomout(){
if(parent.parent.document.body.style.zoom!=0)
parent.parent.document.body.style.zoom*=0.833;
else
parent.parent.document.body.style.zoom=0.833;
}
</script>
Instead of creating a new topic, I am trying to implement and drop down menu, but me being stupid and deciding to want to do this at the end is there a simple way of implementing one without re modifying the entire css?
I’m just looking for a drop down to appear when you either hover or click on the main link. Preferebly using CSS but if jQuery is needed then that is fine.
.nav{
width:100%;
background:url(images/nav_bg.jpg) repeat-x;
height:42px;
clear:both;
}
.nav ul {
margin: 0 auto;
width: auto;
padding-left:15px;
list-style: none;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
margin-right: 20px;
padding-left:20px;
padding-right:20px;
color:#FFF;
width: auto;
font-size: 13px;
font-weight:bolder;
text-align: center;
text-decoration: none;
line-height:42px;
}
.nav ul li a:hover {
display: block;
margin-right: 20px;
padding-left:20px;
padding-right:20px;
color:#FFF;
width: auto;
font-size: 13px;
font-weight:bolder;
text-align: center;
text-decoration: none;
line-height:42px;
background:url(images/nav_hover.jpg);
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
}
#nav li {
float: left;
margin-left:10px;
}
#nav li ul {
position: absolute;
width:200px;
left: -999em;
background:#695e62;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
All looks fine until you hover over a link in the sub menu, it is picking up the class nav that I have used for my main nav and picking up its hover attributes. I basically want it to be a grey back background with my img at 200px.
Valid code is the sub list goes before the list item prior to the ends. Look at the blocks closely. Make the code valid, it becomes accessible. Also that is why I pointed him to YUI vs suckerfish. Suckerfish is good, and accessible. YUI is good, accessible, and keyboard navigatable…
What “also that is why you pointed”? How “make the code valid”? I thought you said is nothing about “accessible”, but “valid”. Now, suddenly, “valid” means “accessible”? Aside from your inclination towards using frameworks, your points are all… blurry.
You forget that you could make a less accessible drop down menu by choosing not to nest the second <ul> in a <li> from the first <ul>. You could just make a separate second <ul>, as a sibling element to the first <ul>, have a valid code all along, and use a slightly changed CSS to make the drop down. Like in the blue highlighted code I provided. You missed this point.
Using the second <ul> in a <li> means a DRILL DOWN menu. You missed this point also. You only provided an invalid code, where you put the second <ul> as a direct descendant for the first <ul>, which is a stupid and wrong thing to do, and than start mumbling about YUI. Did you even look at the requirements for a YUI drill down menu? Only if you use their framework extensively will a YUI menu ever become something to begin considering to use.
Make up your mind, please! And acknowledge that I provided VALID CODE ALL ALONG!