Jump to content

Side Menu wont work in IE


BigShieldsy

Recommended Posts

Hi there i dont know if i have put this in the correct place or not but hopefully you's will be able to help with this issue or at least point me in the right direction.I am new to the whole html and css however i have been building a website for my football for a while now thanks to this website and forum.

The webisite so far seem to be fine in both firefox and chrome. However when checking internet explorer i have now came across an issue that i cant find a answer for.The website houses a menu system on the left hand side of the screen and when the user hover's their pointer over the required menu option another level should appear to show options for that menu header. (The html code for the menu will be added at the end of the comment along with the css style for the menu.) However with internet explorer the second level menu will not appear and i dont know why.

 

If some could explain why this is happening or give me an idea into fixing the issue.

 

 

HTML menu code

<div class="box"> <img src="../Pictures/Main-Site/Menu.jpg" width="140px" style="margin-left:6px; margin-top:2px; margin-bottom:4px;"/> <br/> <div id="menuwrapper"><!-- Navigation System --> <ul><!-- LEVEL ONE --> <li><a href="index.html">Home</a></li> <li><a href="Squads.html">Squads</a> <ul><!-- LEVEL TWO --> <li><a href="SaturdaySquad.html">Saturday Squad</a></li> <li><a href="SundaySquad.html">Sunday Squad</a></li> </ul> </li> <li><a href="Fixtures.html">Team Fixtures</a> <ul><!-- LEVEL TWO --> <li><a href="SatFixtures.html">Saturday Team</a> <!--<ul> LEVEL THREE <li><a href="SatLeagueCup.html">League Cup</a></li> <li><a href="SatLeagueCup.html">GDSML Cup</a></li> <li><a href="SatFixtures.html#September">September</a></li> <li><a href="SatFixtures.html#October">October</a></li> <li><a href="SatFixtures.html#November">November</a></li> <li><a href="SatFixtures.html#December">December</a></li> <li><a href="SatFixtures.html#January">January</a></li> <li><a href="SatFixtures.html#February">February</a></li> <li><a href="SatFixtures.html#March">March</a></li> <li><a href="SatFixtures.html#April">April</a></li> </ul>--> </li> <li><a href="SunFixtures.html">Sunday Team</a> <!--<ul> LEVEL THREE <li><a href="SunFixtures.html#August">August</a></li> <li><a href="SunFixtures.html#September">September</a></li> <li><a href="SunFixtures.html#October">October</a></li> <li><a href="SunFixtures.html#November">November</a></li> <li><a href="SunFixtures.html#December">December</a></li> <li><a href="SunFixtures.html#January">January</a></li> <li><a href="SunFixtures.html#February">February</a></li> <li><a href="SunFixtures.html#March">March</a></li> <li><a href="SunFixtures.html#April">April</a></li> </ul>--> </li> </ul> </li> <li><a href="#">League Tables</a> <ul><!-- LEVEL TWO --> <li><a href="SatLeagueTable.html">Saturday League</a></li> <li><a href="SunLeagueTable.html">Sunday League</a></li> </ul> </li> <li><a href="Sponsors.html">Sponsors</a> <ul><!-- LEVEL TWO --> <li><a href="http://www.carringtondean.com" target="_blank">Carrington Dean</a></li> <li><a href="http://www.musicmagpie.com" target="_blank">Musicmagpie</a></li> <li><a href="http://www.turnbullmccarron.com" target="_blank">Turnbull and McCarron</a></li> </ul> </li> <li><a href="#">About Us</a> <ul><!-- LEVEL TWO --> <li><a href="ContactUs.html">Contact Us</a></li> <li><a href="http://www.facebook.com/profile.php?id=100003892391812" target="_blank">FACEBOOK</a></li> </ul> </li> <!--<li><a href="Members_Area/index.html">Members</a> <ul> <li><a href="Members_Area/join_form.php">New Members</a></li> <li><a href="Members_Area/login_form.php">Sign In</a></li> <li><a href="lost_pw.php">Lost Password</a></li> <li><a href="password_change.php">Change Password</a></li> </ul> </li>--> </ul> </div> <br/> <img src = "../Pictures/Main-Site/RoyalArmsScotland.png" width = "120" height = "130" style="margin-left:10%;"/> </div>

 

CCS Style for the menu

 

.left-sidebar{ float:left;}.box { float:left; background: navy; /*width: 160px;*/ font-family: Times New Roman; /*font-size: large;*/ color:white; margin-left:30px; margin-right:30px; border-right:solid 1px yellow; border-left:solid 1px yellow;}A:LINK { color: white; border-bottom: none;}A:VISITED { color: white; text-decoration: none; border-bottom: none;}A:HOVER { Color: none;}/* We remove the margin, padding, and list style of UL and LI components */#menuwrapper ul, #menuwrapper ul li{ margin:0; padding-left:1px; list-style:none; /*text-align:center;*/}#menuwrapper a:hover, a:active{ color:navy;}#menuwrapper li:hover > a{ color:navy;}/* We apply background color and border bottom white and width to 150px */#menuwrapper ul li{ background-color:navy; /*border-left:solid 1px yellow;*/ width:150px;}/* We apply the background hover color when user hover the mouse over of the li component */#menuwrapper ul li:hover,ul li:active{ background-color:white; color:navy; position:relative; }/* We apply the link style */#menuwrapper ul li a{ padding:5px 15px; display:block; text-decoration:none;}#menuwrapper ul li a:hover{ padding:5px 15px; display:block; text-decoration:none;}#menuwrapper ul li a:active{ color: navy; padding: 5px 15px; display: block; text-decoration: none; font-size: 14px;}/**** SECOND LEVEL MENU *** *//* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */#menuwrapper ul li ul{ position:absolute; display:none;}/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */#menuwrapper ul li:hover ul{ left:150px; top:0px; display:block; border:solid 1px yellow;}/* we apply different background color to 2nd level menu items */#menuwrapper ul li ul li{ background-color:blue; border-bottom:solid 1px yellow;}/* We change the background color for the level 2 submenu when hovering the menu */#menuwrapper ul li:hover ul li:hover{ background-color:white; color:navy;}/* We style the color of level 2 links */#menuwrapper ul li ul li a{ color:yellow; display:inline-block; width:150px;}/* LEVEL 3 */#menuwrapper ul li:hover ul li ul { position:absolute; display:none;}/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */#menuwrapper ul li ul li:hover ul { left:150px; top:0px; display:block; border:solid 1px yellow;}/* we apply different background color to 3rd level menu items */#menuwrapper ul li ul li ul li{ background-color:blue; border-bottom:solid 1px yellow;}/* We change the background color for the level 3 submenu when hovering the menu */#menuwrapper ul li ul li:hover ul li:hover{ background-color:white; color:navy;}/* We style the color of level 2 links */#menuwrapper ul li ul li ul li a{ color:white; display:inline-block; width:120px;}

 

hopefully someone can get the bottom of this its been driving me nuts for days now lol

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...