I have written a web page using CSS which works perfectly well when I load it from the computer hard drive, but when I copy it to a network drive it no longer functions, and I am left with just the html.
The code is as follows:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/regular.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/solid.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style type="text/css">
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
nav ul {
list-style: none;
padding:0;
float: left;
margin: 0;
display: block;
text-decoration:none;
}
nav ul ul {
display: none;
}
nav li {
padding: 5px;
text-decoration:none;
}
nav li:hover { background: #ccc;
text-decoration:none;
}
nav ul li { display: block;
font-family:helvetica;
font-size:20px;
background-color:deepskyblue;
padding: 10px;
text-decoration: none;
color: black;
width:100%;
height:15px;
border: 2px solid black;
border-radius:5%;
position:relative;
}
nav ul li:hover > ul {
position: absolute;
display: block;
top: 0;
left: 100%;
width:850px;
text-decoration: none;
background: #aaa;
}
</style>
</head>
<body>
<h2>Links to useful websites and documents</h2>
<nav>
<ul>
<li>
<a href="#" style="text-decoration:none;"><i class="fas fa-info-circle fa-lg"></i> Patient Leaflets</a>
<ul>
<li><a href="https://www.talkingtherapies.berkshire.nhs.uk/_store/documents/BH_Joint_TT_Leaflet_sept17_Print_v2.pdf" target="_blank" style="text-decoration:none;">Talking Therapies Leaflet</a></li>
<li><a href="https://www.berkshirewestccg.nhs.uk/hcp-section/diabetes-information/diabetes-lifestyle-information/podiatry/foot-care-pathway/" target="_blank" style="text-decoration:none;">Diabetic foot care pathway and patient leaflets</a></li>
<li><a href="https://www.berkshirehealthcare.nhs.uk/our-services/adult-healthcare/physiotherapy/" target="_blank" style="text-decoration:none;">Physiotherapy Exercise Leaflets</a></li>
<li><a href="http://trend-uk.org/wp-content/uploads/2017/02/Hypo-leaflet-V4.pdf" target="_blank" style="text-decoration:none;">Hypo Leaflet</a></li>
<li><a href="https://www.berkshirewestccg.nhs.uk/hcp-section/diabetes-information/diabetes-lifestyle-information/podiatry/foot-care-pathway/" target="_blank" style="text-decoration:none;">Diabetic Foot Care Leaflets</a></li>
</ul>
</li>
<li>
<a href="#" style="text-decoration:none;"><i class="fas fa-file-prescription fa-lg"></i> Prescribing</a>
<ul>
<li><a href="https://www.sps.nhs.uk/wp-content/uploads/2019/10/UKMI_QA_How-do-you-switch-between-TCA-SSRI-related-antidepressants_update_Oct-2019.pdf" target="_blank" style="text-decoration:none;">Guide to Switching Antidepressants</a></li>
<li><a href="http://westberks.formulary.co.uk/" target="_blank" style="text-decoration:none;">Berkshire West Formulary</a></li>
<li><a href="https://www.berkshirewestccg.nhs.uk/about-us/our-responsibilities/medicines-optimisation-team/apc-documents/apc-clinical-documents/" target="_blank" style="text-decoration:none;">Area Prescribing Committee Guidelines</a></li>
<li><a href="https://www.sps.nhs.uk/wp-content/uploads/2017/02/UKMI_QA_Vitamin-D-treatment_Jan_2018.docx" target="_blank" style="text-decoration:none;">Vitamin D Guidelines</a></li>
<li><a href="http://www.medicinesinpregnancy.org" target="_blank" style="text-decoration:none;">Medicines in Pregnancy - Information Leaflets</a></li>
<li><a href="http://www.uktis.org" target="_blank" style="text-decoration:none;">Medicines in Pregnancy - UK Teratology Information Service</a></li>
<li><a href="https://www.berkshirewestccg.nhs.uk/media/2906/apc-clindoc-010-hrt-guidance.pdf" target="_blank" style="text-decoration:none;">HRT Guidelines</a></li>
<li><a href="http://www.choiceandmedication.org/berkshirehealthcare/printable-leaflets/?results=1&lf=1273&med=&lang=" target="_blank" style="text-decoration:none;">Handy Charts for Comparing Anxiety/Depression Medications</a></li>
<li><a href="https://www.berkshirewestccg.nhs.uk/media/3001/apc-clindoc-018-guidelines-for-the-appropriate-prescribing-of-specialist-paediatric-formulas-in-berkshire-west-primary-care.pdf" target="_blank" style="text-decoration:none;">Formula Milk Prescribing Guidelines</a></li>
</ul>
</li>
<li><a href="Alternatives to Hospital Admission-Nov19.pdf" target="_blank" style="text-decoration:none;"><i class="fas fa-h-square fa-lg"></i> Alternatives to Hospital Admission</a></li>
</ul>
</nav>
</body>
</html>
I’d be really grateful for any pointers as to what I can do to rectify this. Many thanks.
Just to add, here are some screenshots to clarify the problem.
The top image shows how it is supposed to look, and is what I get when I launch the web page from the hard drive. It is a menu within a menu, and hovering over the left-hand menu displays the sub-menu items on the right.
The second image shows what happens when it is launched from the network drive. The code is exactly the same - it just doesn’t pick up the CSS at all.
The bottom image shows what happens when I remove the “nav” selectors from the CSS (e.g. just “ul ul {display:none;}” instead of “nav ul ul {display:none;}”) but still launch it from the network drive, which I think demonstrates that it does recognise the CSS, but for some reason doesn’t recognise that it needs to apply it to the section tagged with “nav”. I can’t understand why it would do this only when launched from a network location. Also, you can see that in this third image, although the basic structure works, the icons are missing and the width of the menu block is inconsistent.
Help please!!!