The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> :hover drop down not working
awesome
post Feb 18 2010, 06:45 AM
Post #1





Group: Members
Posts: 1
Joined: 18-February 10
Member No.: 11,127
I'm can't get my navigation bar to work on drop down menus!

It works fine in ie8 but not firefox.
I don't want "a" to be a link so i've used a <span> tag with the :hover.

WHAT AM I DOING WRONG? wacko.gif sad.gif blink.gif


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>.: SITE :.</title>

<style type="text/css">



body
{
font-family:sans-serif;
background-color:#ffffff;
}

#navigation{
width:100%;
height:40px;
background: url(bg1.png) repeat-x;
position: fixed
}

#navigation li ul
{
margin:0px;
padding:1px;
display:none;
position:absolute;
left:0px;
top:20px;
background: url(bg2.png) repeat-y;
}


#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}



#navigation ul
{margin:0px; padding:0px;}


#navigation li a
{color:#fffff0; text-decoration:none;font-family:Monospace;}

#navigation li a:hover
{color:yellow; text-decoration:none;font-size:15.3pt;font-family:Sans-serif;}

#navigation li:hover ul
{
display:block;
width:180px;
}

#navigation li li
{
list-style:none;
display:list-item;
}


#navigation li span:hover {color:yellow; text-decoration:none;font-size:15.3pt;font-family:Sans-serif;}
#navigation li span
{color:#fffff0; text-decoration:none;font-family:Monospace;}
</style>

</head>

<body>


<div id="navigation">
<ul>
<li>
<a href="#">Home »</a>

</li>
<li style="color:#ffffff;font-size:15.3pt;">|</li>
<li>
<span>A »</span></li>
<ul>
<li>
<a href="aa.html">Aa »</a></li>

<li>
<a href="ab.html">Ab »</a></li>

</ul>

<li style="color:#ffffff;font-size:15.3pt;">|</li>
<li>
<a href="b.html">B »</a>

</li>
<li style="color:#ffffff;font-size:15.3pt;">|</li>
<li>
<span>C »</span></li>
<ul>
<li>
<a href="ca.html">Ca »</a></li>
<li>
<a href="cb.html">Cb »</a></li>
</ul>
</li>
<li style="color:#ffffff;font-size:15.3pt;">|</li>
</ul>
</div>

</body>




</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 18 2010, 12:25 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I recommend that you start by fixing the markup errors reported by our online validator. See the links at the top and bottom of this page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 18 2010, 01:06 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
And then have a look here: http://www.cssplay.co.uk/menus/.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 01:09 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC