|
CSS - Dropdown Menu Not Displaying In Ie6!
Hey there!
Similar TutorialsHi all, This is the xHTML link This is the CSS file. Please open this in Internet Explorer. Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list. I've spent a whole week trying to fix this but wasn't successful This works perfectly in Firefox though. Thanks!! Hi all, I have a dropdown menu that appears onmouseover and goes away onmouseout. The code works as it is posted here, works. What I was trying to do, was to move the style tag in the div with the id 'p_default_1', into a class in the CSS file. But when I remove the style tag from the div, and add the class (class="menu1"), the dropdown menu no longer gets displayed when i roll over it. note to mods: sorry if this is in the wrong forum, I just don't know what the problem is with. html Code: Original - html Code <td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);" OnMouseOut="hide_sub('p_default_1', this, 0);"> <a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br> <a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br> <div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" > <table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0"> <tr> <td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);"> <div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; "> <a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td> </tr> <tr> <td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td> </tr> </tbody></table></div></td>
<td bgcolor=white valign="top" class="menu" OnMouseOver="show_sub('p_default_1', this, 0);"
OnMouseOut="hide_sub('p_default_1', this, 0);">
<a href="http://www.site.com/products.html"><img src="images/pri-button-products.gif" height=66 border=0></a><br>
<a href="http://www.site.com/products.html"><img src="images/pri-ub-products.gif" height=65 border=0></a><br>
<div bgcolor="#FFFFFF" align=left id="p_default_1" style="margin-left:0px;margin-top:0px;position:absolute;z-index:2; display:none;" width="175" >
<table id="p_default_parents_1" class="white_table" width="175" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" nowrap style="border-bottom:solid 1px #C6C6C6;border-left:solid 1px #C6C6C6;border-top:solid 1px #C6C6C6;border-right:solid 1px #C6C6C6;padding-left:5px;padding-right:5px;padding-bottom:2px;padding-top:2px;" OnMouseOver="show_sub('p_default_9', this, 0);" OnMouseOut="hide_sub('p_default_9', this, 0);">
<div style="padding-top:4px; padding-bottom:4px; padding-left:4px; padding-right:4px; ">
<a href="http://www.site1.com" class="sub_menu">Option 1</a><BR></div>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="" onMouseOut="" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site2.com" class="sub_menu">Option 2</a><br></div> </td>
</tr>
<tr>
<td style="border: 1px solid rgb(198, 198, 198); padding: 2px 5px;" onMouseOver="show_sub('p_default_13', this, 0);" onMouseOut="hide_sub('p_default_13', this, 0);" nowrap="nowrap" width="100%"><div style="padding: 4px;"><a href="http://www.site3.com/" class="sub_menu">Option 3</a><br></div> </td>
</tr>
</tbody></table></div></td>
javascript Code: Original - javascript Code function hide_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = 'none'; } } function show_sub(name, cell, i) { var b = document.getElementById(name); if (b != null) { b.style.display = ''; } }
function hide_sub(name, cell, i) {
css Code: Original - css Code .menu1{ margin-left:0px; margin-top:0px; position:absolute; z-index:2; display:none; }
.menu1{
I'm using the suggestions of those on here and using the http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..??? Link: http://cemtec.quicksites.co.za CSS: http://cemtec.quicksites.co.za/wp-c...grass/style.css Hi This dropdown menu on Products works in Firefox but when I goto IE7 I dont see anything at all. I have tried changing the div Class to a Div Id also without any change. Anybody have any clues to what I have todo? L. I'm looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up Thank you Smackadoo Hi all -- I've used plenty of CSS in the past, but I'm currently working on a dropdown menu that is more challenging than I had anticipated. A few things I need to fix that I just cannot figure out: 1) The last <li> in the dropdown seems to be overlapping my border 2) I want to put at least 10px of padding on the left hand side of the dropdown menu 3) I need to turn the carrot in front of each menu item to #ff9900 4) Whenever I try to increase or decrease the space between menu items, it seems as though white lines appear between my menu items. In the interest of full disclosure, I found this CSS out somewhere on the web, and I've been trying to customize it since I didn't feel I had the knowledge to build it from scratch. Normally, I'd prefer to create something on my own, but limited time and knowledge prevented me from doing so this time around. Attached below are my HTML and CSS code. I tried to post a link, but the forum will not allow me. If you can offer any assistance, I would greatly appreciate it. Thanks in advance for your time! HTML CODE: Code: <!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>Flyouts Page</title>
<link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
<body>
<TABLE cellSpacing=0 cellPadding=0 width=610 border=0>
<TBODY>
<TR>
<TD width="200" valign="top">
<div id="outside">
<ul id="navigation-1">
<li><IMG src="test_graphic.jpg" border=0></A>
<ul class="navigation-2">
<li><a href="" title="Test 1" target="_self" ><strong>> Test 1</strong></a></li>
<li><a href="" title="Test 2" target="_self" ><strong>> Test 2</strong></a></li>
<li><a href="" title="Test 3" target="_self" ><strong>> Test 3</strong></a></li>
<li><a href="" title="Test 4" target="_self" ><strong>> Test 4</strong></a></li>
<li><a href="" title="Test 5" target="_self" ><strong>> Test 5</strong></a></li>
<li><a href="" title="Test 6" target="_self" ><strong>> Test 6</strong></a></li>
<li><a href="" title="Test 7" target="_self" ><strong>> Test 7</strong></a></li>
</ul>
</li>
</ul>
</div></TD>
</TR>
</TBODY></TABLE>
</body>
</html>
CSS CODE: Code: #outside{
border:0px solid #000000;
background:#ffffff;
}
#navigation-1 {
padding:0px 0;
margin:0px;
list-style:none;
width:200px;
height:107px;
border-top:0px solid #000000;
border-bottom:0px solid #000000;
font:normal 8pt Verdana, Arial, Helvetica;
background:#ffffff;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:200px;
background:#ffffff;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ebf7f3;
color:#000000;
width:195px;
background:#ffffff;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:4px 0;
display:block;
text-align:left;
text-decoration:none;
background:#ffffff;
color:#000000;
width:195px;
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:0px 0px 0;
list-style:none;
display:none;
background:#ebf7f3;
width:195px;
position:absolute;
top:110px;
left:0px;
border: 1px solid #cbccce;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
width:198px;
}
/*the individual menu items*/
#navigation-1 li ul.navigation-2 li {
width:170px;
height:18px;
clear:left;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#ebf7f3;
padding:4px 0px -4px 5px;
width:170px;
border:none;
position:relative;
z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#ebf7f3;
padding: 4px 0px 0-4px 5px;
width:170px;
position:relative;
z-index:1000;
color:#cbccce;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:10pt;
color:#000000;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:190px;
font-size:10pt;
color:#cbccce;
}
.carrot{
color:#ff9900;
}
Hey all, having a bit of trouble getting my drop down menu to display properly. It's modeled after the suckerfish menu, only modded a bit. Here's the site...hover over 'machines' to see what i'm talking about (have to use FF, i haven't added the JS for IE yet). The drop down is adopting the rollovers from the mainmenu, and I don't know what to change to make 'em different. Here's the CSS for the menu: Code:
#mainmenu {
width:780px;
height:41px;
margin:auto;
position:relative;
}
#mainmenu li.navigation {
width:78px;
height:41px;
float:left;
text-align:center;
background:#B8A488 url(images/mainmenu_roll.gif) no-repeat;
}
#mainmenu li.navigation a{
background:#66563D url(images/mainmenu_off.gif) no-repeat;
display:block;
text-decoration:none;
color:#F4F1E5;
height:31px;
padding-top:10px;
}
#mainmenu li.navigation a:hover {
background:transparent;
color:#66563D;
}
#mainmenu li#home {
background-image:url(images/home_roll.gif);
}
#mainmenu li#home a{
background-image:url(images/home_off.gif);
}
#mainmenu li#home a:hover {
background:transparent;
}
#mainmenu li#contact {
background-image:url(images/contact_roll.gif);
}
#mainmenu li#contact a {
background-image:url(images/mainmenu_off.gif);
}
#mainmenu li#contact a:hover {
background:transparent;
}
/* BEGIN DROP DOWN MENU */
li ul {
display: none;
position: absolute;
top: 1px;
margin-left:-2px;
background-color:#B8A488;
border-left:1px solid #66563D;
border-bottom:1px solid #66563D;
padding:2px;
z-index:500;
}
* html li ul {
top:26px;
}
/*
li ul li {
padding:0;
}
*/
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{
display: block;
}
Thanks! I have been hunting around for an all CSS drop down menu that when you hover on the heading the menu expands down to show the heading 1 menu and if you hovered over the next menu item this expands to show that menu list instead a bit like the 'be the first to apply' on the right of this page, http://www.fish4.co.uk/iad/jobs search for say 'admin' just to get to the results page as this is where the menu is. the look is not important but the function is BUT.... i wanted to have many links in the drop down not just the one as in this example. this is the extracted code i have got so far that does what you see on this page. Code:
<style>
#rightcolumn {
float: right;
width: 170px;
text-align: center;
}
#leftcolumn {
float: left;
width: 545px;
padding: 10px;
}
h3#bftahead {
text-align:left;
color:#c1001f;
font-size:1.5em;
font-weight:bold;
margin:23px 0px 10px 0px;
}
#bfta h4 {
font-size:1.1em;
margin:0em;
padding:0.4em 0.1em 0.6em 0.1em
}
#bfta {
width:170px;
text-align:left;
padding:0px;
margin:0px 0px 10px 0px;
list-style-type:none;
height:47em;
overflow:hidden;
background:#ffffff url('images/bfta-background.jpg') bottom no-repeat;
border-bottom:1px solid #cfcfcf;
}
#bfta li {float:left;width:100%;}
#bfta li a {
padding:0.5em 3%;
display:block;
width:94%;
height:1.95em;
margin-bottom:-0.4em;
overflow:hidden;
text-decoration:none;
background:transparent url('images/bfta-background.png') no-repeat;
color:#333333;
font-family:arial, sans-serif;
}
#bfta li a#last, #bfta li a:hover {height:24em;}
#bfta-whitebrand {list-style:none;margin:0em 0em 1em 1em;padding:0px;}
#bfta-whitebrand li {padding:0em 0.4em;}
</style>
<div id="leftcolumn">
<ul id="bfta">
<li>
<h4>a1</h4>
a1
</li>
<li><a href="a2">
<h4>a2</h4>
a2</a>
</li>
<li><a href="a3">
<h4>a4</h4>
a3</a>
</li>
</ul>
</div>
Hi, on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0 Does anyone know how I can make it appear right under the porfolio link every time? Thanks, Matt First I am using Dreamweaver MX2004. I am still new to CSS, have not used it much. Still using tables (yeah i know) for the layout. Mainly because when I've tried positioning in the past, IE doesn't display it right. Layers don't seem to work for me! What I'd like to know is: can I use CSS (the son of suckerfish dropdowns) for my drop down menu in a separate HTML file that would be saved as a library item? I'd like the nav separate so I can update it easily. Should I also use a separate CSS file that would only be associated with the nav? Is necessary to have an external css sheet, if it only applys to this nav? The nav would get dropped into a table row under the top banner. My issue is: will it get positioned right ? And will it view ok in IE??? Hope I explained this right. I fear that what I have already coded, would get messed up if I do this! But due to search engine optimization, I'd like to avoid a fully functioning javascript dropdown. If you have a better suggestion/usage for a dropdown horizontal nav, I'd appreciate your ideas! Thanks for the advice! Valerie My second level menu items are not showing in IE, but show fine in firefox. Code: #menucontainer {
width: 100%;
clear: both;
position: relative;
text-align: center;
margin: 0 auto;
padding-left:0px;
padding-top:35px;
padding-bottom:15px; }
#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}
#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}
#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}
#menu a:hover {
color: #fff;
background: #000000;
}
/* ********* secondary links ************** */
#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}
#menu li li a:hover {
color: #FFF;
background: #292A2C;
}
#menu li:hover { z-index:1;}
#menu li {position: relative}
#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
</style>
<![endif]-->
i'm having a problem with a couple attributes for my CSS dropdowns. view the page here (both CSS and XHTML are on the same page) specifically my .hoverBase:hover .hoverLaunch {} class which reads as such: Code: .hoverBase:hover .hoverLaunch {
display:block;
position:absolute;
top:15px;
left:-3px;
width:70px;
border:3px solid #000000;
text-align: center;
z-index: 30;
}
the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated. Thanks in advance. Need some help with some dropdown menus. I have been reading many of the tutorials on other sites. I have come up with this code for my drop down menus: Code:
.dropmenu {
position: absolute;
left: -1500px;
visibility: visible;
z-index: 101;
float: left;
width: 122px;
border-width: 1px;
border-style: solid;
border-color: #BFBFBF;
background-color: #FFFFFF;
}
.dropmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropmenu li {
display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
display: block;
width: 120px;
padding: 2px;
margin: 1px;
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #000000;
background-color: #D4D4D4;
}
.dropmenu a:hover {
padding: 2px;
margin: 1px;
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-align: center;
text-decoration: none;
color: #000000;
background-color: #BFBFBF;
}
but no matter how much I adjust settings that I know, I cannot get the dropdowns to show up below my original buttons, they always show up to the right hand side. Can someone here please point me in the right direction... Hi I am trying to create a drop down menu on my existing design. Code: http://dfinnema.com/help How would I add a drop down to Page 3 menu that looks like this: Code: http://dfinnema.com/help/images/dropdown_active.png Without the menu: Code: http://dfinnema.com/help/images/dropdown.png Any Ideas / Suggestions? :| Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds. but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories. 2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top. can someone help me plz? here my code Code: #suckerfishnav,
#suckerfishnav ul {
float: left;
height: 2.98em;
width: 960px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
margin: 0.1em 0.1em 0.1em 0.1em;
padding: 0;
}
#suckerfishnav a {
display: block;
color: #7c6240;
text-decoration: none;
padding-top: 0.25em;
padding-right: 0.7em;
padding-bottom: 0.1em;
padding-left: 0.2em;
}
#suckerfishnav li {
float: left;
padding: 0;
width: 13em;
height: 2.8em;
}
#suckerfishnav ul {
position: absolute;
left: -999em;
height: auto;
margin-left: 2em;
line-height: 1;
z-index: 500;
}
#suckerfishnav li li {
width: 9.6em;
border: solid #eda;
border-width: 1px;
padding-top;
10px;
}
#suckerfishnav li ul a {
width: 9.8em;
}
#suckerfishnav li ul ul {
margin: -0.20em 0 0 9.8em;
}
#suckerfishnav li ul {
position: absolute;
left: -999em;
height: auto;
width: 9.9em;
w\idth: 9.8em;
font-weight: normal;
border-width: 0.20em;
margin: 0;
z-index: 500;
}
#suckerfishnav li ul a {
width: 9.9em;
w\idth: 9.8em;
}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
left: -999em;
}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
left: auto;
}
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
background: #eda;
width: 9.5em;
w\idth: 9.4em;
}
Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML. Hi everyone Now i hope you all wont get mad at me for this very nooby question i'm about to ask, but i'm pretty new to CSS at the moment, so im not sure what to do... Two questions actually, which i will explain. On my blog at the moment, ive put in a CSS dropdown navigation menu...the problem is that it automatically stays up the top of the page, i want to be able to position it down the bottom of the header... you can have a look at the blog here, which would help if anyone has any ideas...I want to position it just above the thin red line you can see... http://www.rivercitylife.org.au/testing/ another pain i'm having is that the menu is JUST overflowing the boundries of the page width...you can see there is a thin black line on the right hand side up at the header of the page... Sorry if i'm asking lots of questions to start with... Thanks to anyone who has any ideas and can help -Crawf Edit: Please let me know if you need any of the code or you want me to post the stylesheet for the menu.. im trying out zope, and im trying to add a THEME section to my site like the themes on PHPNuke.. i have allready designed all the diffrent css sheets.. lets call thes 1.css 2.css 3.css 4.css how would i refrence the sheets in my header, and create a dropdown menu that would change the css layout? I'm having a horrible time trying to figure out what is wrong with my dropdown menu. I cannot get it to work as it should in Internet Explorer, though it's fine in Firefox and Chrome. In Firefox, it is perfectly aligned to the center of the navigation bar, but in Internet Explorer, it is not and is elevated towards the top. In FF, there are links that dropdown under a few of the links when you hover over the initial link. This does not happen in IE. However, in both IE and FF, the background of the initial link turns dark green when you hover over it (as it should). Simply, I need the links in Internet Explorer look as they do in Firefox. I've gone through for days and tried to see what's wrong, but I can't think of anything. Here's the menu's CSS: Code: .menu {
border:none;
border:0px;
margin:0px;
padding-top: 5px;
padding-left: 3px;
font-family: Tahoma;
font-size: 20px;
}
.menu ul {
margin: 0px;
padding: 0px;
list-style: none;
height: 35px;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #000;
line-height: 35px;
display: block;
padding: 0px 25px;
text-align: center;
text-decoration: none;
margin:0px;
}
.menu li a:hover, .menu ul li:hover a {
background: #919d21;
color: #000;
text-decoration: none;
}
.menu li ul {
background: #919d21;
display: none;
height: auto;
position: absolute;
width: 150px;
padding: 0px;
border: 0px;
margin: 0px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
width: 150px;
margin:0px;
padding:0px;
display: block;
float: none;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #a7b235;
border: 0px;
color: #000;
text-decoration: none;
}
.menu p {
clear: left;
}
Here's the menu's HTML: Code: <ul> <li><a href="home.html"><img src="/images/icons/house.png" border="0">Home</a> <ul> <li><a href="home.html">Home</a></li> <li><a href="createacre.html">Acres</a></li> <li><a href="facilities.html">Facilities</a></li> <li><a href="inventory.html">Inventory</a></li> <li><a href="brand.html">Brand</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="logout.html">Logout</a></li> </ul> </li> <li><a href="corral.html"><img src="/images/icons/world.png" border="0">Atlas</a> <ul> <li><a href="corral.html">Corral</a></li> <li><a href="shows.html">Shows</a></li> <li><a href="trade.html">Giving Center</a></li> <li><a href="jobpage.html">Employment Agency</a></li> <li><a href="store.html">General Store</a></li> <li><a href="searchvets.html">Veterinarian</a></li> <li><a href="traininglinks.html">Training</a></li> <li><a href="bank.html">Bank</a></li> </ul> </li> <li><a href="mbindex.html"><img src="/images/icons/comments.png" border="0">Interact</a> <ul> <li><a href="mbindex.html">Forum</a></li> <li><a href="chat.html">Chatroom</a></li> <li><a href="championshipboard.html">Championships</a></li> <li><a href="onlineusers.html">Online Players</a></li> <li><a href="http://www.paradigmprogrammingllc.com/community/">Community</a></li> </ul> </li> <li><a href="referrals.html"><img src="/images/icons/magnifier.png" border="0">Other</a> <ul> <li><a href="referrals.html">Referrals</a></li> <li><a href="search.html">Search AA</a></li> <li><a href="item_submission.html">Submit Image</a></li> <li><a href="goals.html">Goals</a></li> <li><a href="http://www.rpg.sg/vote.php?id=62">Vote for AA</a></li> </ul> </li> <li><a href="rules.html"><img src="/images/icons/shield.png" border="0">Help</a> <ul> <li><a href="rules.html">Rules</a></li> <li><a href="htmlhelper.html">HTML Helper</a></li> <li><a href="mods.html">Moderators</a></li> <li><a href="privacy.html">Privacy Policy</a></li> <li><a href="tos.html">Terms of Service</a></li> </ul> </li> <li><a href="userarea.html"><img src="/images/icons/newspaper.png" border="0">News</a> </li> <li><a href="upgrade.html"><img src="/images/icons/arrow_up.png" border="0">Upgrade</a> </li> </ul> |
|||||||