Fri, 2014-03-28 06:58
I want to make the navigation buttons on this website arckandi.org have a dropdown effect and I'm having a little trouble with how I have the style sheet set up. If anyone could help me or offer any tips I would be forever grateful.
Here is my header which includes the navigation bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Arc Kandiyohi County</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/newhead/whitebannerwpics_03.png" alt="Arc of Kandiyohi County" height="135" width="800" /></h1> <div id="nav"> <a href="index.cfm" class="rolloverh" title="Home"></a> <a href="about.cfm" class="rollovera" title="About"></a> <a href="services.cfm" class="rollovers" title="Services"></a> <a href="membership.cfm" class="rolloverm" title="Members"></a> <a href="events.cfm" class="rollovere" title="Events"></a> <a href="volunteer.cfm" class="rolloverv" title="Volunteers"></a> <a href="news.cfm" class="rollovern" title="News"></a> <a href="resources.cfm" class="rolloverr" title="Resourcess"></a> <a href="contact.cfm" class="rollovercu" title="Contact Us"></a> <!--- end nav div ---></div>
and my style sheet:
html, body, ul, li { margin: 0; padding: 0; list-style: none; } h5 { font-size:1.1em; font-weight:bold; } h6 { font-size:1.2em; font-weight:bold; color:#000000; } h7 { font-size:1em; font-weight:bold; letter-spacing:-1px; color:#000000; } img { border: 0; } a { font-weight: bold; font-size:1.1em; text-decoration: none; color: #474747; } a:hover { text-decoration: underline; color:#ec7822; } .more { text-align: right; } .left { float: left; } .clear { clear: both; } body, h1, h2, h3, form { font: 76% "Trebuchet MS"; margin: 0; padding: 0; color: #000000; } body { background: url(images/newhead/header_bgarc_06.png) repeat-x; } #wrapper { text-align: left; margin-left: 15.3%; width: 850px; } #header { height: 203px; width:850px; position: absolute; } #header h1 { margin-top: 2px; } #header h1 img { display: block; } #nav { font-family:"Trebuchet MS"; font-size:1em; font-weight:bold; height:41px; width:850px; margin-top: 1px; margin-left:0px; color:#FFFFFF; } #nav img { float:left; } /* #nav a { color:#FFFFFF; text-decoration:none; } #nav a:hover { float: left; color:#6084c0; background:url(images/nav/new/hover.jpg) repeat-x; font-weight:bold; }*/ #nav a.rolloverh { display: block; width: 95px; height: 41px; text-decoration: none; background-position:-85px; background: url("images/nav/newarc/New/homebtn4a.png"); } #nav a.rolloverh:hover { background-position: -85px 0; background: url("images/nav/newarc/New/homebtn4o.png"); } #nav a.rollovera { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:90px; margin-top:-41px; /*background-position:-170px;*/ background: url("images/nav/newarc/New/aboutbtn.png"); } #nav a.rollovera:hover { margin-left:90px; margin-top:-41px; background: url("images/nav/newarc/New/aboutbtno.png"); } #nav a.rollovers { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:180px; margin-top:-41px; background: url("images/nav/newarc/New/servicesbtn4.png"); } #nav a.rollovers:hover { margin-left:180px; margin-top:-41px; background: url("images/nav/newarc/New/servicesbtn4o.png"); } #nav a.rolloverm { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:270px; margin-top:-41px; background: url("images/nav/newarc/New/membersbtn4.png"); } #nav a.rolloverm:hover { margin-left:270px; margin-top:-41px; background: url("images/nav/newarc/New/membersbtn4o.png"); } #nav a.rollovere { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:360px; margin-top:-41px; background: url("images/nav/newarc/New/eventsbtn4.png"); } #nav a.rollovere:hover { margin-left:360px; margin-top:-41px; background: url("images/nav/newarc/New/eventsbtn4o.png"); } #nav a.rolloverv { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:450px; margin-top:-41px; background: url("images/nav/newarc/New/volunteerbtn4.png"); } #nav a.rolloverv:hover { margin-left:450px; margin-top:-41px; background: url("images/nav/newarc/New/volunteerbtn4o.png"); } #nav a.rollovern { display: block; width: 95px; height: 41px; margin-left:540px; margin-top:-41px; text-decoration: none; background: url("images/nav/newarc/New/newsbtn4.png"); } #nav a.rollovern:hover { margin-left:540px; margin-top:-41px; background: url("images/nav/newarc/New/newsbtn4o.png"); } #nav a.rolloverr { display: block; width: 95px; height: 41px; margin-left:630px; margin-top:-41px; text-decoration: none; background: url("images/nav/newarc/New/resourcesbtn4.png"); } #nav a.rolloverr:hover { margin-left:630px; margin-top:-41px; background: url("images/nav/newarc/New/resourcesbtn4o.png"); } #nav a.rollovercu { display: block; width: 95px; height: 41px; text-decoration: none; margin-left:720px; margin-top:-41px; background: url("images/nav/newarc/New/contactbtn4.png"); } #nav a.rollovercu:hover { margin-left:720px; margin-top:-41px; background: url("images/nav/newarc/New/contactbtn4o.png"); } table { font-family: "Trebuchet MS"; font-size: 1.2em; text-align:left; font-weight:normal; width:800px; } #member table { font-family: "Trebuchet MS"; font-size: 1.1em; text-align:left; } #headline { padding-top: 205px; } #headline h2 { display:block; margin:0 0 16px 0; font-size:1.6em; font-weight:bold; letter-spacing:-.5px; color:#44697d; background-color:inherit; } #headline h4 { font-size:1.2em; font-family: "Trebuchet MS"; font-weight:bold; color:#000000; } #headline h3 { margin:0 0 0px 0; font-size:1.2em; letter-spacing:-1px; font-weight:bold; } #headline p { /*---color:#000000; font-size:1.2em; line-height:2.0em;--*/ margin:0 0 10px 0; font-size:1.4em; padding-left:.5em; } #photo { float: left; width: 306px; } #photo div { border: 1px solid #D8D8D8; padding: 2px; } #photo img { display: block; } #photo2 { float: left; width: 306px; } #photo2 div { border: 1px solid #D8D8D8; padding: 2px; } #photo2 img { display: block; } #photo3 { float: left; width: 75px; } #photo3 div { border: 1px solid #D8D8D8; padding: 2px; } #photo3 img { display: block; } #photo4 { float: center; width: 186px; } #photo4 div { border: 1px solid #D8D8D8; padding: 2px; } #photo4 img { display: block; } #photo5 { float: left; width: 206px; } #photo5 div { border: 1px solid #D8D8D8; padding: 2px; } #photo5 img { display: block; } #content { float: left; width: 800px; clear: right; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-size: 1.1em; font-weight:normal; } #content h2 { font-size:1.6em; letter-spacing:-1px; font-family: "Trebuchet MS"; font-weight:bold; color:#474747; } #content h4 { font-size:1.2em; letter-spacing:.5px; font-family: "Trebuchet MS"; font-weight:bold; color: #ec7822; } #content div { padding: 3px 0; margin: 0; } #content #q { width: 140px; border: 1px solid #859D31; } #content .downcast { border-top: 1px solid #CFD0D0; padding: 3px 4px 4px 4px; margin: 0px 0 0 0; background:url(option1/images/newbg.gif) repeat-x; color: #FFFFFF; font-size: 1em; font-weight: bold; } #content h3 { font-size:1.3em; font-weight: bold; } #content p { /* --- padding-left: 15px; padding-right: 2px; margin: 0.1em 0;--- */ color:#000000; font-weight:normal; font-size:1.1em; line-height:1.5em; } #news { float: left; width: 425px; clear: right; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 50px; } #news h2 { font-size:1.6em; letter-spacing:-1px; font-family: "Trebuchet MS"; font-weight:bold; color:#44697d; } #news h4 { font-size:1.6em; letter-spacing:-1px; font-family: "Trebuchet MS"; font-weight:bold; color:#000000; } #news div { padding: 3px 0; margin: 0; } #news #q { width: 140px; border: 1px solid #859D31; } #news .downcast { border-top: 1px solid #CFD0D0; padding: 3px 4px 4px 4px; margin: 0px 0 0 0; background:url(option1/images/newbg.gif) repeat-x; color: #FFFFFF; font-size: 1em; font-weight: bold; } #news h3 { padding-left: 15px; font-weight: bold; margin: 1em 0 0.4em 0; } #news p { /* --- padding-left: 15px; padding-right: 2px; margin: 0.1em 0;--- */ color:#000000; font-size:1.2em; line-height:1.5em; } #body { padding-top: 2em; color:#000000; } #body-left { /*---float: left; width: 408px; font-size:1.2em; padding:20px 55px; clear:none;---*/ float:left; width:350px; font-size:1.0em; padding: 0px 0px 0px 0px; } #body-left h2 { /*font-size:2em; letter-spacing:-1px; margin-top:15px; margin-bottom:20px; font-weight:normal; color:#539d78;--*/ display:block; margin:0 0 16px 0; font-size:1.6em; font-weight:bold; letter-spacing:-.5px; color:#44697d; background-color:inherit; } #body-left h3 { margin:0 0 0px 0; font-size:1.2em; letter-spacing:-1px; font-weight:bold; } #body-left p { /*---color:#000000; font-size:1.2em; line-height:2.0em;--*/ margin:0 0 10px 0; font-size:1.0em; padding-left:.5em; } .box{ float:left; margin:0 0 0px 0; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 22px; width: 330px; background-image:url("images/nav/newarc/boxtopw.png") center top no-repeat; background-image:url("images/nav/newarc/boxbottomw.png") center bottom no-repeat; color:#000000; line-height:1.5em; font-family: "Trebuchet MS"; font-size: 1.1em; } .memberbox { margin:0 0 20px 0; padding:10px; border:1px solid #000000; background-color:#fafbfc; color:#000000; line-height:1.5em; font-family: "Trebuchet MS"; font-size: 1.2em; width: 40%; } .splitcontentleft{float:left; width:50%;} #body-left ul.plussbullets { margin-top: 5px; margin-left: 10px; padding: 10px; } #body-left ul.plussbullets li { background: left url(images/bullet_plus.gif) no-repeat; margin: 0 5px 12px 0; padding: 0 0 0 20px; } /*--#body h2, #body p { margin: 0.3em 0; }--*/ #body-right { float: left; width: 300px; margin-top:.2em; } #body-right p { margin-right: 2em; font-size:1.2em; } #body-right h2 { font-weight:bold; font-size:1.5em; color: #ec7822; } #body-right ul.plussbullets li { background: left url(images/bullet_plus.gif) no-repeat; margin: 10px 5px 12px 0; padding: 0 0 0 20px; } #body a.green { color: #9AAB68; font-weight: normal; text-decoration: underline; } #gallery img { float: left; } #footer { color: #FFFFFF; background: #3b3d41 url(images/newhead/footer_bgarc_02.png) repeat-x; padding: 6px 0 5px 0; margin-top: 2em; font-weight: bold; } #footer p { margin: 0; padding: 0; } #footer a:hover { text-decoration:none; } #content h6 { font-size:1.2em; letter-spacing:-1px; font-family: "Trebuchet MS"; font-weight:bold; color:#ec7822; } hr { color: #000; background-color: #000; height: 2px; } #body2 { width:678px; } div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } #body-right h3 { font-size:1.3em; font-weight: bold; } ul.a {list-style-type: circle;} #scripheader { font-size:1.8em; color:#000000; font-weight:bold; } #scripheader2 { font-size:1.2em; color:#000000; font-weight:bold; font-style:italic; text-decoration:underline; } #scrip { font-size:1.3em; font-weight:bold; } #scripheader3 { font-size:1.6em; font-weight:bold; } #scripfooter { font-size:1.6em; font-weight:bold; color:#ec7822; } #content img { margin-right:10px; padding-right:10px; } #importance { color:#6084c0; font-size:1em; font-weight:bold; text-align: left; } #import table { font-size:1em; font-weight:normal; text-align:left; } ul.a {list-style-type: circle;} li.a {list-style-type: circle;}
Notice how each button has it's own background image, so I'm just having trouble figuring out how to add the dropdown feature do this. Thank you in advance! I am open to any suggestions/ideas.