Я написал веб-страницу, используя CSS, которая прекрасно работает, когда я загружаю ее с жесткого диска компьютера, но когда я копирую ее на сетевой диск, она больше не работает, и у меня остается только html.
Код выглядит следующим образом:
<!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>
Я был бы очень благодарен за любые указания относительно того, что я могу сделать, чтобы исправить это. Большое спасибо.
Просто добавлю, вот несколько скриншотов, чтобы прояснить проблему.
Приведенный выше скриншот показывает, как это должен выглядеть, и это то, что я получаю, когда запускаю веб-страницу с жесткого диска. Это меню в меню, и при наведении на левое меню отображаются пункты подменю справа.
Снимок экрана выше показывает, что происходит, когда он запускается с сетевого диска. Код точно такой же - он просто не берет CSS.
На приведенном выше снимке экрана показано, что происходит, когда я удалите селекторы «nav» из CSS (например, просто «ul ul {display: none;}» вместо «nav ul ul {display: none;}»), но все же запустите его с сетевого диска, который, я думаю, демонстрирует, что он распознает CSS, но по какой-то причине не распознает, что ему нужно применить его к разделу, помеченному «nav». Я не могу понять, почему он будет делать это только при запуске из сетевого расположения. Кроме того, вы можете видеть, что на этом третьем скриншоте, хотя структура basi c работает, значки отсутствуют, а ширина блока меню не согласована.
Помогите пожалуйста !!!