Modernvox Posted August 27, 2009 Share Posted August 27, 2009 Just throwing this out there guys (& gals). I would like to add a mouseover nav menu bar on my YARPOOL site using my current layout/style at the top of the page. Looking at the code, it seems overwhelming. If someone has the time..It would be cool if you could direct me in the right direction with this..Is there an easy way to go about it? Oh yeah, should look similar to ebay's :-) Current nav bar /* top menu */ div.pnav3 {top:0; margin:0; padding:0; } div.pnav3 div {margin:0; padding:0; position:relative} div.pnav3 table{ height:35px; background:url(imgs2/headerImage4.gif) no-repeat; } div.pnav3 table td { height:28px; white-space:nowrap; line-height:normal; border-top:0px solid #EEEEF8; padding:0px; margin:0px; } div.pnav3 td a:active, div.pnav3 td a:link, div.pnav3 td a:visited, div.pnav3 td a:hover { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; border-right:1px solid; text-decoration:none; position:relative; line-height:normal} div.pnav3 td.fc a:active, div.pnav3 td.fc a:link, div.pnav3 td.fc a:visited { padding:6px 5px 6px 10px } div.pnav3 td.lc a:active, div.pnav3 td.lc a:link, div.pnav3 td.lc a:visited { border-style:none; padding:6px 10px 6px 5px} div.pnav3 td.lc1 a:active, div.pnav3 td.lc1 a:link, div.pnav3 td.lc1 a:visited, div.pnav3 td.lc1 a { border-style:none; padding:6px 10px 6px 5px } div.pnav3 td.mc a:active, div.pnav3 td.mc a:link, div.pnav3 td.mc a:visited, div.pnav3 td.mc span { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; border-right:0px solid #ccc; text-decoration:none; position:relative; line-height:normal } div.pnav3 td a:hover, div.pnav3 td.lc a:hover {text-decoration:underline} div.pnav2 {top:0; margin:0; padding:0; } div.pnav2 div {margin:0; padding:0; position:relative} div.pnav2 table{ height:33px; background:url(imgs2/headerImage2_1.gif) no-repeat; } div.pnav2 table td { height:28px; white-space:nowrap; line-height:normal; border-top:0px solid #EEEEF8; padding:0px; margin:0px; } div.pnav2 td a:active, div.pnav2 td a:link, div.pnav2 td a:visited, div.pnav2 td a:hover { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; /*background:url(img/mainNavBg3.png) repeat-x bottom left; */ border-right:1px solid; text-decoration:none; position:relative; line-height:normal} div.pnav2 td.fc a:active, div.pnav2 td.fc a:link, div.pnav2 td.fc a:visited { /*background:url(img/mainNavLft3.png) no-repeat bottom left;*/ padding:6px 5px 6px 10px } div.pnav2 td.lc a:active, div.pnav2 td.lc a:link, div.pnav2 td.lc a:visited { /*background:url(img/mainNavRgt3.png) no-repeat bottom right; */ border-style:none; padding:6px 10px 6px 5px} div.pnav2 td.lc1 a:active, div.pnav2 td.lc1 a:link, div.pnav2 td.lc1 a:visited, div.pnav2 td.lc1 a { /*background:url(img/mainNavRgt3.png) no-repeat bottom right; */ border-style:none; padding:6px 10px 6px 5px } div.pnav2 td.mc a:active, div.pnav2 td.mc a:link, div.pnav2 td.mc a:visited, div.pnav2 td.mc span { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; /*background:url(img/mainNavBg3.png) repeat-x bottom left; */ border-right:0px solid #ccc; text-decoration:none; position:relative; line-height:normal } div.pnav2 td a:hover, div.pnav2 td.lc a:hover {text-decoration:underline} /* ----------------------------- */ /* ----------------------------- */ /* top menu */ div.pnav {top:0; margin:0; padding:0; } div.pnav div {margin:0; padding:0; position:relative} div.pnav table td { height:28px; white-space:nowrap; line-height:normal; border-top:0px solid #EEEEF8; padding:0px; margin:0px; } div.pnav td a:active, div.pnav td a:link, div.pnav td a:visited, div.pnav td a:hover { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; background:url(img/mainNavBg3.png) repeat-x bottom left; border-right:1px solid; text-decoration:none; position:relative; line-height:normal} div.pnav td.fc a:active, div.pnav td.fc a:link, div.pnav td.fc a:visited { background:url(img/mainNavLft3.png) no-repeat bottom left; padding:6px 5px 6px 10px } div.pnav td.lc a:active, div.pnav td.lc a:link, div.pnav td.lc a:visited { background:url(img/mainNavRgt3.png) no-repeat bottom right; border-style:none; padding:6px 10px 6px 5px} div.pnav td.lc1 a:active, div.pnav td.lc1 a:link, div.pnav td.lc1 a:visited, div.pnav td.lc1 a { background:url(img/mainNavRgt3.png) no-repeat bottom right; border-style:none; padding:6px 10px 6px 5px } div.pnav td.mc a:active, div.pnav td.mc a:link, div.pnav td.mc a:visited, div.pnav td.mc span { color:#000; font-weight:bold; font-size:15px; white-space:nowrap; padding:6px 5px; display:block; background:url(img/mainNavBg3.png) repeat-x bottom left; border-right:0px solid #ccc; text-decoration:none; position:relative; line-height:normal } div.pnav td a:hover, div.pnav td.lc a:hover {text-decoration:underline} Quote Link to comment Share on other sites More sharing options...
Hybride Posted August 27, 2009 Share Posted August 27, 2009 Please use the {code}{/code} next time for your code... Secondly, mouseover menu bar is about a different a:hover tag. What exactly are you trying to achieve in yours? Quote Link to comment Share on other sites More sharing options...
Modernvox Posted August 28, 2009 Author Share Posted August 28, 2009 Please use the {code}{/code} next time for your code... Secondly, mouseover menu bar is about a different a:hover tag. What exactly are you trying to achieve in yours? Please use the {code}{/code} next time for your code... I am such a noob:-) Gotcha! Want my menu bar to function similar to ebay's Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.