Importing Menus using CSS

HTML & CSS
1

I’ve been struggling to get my menu to work. I have 2 css files (style.css and Menu.css) that I’m using. Could someone please look at this and see where I’ve gone wrong? I need to have my menu items in CSS format as I have over 150 pages/links on my site. Thanks.

Style.css:
/* ==== main menu ==== */

#left_col {
width: 239px;
height: 680px;
position: absolute;
left: 10px;
padding: 0px;
top: 450px;
border: solid thin white;
}

#left_col ul {
padding-top: 0px;
list-style: none;
}

#left_col li {
padding-top: 0px;
list-style: none;
}

#left_col a {
font-family: Georgia, Times New Roman, Times, serif;
font-color: white;
font-weight: bold;
font-size: 15pt;
font-style: italic;
font-align: center;
}

Menu.css:
Menu {
.customlink color: #FFFFFF;
<br><a class=“customlink” href=“index.html” target=“_blank”>Home</a><br><br><br>
<a class=“customlink” href=“Awardees.html”>Awardee Institutions</a><br><br><br>
<a class=“customlink” href=“Membership.html”>Members</a><br><br><br>
<a class=“customlink” href=“Research_Focus_Groups.html”>Focus Groups</a><br><br><br>
<a class=“customlink” href=“Supported_Sites.html”>Supported Sites</a><br><br><br>
<a class=“customlink” href=“Research_Resources.html”>Research Resources</a><br><br><br>
<a class=“customlink” href=“Pilot_Proj.html”>Pilot Projects</a><br><br><br>
<a class=“customlink” href=“SCCPRR_Policy_Operations.pdf”>Policy Manual</a><br><br><br>
<a class=“customlink” href=“Competition.html”>Annual Competition</a><br><br><br>
}

HTML:
<body>
<link href=“style.css” rel=“stylesheet” type=“text/css” />
<link href=Menu.css" rel=“stylesheet” type=“text/css” />
</body>

<div id=“left_col” src=“Menu.css”></div>

2

You can also get rid of all those break tags, by putting some margin on the .customlinks{margin-bottom:10px;}

3

You cannot embed html in css.

It should be:

Menu.css:
.customlink {color: #FFFFFF;}



HTML:
<body>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="Menu.css" rel="stylesheet" type="text/css" />
</body>

<div id="left_col">
<br><a class="customlink" href="index.html" target="_blank">Home</a><br><br><br>
<a class="customlink" href="Awardees.html">Awardee Institutions</a><br><br><br>
<a class="customlink" href="Membership.html">Members</a><br><br><br>
<a class="customlink" href="Research_Focus_Groups.html">Focus Groups</a><br><br><br>
<a class="customlink" href="Supported_Sites.html">Supported Sites</a><br><br><br>
<a class="customlink" href="Research_Resources.html">Research Resources</a><br><br><br>
<a class="customlink" href="Pilot_Proj.html">Pilot Projects</a><br><br><br>
<a class="customlink" href="SCCPRR_Policy_Operations.pdf">Policy Manual</a><br><br><br>
<a class="customlink" href="Competition.html">Annual Competition</a><br><br><br>
</div>
4

Much less that as a menu it should be a LIST – and if all your anchors are getting the same class, put them in the list and inherit off the parent.

With the HTML in the CSS, and overuse of classes, you’ve pretty much missed how CSS works.