Hi. I'm fairly new to HTML and CSS, but I'm currently studying IT.
For a project we've been asked to create a website on a topic of our choice.
Anyway, my issue is that I have followed a tutorial on how to create a drop down navigation menu with only the use of CSS (CSS Hover effect). I followed the instructions correctly and ended up successfully making a functional drop down navigation menu. Only two sections on the menu feature a sub-layer.
I thought everything was going to be fine when transferring the HTML, CSS and JavaScript files over to my USB Memory Stick, but unfortunately an error occurred. I've checked to see if all directories are correct, which I am somewhat certain they are (after hours of checking). Another thing I notice when loaded the same webpage from the two different sources (College PC and my memory stick) is that when the page is loaded from the USB the "border" of the browser has vanished and there is no "greyed out" scroll bar. (I'm unsure what to call these issues). The browser I use at college is IE9.
The issue is that when the website is loaded from the USB Memory Stick, the navigation menu does not show the sub-layer when hovered over. I'm trying my best to detect any directory faults but have not yet come across any.
I'll include my HTML and CSS code below (Please excuse the code if it is messy/incorrect):
HTML:
<!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>Home</title>
<link href="css/dropdown.css" rel="stylesheet" type="text/css" />
<script src="scripts/rotating.js" language="javascript" type="text/javascript"> </script>
</head>
<body>
<div id="wrapper">
<div id="header">
<!-- Begin: Font sizer interface -->
<div class="font_sizer">
<span class="small_font"><a title="Click to return to the default font" href="javascript:changeFont('small_font');">A</a></span>
<span class="medium_font"><a title="Click to increase to the medium font" href="javascript:changeFont('medium_font');">A</a></span>
<span class="large_font"><a title="Click to increase to the large font" href="javascript:changeFont('large_font');">A</a></span>
</div>
<img src="images/crimson_omen_white2.png" id="logo" alt="Gears of War Fan Site Logo"/>
<div id="navMenu">
<ul>
<li><a href="index.html">Home</a></li>
</ul> <!-- end main UL -->
<ul>
<li><a>Games</a></li>
<ul>
<li><a href="gears1.html">Gears of War</a></li>
<li><a href="gears2.html">Gears of War 2</a></li>
<li><a href="gears3.html">Gears of War 3</a></li>
</ul>
</ul>
<ul>
<li><a>Characters</a></li>
<ul>
<li><a href="marcus.html">Marcus</a></li>
<li><a href="dom.html">Dom</a></li>
<li><a href="baird.html">Baird</a></li>
<li><a href="cole.html">Cole</a></li>
<li><a href="other.html">Others</a></li>
</ul>
</ul>
<ul>
<li><a href="media.html">Media</a></li>
</ul>
<ul>
<li><a href="embedforum.html">Forum</a></li>
</ul> <!-- end inner Ul -->
<br class="clearFloat" />
</div> <!-- end navMenu -->
<!-- Rotating Image -->
<img src="images/rotatingimage1.jpg" id="adBanner" alt="Rotating Image of Gears of War Fan Site"/>
</div><!-- Closing heading DIV -->
<div id="main">
<p align="center"><u><b>Welcome to the Gears of War Fan Site!</b></u></p>
<p><u>What the site is about:</u></p>
<p>This website features all the content you could possibly ask for. We have information on all of the character from within the game including background stories to the main characters <b>Marcus Fenix</b>, <b>Dominic Santiago</b>, <b>Damon Baird</b> and <b>Augustus Cole</b>.</p>
<p><u>News about the Game series:</u></p>
<b>Gears of War 3 Title Update 3.1 Inbound</b> | <i>February 07 , 2012 7:56 PM</i> |<br />
<br>A new Title Update for Gears of War 3 is on the way and includes a fix that addresses problems some players were having joining matches on dedicated servers. The Title Update will be available starting 2AM Monday February 6th. It will be downloaded automatically by starting Gears 3 while connected to Xbox LIVE.</br>
<p><b>Seven New Achievements to Earn in Fenix Rising DLC</b> | <i>February 01 , 2012 10:22 PM</i> |</p>
<p>As if 5 awesome multiplayer maps weren’t enough we’re adding even more fuel to the Fenix Rising DLC with 7 new achievements totalling an additional 250 points. Don’t forget: Fenix Rising debuts on the Xbox LIVE marketplace on January 17th for just 800 Microsoft Points – or, for Season Pass holders, <b>FREE!</b> </p>
<p>Below are the achievements included in the new DLC:</p>
<p>• Now They Begin to Understand – Complete 12 waves of Beast on all Fenix Rising Maps. (20 points)
<br />• Defending the Past – Complete all 50 waves of Horde on any of the Fenix Rising Maps. (25 points)
<br />• Come to Poppa – Win a Versus multiplayer match as a team of five Recruit Claytons (any mode). (15 points)
<br />• Locust, Forever – Win a Versus multiplayer match as a team of five Savage Marauders (any mode). (15 points)
<br />• Time to Re-up – Achieve level 100 and choose to re-up for another tour of duty. (50 points)
<br />• Again! – Achieve level 100 a second time and choose to re-up for another tour of duty. (50 points)
<br />• I’ve Done it All! – Earn at least one of each of the original 132 combat ribbons. (75 points)</p>
</div>
<!-- end Main div -->
</div><!-- Close wrapper -->
</body>
</html>CSS:
@charset "utf-8";
body {
background-image:url(../images/background1.jpg);
background-position:fixed;
margin:0;
}
#wrapper {
height:auto;
width:1200px;
margin: auto auto;
}
#header{
margin: 0 0 0 0;
}
#main {
width:928px;
min-height:480px;
border:1px solid #FFF;
margin:0 auto;
background:#000;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
}
#video {
width:655px;
height:125px;
background:grey;
margin:50px auto 0 auto;
}
#logo {
width: 250px;
height: 250px;
margin: 0 0 0 50px;
float:left;
}
#adBanner {
width:758px;
height:150px;
border:1px solid #FFF;
margin: 20px 0px 30px 15px;
background:#000;
}
#navMenu {
margin:0 125px 0 0;
padding:10px 0 10px 0;
float:right;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
Padding:0;
list-style:none;
float:left;
position:relative;
background-image:url(../images/nav.png);
}
#navMenu ul li a {
text-align:center;
font-family: Arial, Helvetica, sans-serif, cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#FFE;
border:1px solid #FFF;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
/********************************************/
#navMenu li:hover {
background-image:url(../images/navhover.png);
background-repeat:no-repeat;
}
#navMenu ul li:hover ul li a:hover {
background-image:url(../images/navhover.png);
background-repeat:no-repeat;
}
#navMenu a:hover {
background-image:url(../images/navhover.png);
background-repeat:no-repeat;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
#forum {
border: 0px solid #ffffff;
}
.font_sizer {
margin: 0 0 0 1020px; font-family:Arial;
}
/* Font Sizes */
.default_font { font-size:medium; }
.medium_font { font-size:x-large; }
.large_font { font-size:xx-large; }
/* Font size changer interface style */
.font_sizer a { text-decoration:none; color:#FFF; }
/***************************************Character Section*************************************************/
.otherimage {
height:200px;
width:250px;
border:1px solid #FFFFFF;
float:left;
margin: 0 0 4px 0;
}
.othertext {
height:200px;
width:670px;
border:1px solid #FFFFFF;
float:right;
margin: 0 0 4px 0;
}Thanks.
