Jump to content
BigShieldsy

Side Menu wont work in IE

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

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...