Here is the Menu Bar code I am using:
<!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>
This is the corresponding style:
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;
}
I am trying to make other elements independent from this style but the ul li in my other code always inherits the styling from my Navigation bar.
<!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>
The other ul li elements with iTunes href's are not changing at all and they retain the styling of the Navigation bar even after trying to assign classes and ids. All files are in PHP format except for the Navigation bar which is an HTML file.
Feedback and suggestions would be greatly appreciated.
Lars (Beginner)