|
HTML - Horizontal Menu Ie7 Trouble - Works In Ff, Safari, Opera - Confused
I am designing a page w/ a horizontal menu and CSS (added in header).
For some reason, IE7 dislikes what I am doing (the HOVER doesn't seem to be working...) but it works fine in Opera, FF and Safari . . Perhaps one of the pros here can take a look under the hood? I've been at it for hours and can't seem to find the bug(s)... http://www.huntandfishnj.com/Sterling-G/ Thanks and Best wishes, Xex Similar TutorialsHi, I need some help please? I have bought/made a simple html page on internet. The problem is that when i uploaded it to my ftp server which is on www.one.com and tried it in IE it did not work as it should. It works perfectly in any other webbrowser like Safari, Mozilla, GoogleChrome, Opera. Why not IE? Is there anybody out there who can help me? Somebody please tell me what's wrong? Best regards Pete index.html HTML Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>RUSSEUKEN.no</title>
<meta charset="utf-8">
<meta name="description" content="Russeuken">
<meta name="keywords" content="russ, russefeiring, bergen, uken, russeuken, norge, 17. mai, fest ">
<meta name="author" content="Russeuken">
<[if IE]><link href="css/ie_style.css" rel="stylesheet" type="text/css" /><[endif]>
<[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><[endif]>
<[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><[endif]>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link href="css/jbgallery-2.0.css" id="jbgallery-css" rel="stylesheet" media="javascript-screen" />
<!-- styles for prettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_900.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400r.font.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script src="js/jbgallery-2.0jbgallery-2.0.js" type="text/javascript"></script>
<script type="text/javascript"><!--
jQuery(document).ready(function(){
jQuery(".jbgallery").jbgallery({
menu : "numbers",
style: "zoom",
slideshow : true,
caption : false
});
});
--></script>
</head>
<iframe id="ytplayer" type="text/html" width="0" height="0" hidden="1" src="http://www.youtube.com/embed/BpJhT4yzWyo?autoplay=1" frameborder="0"/></iframe>
<body>
<div class="extra"></div>
<div class="extra1">
<div id="main">
<!-- header -->
<header class="head">
<div class="jbgallery">
<ul>
<li><a href="images/1.jpg"> </a></li>
<li><a href="images/4.jpg"> </a></li>
<li><a href="images/2.jpg"> </a></li>
<li><a href="images/3.jpg"> </a></li>
<!--<li><a href="images/5.jpg"> </a></li>-->
</ul>
</div>
<div class="block-2">
<div class="logo"><a href="http://www.exodus.no"><img src="images/logo.png" alt=""></a></div>
<nav>
<ul class="sf-menu">
<li><a href="russeuken.html">RUSSEUKEN</a></li>
<li><a href="arrangement.html">PROGRAM2012</a></li>
<li><a href="russ.html">RUSS</a></li>
<li><a href="bilder.html">BILDER</a></li>
<li class="last"><a href="kontakt.html">KONTAKT OSS</a></li>
</ul>
</nav>
</div>
<div class="text-1">change bg</div>
</header>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="indent">
<div class="wrapper">
<div class="fright">
<span>RUSSEUKEN.no</span> © 2012
</div>
<div class="fleft"><!-- {%FOOTER_LINK} --></div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
ie_style.css Code: .link-1,.link-2,.block-1,.block-2,.sf-menu a:hover,.sf-menu a.current,.sf-menu a,.content-box,.main-banner,.sf-menu li ul,#advanced{behavior:url(js/PIE.htc); z-index:100;}
.link-1,.link-2,.block-1,.block-2,.content-box,.main-banner,.content-box,.content-box-1{behavior:url(js/PIE.htc); z-index:100; position:relative}
ie7.css Code: /* IE7 specific styles */
#constuction-box {display:inline;}
#intro-box {display:inline;}
.tabs code { overflow:visible !important;}
#contact-form { height:580px;}
.block-1{behavior:url(js/PIE.htc); z-index:100; position:relative}
html5.js PHP Code: // Create new HTML5 elements =================================================== // ----------------------------------------------------------------------------- // This script should load before any others. We want the new elements to be // parsed before pretty much anything happens. // Plus, IE does not behave otherwise. The cost of being progressive... // ----------------------------------------------------------------------------- document.createElement("article"); document.createElement("aside"); document.createElement("audio"); document.createElement("canvas"); document.createElement("command"); document.createElement("datalist"); document.createElement("details"); document.createElement("embed"); document.createElement("figcaption"); document.createElement("figure"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("keygen"); document.createElement("mark"); document.createElement("meter"); document.createElement("nav"); document.createElement("output"); document.createElement("progress"); document.createElement("rp"); document.createElement("rt"); document.createElement("ruby"); document.createElement("section"); document.createElement("source"); document.createElement("summary"); document.createElement("time"); document.createElement("video"); I thought for sure that after all the helped I've received so far (many thanks, btw) that I'd be able to setup a horizontal menu using UL/LIs with some CSS. I've studied many other sites that use horizontal menues this way and have tried to figure 'em out but no luck so far Here's my attempted code so far: CSS Code: #headerNavMenuContainer {
background: url('images/main_nav_bar2.gif');
float: left;
border: 1px solid #000;
height: 42px;
width: 100%;
}
#headerNavMenu ul {
font-weight: 800;
text-align: center;
}
#headerNavMenu ul a {
border-right: 1px solid #dadada;
color: #000;
text-decoration: none;
}
HTML Code: <div id="headerNavMenuContainer"> <div id="headerNavMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Encyclopedia</a></li> <li><a href="#">Forum</a></li> <li><a href="#">The Truth</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Publications</a></li> </ul> </div> </div> Unfortunately I haven't quite solved this horizontal menu that I'm trying to get displayed correctly, just yet. This is my latest code: CSS Code: #headerNavMenuContainer {
background: url('images/main_nav_bar2.gif') no-repeat center;
float: left;
height: 42px;
width: 100%;
margin: 0 auto;
text-align: center;
}
#headerNavMenu ul {
height: 42px; /* the height of the menu bar */
border: 1px solid #000; /* to make sure DIV displays at desired dimensions */
margin: 0 auto; /* i'm not entirely sure what 'auto' does */
text-align: center; /* i don't know how to center vertically in DIV */
}
#headerNavMenu li {
height: 42px;
margin: 0 auto;
display: inline;
height: 100%;
text-align: center;
border-right: 1px solid #f00;
list-style-type: none;
}
#headerNavMenu li a {
height: 42px;
margin: 0 auto;
color: #000;
text-decoration: none;
}
HTML Code: <div id="headerNavMenuContainer"> <div id="headerNavMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Encyclopedia</a></li> <li><a href="#">Forum</a></li> <li><a href="#">The Truth</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Publications</a></li> </ul> </div> </div> The pics below show what I currently have and what I'm trying to get to. Help!!!! I have been looking at this for almost 6 hours and I still can't explain why my horizontal menu wrapped using Firefox and not IE. I have firefox 3 installed and some of the categories (on the same tree) wrapped and some doesn't. But if i refresh it a few times, it become normal again. This make no sense. Maybe I need to get some fresh air because i am starting to see spots on the screen. http://208.84.114.15 I need some serious help, I have no idea what to check: www.enviral-design.com go to th galleries page, and see what I mean. if you are in Safari or Chrome, it loads exactly like it's supposed to(for me at least) However, on IE or Firefox the gallery page loads all stretched, and as soon as you click on any thumbnails or spry accordion tabs the page just explodes!! what gives?? I've replaced the css for the accordion spry panels with deault DW css, no luck. same with the .js file that the accordions use, also no luck.... I have no idea what to do, or where to start.... anyone?? please help me out!! thanks for your time, Lucas Ok, so i worked very hard for about 4 hours to make my page valid (click). Now, i worked out everything to work in firefox and safari and then installed opera and it looks fine in that, as well as in mobile safari (for iPod Touch). But, believe it or not, when i try it in IE, everything is completely messed up. I am extremely tired of me having to go the extra mile because the idiots behind IE dont know how to make a fricken browser. Anyways, with the rant out of the way, can anyone help me fix this up? any tips or ideas on what is causing this? http://Flysinger.com thanks, -ajp Hello, my problem is simple, my code works in Safari and Firefox but does not work in Internet Explorer. The code is supposed to open up my other site inside a frame when visiting drewandjess.net. Works perfectly except with IE... it just displays some text that should be commented out. Any advice would be appreciated! Domain: www.drewandjess.net Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Andrew and Jessica's Wedding</title><!-->incase they have javascript turned off<!-->
<script type="text/javascript"><!-->changes title bar to match title on current page in frame<!-->
function changeTitle()
{
if (top.frames['main'].document.title)
{
top.document.title=top.frames['main'].document.title;
}
}
</script>
</head>
<frameset>
<frame name="main" src="http://www.weddingwire.com/youandme"scrolling="auto" target="main" ONLOAD="changeTitle();"><!-->You need the onload handler to make the javascript work<!-->
<noframes>
<body>
If you can see this message it is because you are using a browser that does not support frames. Please retry viewing this page with a browser such as Mozilla Firefox.
</body>
</noframes>
</frameset>
</html>
http://www.ptacnik.com/index102.html When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated. http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1. http://ptacnik.com/about101.html http://ptacnik.com/design.html http://ptacnik.com/illustration.html My site here is working in FF v3.5.9 but when I just recently loaded it in Safari and Chrome the page just doesn't work. I don't understand why because I developed it and tested it when using Safari and Chrome is built on Webkit too. http://www.meta.projectmio.com/sss.html It seems like a recent thing, but it still works in FireFox so I don't know what's going on? Any ideas? Hi, Im trying to develop a simple HTML interface for virtual tours but I cant get the site to look the same in all browsers. The problem comes when I view the page in IE. I want the bottom table to only be the length of the window as done in both safari and firefox. My site can be viewed on: http://www.fullvisual.com/informatic...tual_tour.html why doesn't the width=100% work? Thanks Just wondering if there are some issues with IE7 handling iframe content. The initial iframe source page was loaded up fine. However, an attempt to reload the same content page by targeting it from an HTML form on the same main page doesn't work. It's structured like below. The same page works fine in IE8 and Safari. Any clues? Main Page -> <iframe name="frame" id="frame_id" src="abcd.html"></iframe> -> <form id="buttonform" name="buttonname" method="post" action="abcd.html" target="frame"> Hi, New to this forum, so apologies if this has been answered before--couldn't find the solution anywhere. I'm working on a page (http://www.dinacheney.com/index.htm), and the rowspan effect is working well on FF. On IE, the chalkboard image gets cut off and the image doesn't line up properly. Is this just rowspan weirdness and I need to rewrite the page using divs or css? Or is there something simpler I can do? All advice is much appreciated!!! Thanks in advance! my problem is ie and its padding, ie has add a 4px padding at the bottom of the of the image but in safari and firefox there is no padding. here is the url so u understand what i mean http://nathanoconnor.co.uk/gilbertelectrical/site/ The following webpage uses an a href to turn the chunk of java code into a link to the bottom of the page, while this works in Safari it doesn ot in FireFox v2/3 (I have not got IE, can somebody confirm). How can I make the java applet link work under FF? http://lovelago.googlepages.com/java_button_2.html Code: <!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><!-- charset must remain utf-8 to be handled properly by Processing -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><title>java_button_eg : Built with Processing</title>
<style type="text/css">
/* <![CDATA[ */
body {
margin: 60px 0px 0px 55px;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 11px;
background-color: #ddddcc;
text-decoration: none;
font-weight: normal;
line-height: normal;
}
a { color: #3399cc; }
a:link { color: #3399cc; text-decoration: underline; }
a:visited { color: #3399cc; text-decoration: underline; }
a:active { color: #3399cc; text-decoration: underline; }
a:hover { color: #3399cc; text-decoration: underline; }
/* ]]> */
</style></head><body>
<a href="#Bottom"> <div id="content">
<div id="java_button_eg_container">
<!--[if !IE]> -->
<object classid="java:java_button_eg.class" type="application/x-java-applet" archive="java_button_eg.jar" standby="Loading Processing software..." height="100" width="100">
<param name="archive" value="java_button_eg.jar">
<param name="mayscript" value="true">
<param name="scriptable" value="true">
<param name="image" value="loading.gif">
<param name="boxmessage" value="Loading Processing software...">
<param name="boxbgcolor" value="#FFFFFF">
<param name="test_string" value="outer">
<!--<![endif]-->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0_15-windows-i586.cab" standby="Loading Processing software..." height="100" width="100">
<param name="code" value="java_button_eg">
<param name="archive" value="java_button_eg.jar">
<param name="mayscript" value="true">
<param name="scriptable" value="true">
<param name="image" value="loading.gif">
<param name="boxmessage" value="Loading Processing software...">
<param name="boxbgcolor" value="#FFFFFF">
<param name="test_string" value="inner">
<p>
<strong>
This browser does not have a Java Plug-in.
<br>
<a href="http://java.sun.com/products/plugin/downloads/index.html" title="Download Java Plug-in">
Get the latest Java Plug-in here.
</a>
</strong>
</p>
</object></a>
<!--[if !IE]> -->
</object>
<!--<![endif]-->
</div>
<p>
</p>
<p>
Source code: <a href="http://lovelago.googlepages.com/java_button_eg.pde">java_button_eg</a>
</p>
<p>
Built with <a href="http://processing.org/" title="Processing.org">Processing</a>
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a name="Bottom">Bottom</a>
</body></html>
http://www.yandina.com/JIndex.htm Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like. Open in IE and the last table get overlaid on top of the previous table. What sort of things can cause that? Additional (unrelated I think) problem, IE is not accessing cookies but others are fine. What can cause that? Hi folks, I have this menu (generated via menumatic), that needs to not wrap should users decrease the width of their browser too far (or if it does wrap..then I need the div to resize to fit the height properly which it currently does not). Any tips/suggestions welcome The website url: (click the Available Items which will show the 2nd level menu in question (located in div id='promo') http://www.borrownet.com/ the CSS is as follows (from mm2.css): /* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish * Dropdowns by Patrick Griffiths and Dan Webb. * http://carroll.org.uk/sandbox/suckerfish/bones2.html */ /* ----[ LINKS ]----*/ /* all menu links */ #nav a, #subMenusContainer a{ text-decoration:none; display:block; padding: 8px 10px; color: #000; font: 70%/90% arial; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a{ margin:5; float:left; } /* Just sub menu links */ #subMenusContainer a, #nav li li a{ text-align:left; } /* All menu links on hover or focus */ #nav a:hover, #subMenusContainer a:hover { background-color:#90B557; color:#FFF; /* -moz-border-radius: 7px; -webkit-border-radius: 7px;*/ } /* sub menu links on hover or focus */ #subMenusContainer a:hover, #nav li a:hover { background-color:#B2D281; color:#000; } /* .subMenuParentBtn{ background: url(../img/arrow_right.gif) right center no-repeat; } .subMenuParentBtnFocused{ background: url(../img/arrow_right_over.gif) right center no-repeat; } .mainMenuParentBtn{ background: url(../img/arrow_down.gif) right center no-repeat; } .mainMenuParentBtnFocused{ background: url(../img/arrow_down_over.gif) right center no-repeat; } */ /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW{ display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0px 4px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color:#90B557; border: 2px solid #C3D46A; top: 0px; left:0; z-index:8; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; } #subMenusContainer li{ list-style: none; } /* main menu ul or ol elment */ #nav{ display:block; position: absolute; list-style:none; margin:0 0 0 0; z-index: 5; text-align: center; display:block; } #subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; } /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li{ float:none; } #nav li li a{ /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 11em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul{ margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;} /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;} #nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;} #nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;} #nav li:hover a:focus{ margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; } I am working on a site with a CSS horizontal drop down menu. On my Contact Us page I added an office locations map that uses java script and links to MapsAlive.com. My menu only has one drop down category, but when testing it, the drop down stops where the office location map starts. Is there a way to make it so the menu is always on top? I am using Dreamweaver, so the menu is part of my template. Here is my code for the menu: <div id="outside"> <ul id="navigation-1"> <li><a href="index.html" title="Home" target="_self" >Home</a> </li> <li><a href="" title="Services" target="_self" >Services</a> <ul class="navigation-2"> <li><a href="air.html" title="Air" target="_self" >Air</a></li> <li><a href="altenergy.html" title="Alternative Energy" target="_self" >Alternative Energy</a></li> <li><a href="civil.html" title="Civil Engineering" target="_self" >Civil Engineering</a></li> <li><a href="environmental.html" title="Environmental" target="_self" >Environmental</a></li> <li><a href="health.html" title="Health & Safety" target="_self" >Health & Safety</a></li> <li><a href="solidwaste.html" title="Solid Waste" target="_self" >Solid Waste</a></li> </ul> </li> <li><a href="presentations.html" title="Presentations" target="_self" >Presentations</a> </li> <li><a href="aboutus.html" title="About Us" target="_self" >About Us</a> </li> <li><a href="careers.html" title="Careers" target="_self" >Careers</a> </li> <li><a href="contactus.html" title="Contact Us" target="_self" >Contact Us</a> </li> </ul> </div> Here is my code for the office locations map: <div id="mainContent" align="center"> <link rel="stylesheet" type="text/css" href="http://tour.mapsalive.com/3854/page1.css" /> <script type="text/javascript" src="http://tour.mapsalive.com/3854/mapsalive.js"></script> <script type="text/javascript">maClient.path="http://tour.mapsalive.com/3854/";</script> <script type="text/javascript" src="http://tour.mapsalive.com/3854/page1.js"></script> </div> I have attached a screenshot of how it looks in a browser so you can see what it is doing. I would appreciate any advice from anyone who can give me direction. Thanks, Tatter So I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
Nvm im an idiot |
|||||||