Все элементы по-прежнему имеют стиль menuBar? (<? php include ...>)

Итак, это мой штрих-код меню:

<!DOCTYPE html>
<html>
<link href = menuBarStyle.css rel = "stylesheet">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no">   
<div class = "menu">

<ul class = "bar">
    <li><a href = "index.php">Home</a></li>
    <li><a>Music</a>
        <ul>
        <li><a href = "djdizzstart.php">DJ Dizz Home</a></li>
        <li><a href = "djdizzspotify.php">Spotify</a></li>
        <li><a href = "djdizzsoundcloud.php">SoundCloud</a></li>
        <li><a href = "djdizzitunes.php">iTunes</a></li>               
        </ul>           
    </li>            
    <li><a>Learn</a>     
        <ul>          
        <li><a>JavaScript</a></li>
        <li><a>Java</a></li>
        <li><a>Web</a></li>
        <li><a>SQL Databases</a></li>            
        </ul>
    </li>
    <li><a>Credits</a>
        <ul>
            <li><a>Design & Code</a></li>
            <li><a>Music</a></li>
            <li><a>Marketing</a></li>
            <li><a>Hosting</a></li>
           </ul>
      </li>
    <li><a id = "login">Login</a></li>
 </ul>
 </div>
</html>

И это стиль:

import url('https://fonts.googleapis.com/css? 
family=Amatic+SC:700|Hind+Siliguri|Shadows+Into+Light');

body {
    background-size: cover;
    font-family: 'Hind Siliguri', sans-serif;
    color: white;
    min-width:800px;       
    width: auto !important;  
    width:800px; 
}
ul {
    margin: 0px;
    padding: 0px;
    list-style: none;    
    position: relative;
    float:left;
    left: 50%;
    cursor:pointer;
    max-width: 100%;
}
ul li {
    float: left;
    width: 200px;
    height: 40px;
    background-color: black;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    display:block;
    position: relative;
    right: 50%;
}
ul li a {
    text-decoration: none;
    color: white;
    display: block;       
}
ul li a:hover {
    background-color: green;
}
ul li ul li {
    display: none;
}
ul li: hover ul li {
    display: block;
}
#login {
    background-color: green;
    text-decoration: none;
    border: none;
}
#login:hover {
    background-color: limegreen;
}
#menu {
    z-index: 2;
    position: relative;
}

Теперь все, что я хочу, - это сделать все остальные элементы независимыми от этого стиля, но ul li в моем следующем коде всегда имеет стиль моего navigationBar.

<!DOCTYPE html>
<html>    
<head><title>DJ Dizz iTunes</title></head>
<?php include ("menuBar.html"); ?>
<link href = "style.css" rel = stylesheet>
<body>
    <div id = "Startpage">
        <p style = "text-align: center">iTunes</p>
    </div>
    <div id = "itunes" style = "text-align:center">
        <a href = "https://geo.itunes.apple.com/us/artist/dj-dizz/1204428323?mt=1&app=music" style = "display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/de-de/music-lrg.svg) no-repeat;width:200px;height:55px;"></a>
    </div>
    <ul id = "songs">
        <li><a href = "https://geo.itunes.apple.com/us/album/staying-down/1434126188?i=1434126382&mt=1&app=music">Staying Down</a></li>
        <li><a href = "https://geo.itunes.apple.com/us/album/its-me/1270058662?i=1270058790&mt=1&app=music">It's Me</a></li>    
    </ul>           
</body>
</html>

Так что теперь другие элементы ul li с href iTunes вообще не меняются, они просто остаются такими же, как и у navigationBar. Я пробовал классы и идентификаторы, но ничего не работает. Все файлы находятся на .php, кроме моего menuBar, это .html

Спасибо за ответы

Ларс (новичок)

— 02.10.2018 15:50

спасибо, но это не решило мою проблему :(

— 02.10.2018 16:01

html css

02.10.2018 15:36

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей навигации есть класс «bar», поэтому вам нужно указать этот класс в вашем CSS, чтобы нацелить его только на этот элемент, а не на ВСЕ ul на странице. Бывший:

ul.bar {
margin: 0px;
padding: 0px;
... etc ...
}

ul.bar li {
float: left;
width: 200px;
... etc ...
}

Сделайте это для всех ваших правил ul в вашем CSS, и все будет в порядке.

Большое спасибо, мэн! Спас мой день <33333

— 11.10.2018 15:47

02.10.2018 16:53

Другие вопросы по теме

Почему тот же CSS не может добавить новую строку для элемента ввода?

Как уменьшить яркость фона при отображении предупреждения и отключить # затемнение при закрытии предупреждения?

Img src не загружается в React

Установка background-blend-mode и background-color не работает в электронной почте HTML

Как сделать адаптивную перенос столбцов?

Тот же выбор css дает другой результат

Как сделать spaciel строку в css?

По счетчику имени класса не работает в javascript

Центрировать текст в угловатом материале MatButtonToggle

Как переместить изображение с псевдоэлементами?

Все элементы по-прежнему имеют стиль menuBar? (<? php include ...>)

Ответы 1

Другие вопросы по теме

Похожие вопросы