1 Replies - 3121 Views - Last Post: 27 December 2012 - 11:19 AM

#1 TheOne6152  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 11-February 09

double dropdown list and image rollover

Posted 22 December 2012 - 08:56 PM

I am working on a new site and cant figure out how to make a dropdown inside of a dropdown list work. Also if anyone can help me make my dropdowns horizontal, under the menubar itself, it would be greatly appreciated. Is it possible with CSS to make my brush stroke image come in from behind my menu items liek its being brushed on. kinda like a horizontal fade in.

menubar:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FUTSOC</title>
<link href="css/menubar.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>

<body>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><p><img src="images/banner.png" width="1000" height="200" alt="FUTSOC" /></p></td>
  </tr>
</table>
<p>
    <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About US</a>
    <ul>
      <li>Archives
        <ul>
          <li><a href="/about/archives/2004">2004</a></li>
          <li><a href="/about/archives/2005">2005</a></li>
          <li><a href="/about/archives/2006">2006</a></li>
          <li><a href="/about/archives/2007">2007</a></li>
          <li><a href="/about/archives/2008">2008</a></li>
          <li><a href="/about/archives/2009">2009</a></li>
          <li><a href="/about/archives/2010">2010</a></li>
          <li><a href="/about/archives/2011">2011</a></li>
          <li><a href="/about/archives/2012">2012</a></li>
        </ul>
      </li>
      <li>Alumni
        <ul>
          <li><a href="/about/alumni/profiles">Profiles</a></li>
          <li><a href="/about/alumni/wherearetheynow">Where Are They Now?</a></li>
        </ul>
      </li>
      <li><a href="/about/results">Historic Results</a></li>
      <li><a href="/about/affiliates">Affiliates</a></li>
    </ul>
  </li>
  <li>Programs
    <ul>
      <li><a href="/programs/bambinos">Bambinos</a>
        <ul>
          <li><a href="/programs/bambinos/1213">2012-2013</a></li>
        </ul>
      </li>
      <li><a href="/programs/u12-13">U12/13</a>
        <ul>
          <li><a href="/programs/u12-13/1213">2012-2013</a></li>
        </ul>
      </li>
      <li><a href="/programs/u15-16">U15/16</a>
        <ul>
          <li><a href="/programs/u15-16/1213">2012-2013</a></li>
        </ul>
      </li>
      <li><a href="/programs/u18-19">U18/19</a>
        <ul>
          <li><a href="/programs/u18-19/1213">2012-2013</a></li>
        </ul>
      </li>
      <li><a href="/programs/u23">U23</a>
        <ul>
          <li><a href="/programs/u23/1213">2012-2013</a></li>
        </ul>
      </li>
      <li><a href="/programs/csp">Club Standards Project</a></li>
      <li><a href="/programs/enigma">Project Enigma</a></li>
    </ul>
  </li>
  <li>Camps / Clinics
    <ul>
      <li><a href="/camps/spring">Spring</a></li>
      <li><a href="/camps/summer">Summer</a></li>
      <li><a href="/camps/fall">Fall</a></li>
      <li><a href="/camps/winter">Winter</a></li>
    </ul>
  </li>
  <li>Registration
    <ul>
      <li>Programs
        <ul>
          <li><a href="rp/programs/bambinos">Bambinos</a></li>
          <li><a href="rp/programs/u12-13">U12/13</a></li>
          <li><a href="rp/programs/u15-16">U15/16</a></li>
          <li><a href="rp/programs/u18-19">U18/19</a></li>
          <li><a href="rp/programs/u23">U23</a></li>
        </ul>
      </li>
      <li>Camps
        <ul>
          <li><a href="rp/programs/spring">Spring</a></li>
          <li><a href="rp/programs/summer">Summer</a></li>
          <li><a href="rp/programs/fall">Fall</a></li>
          <li><a href="rp/programs/winter">Winter</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Media
    <ul>
      <li><a href="media/pictures">Pictures</a></li>
      <li><a href="media/videos">Videos</a></li>
      <li><a href="media/games">Games</a>  </li>
    </ul>
  </li>
</ul>
</p>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="250"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="13" height="13" background="images/tables/yellow/tly.png"></td>
            <td height="13" background="images/tables/yellow/ty.png"></td>
            <td width="13" height="13" background="images/tables/yellow/try.png"></td>
          </tr>
          <tr>
            <td width="13" background="images/tables/yellow/ly.png"></td>
            <td background="images/tables/yellow/bg.png">&nbsp;</td>
            <td width="13" background="images/tables/yellow/ry.png"></td>
          </tr>
          <tr>
            <td width="13" height="13" background="images/tables/yellow/bly.png"></td>
            <td height="13" background="images/tables/yellow/by.png"></td>
            <td width="13" height="13" background="images/tables/yellow/bry.png"></td>
          </tr>
        </table></td>
        <td width="10">&nbsp;</td>
        <td width="690"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="13" height="13" background="images/tables/red/tlr.png"></td>
            <td height="13" background="images/tables/red/tr.png"></td>
            <td width="13" height="13" background="images/tables/red/trr.png"></td>
          </tr>
          <tr>
            <td width="13" background="images/tables/red/lr.png"></td>
            <td background="images/tables/red/bg.png">&nbsp;</td>
            <td width="13" background="images/tables/red/rr.png"></td>
          </tr>
          <tr>
            <td width="13" height="13" background="images/tables/red/blr.png"></td>
            <td height="13" background="images/tables/red/br.png"></td>
            <td width="13" height="13" background="images/tables/red/brr.png"></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="10"></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="13" height="13" background="images/tables/black/tlb.png"></td>
        <td height="13" background="images/tables/black/tb.png"></td>
        <td width="13" height="13" background="images/tables/black/trb.png"></td>
      </tr>
      <tr>
        <td width="13" background="images/tables/black/lb.png"></td>
        <td background="images/tables/black/bg.png">&nbsp;</td>
        <td width="13" background="images/tables/black/rb.png"></td>
      </tr>
      <tr>
        <td width="13" height="13" background="images/tables/black/blb.png"></td>
        <td height="13" background="images/tables/black/bb.png"></td>
        <td width="13" height="13" background="images/tables/black/brb.png"></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>



CSS:
ul {
	list-style:none;
	width:1000px;
	padding:0;
	margin:20px;
}
ul li {
	display:inline;
}
ul li, ul li a, ul li a:visited {
	text-decoration:none;
	width:160px;
	background:#999;
	color:#000;
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif;
	float:left;
	padding:0;
}
ul li:hover, ul li a:hover {
	background:#000;
	color:#FFF;
}
ul li ul, ul li ul li {
	display:none;
}
ul li:hover ul {
	display:block;
	position:relative;
	background:#000;
	color:#FFF;
}



Is This A Good Question/Topic? 0
  • +

Replies To: double dropdown list and image rollover

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: double dropdown list and image rollover

Posted 27 December 2012 - 11:19 AM

You can do all this with CSS, but it doesn't have the best support in older IE browsers. I suggest using a JS method, here is a very common one.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1