为什么我无法控制 'list'

Why can't I gain control of 'list'

所以,设法按照我喜欢的方式对我的导航栏进行排序......但是现在我已经转移到它下面我想要的东西了。除了我无法在 'list' 元素上显示 'gain control' 之外……我做错了什么?

<!DOCTYPE html>

<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
    <Div class="container">
    <ul>
    <div class="nav">
        <li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>

    <div class="navbar">
        <li class="contact"><a href="contact.html">CONTACT</a></li>
        <li class="about"><a href="about.html">ABOUT</a>
        <strong><li class="leagues"><a href="leagues.html">LEAGUES</a></li></strong>
        <li class="home"><a href="index.html">HOME</a></li>     
    </div><!--Navbar End-->
    </div><!--Nav End-->
    </div><!--Container End-->
    </div class="list"><strong>
        <li><a href="essex.html">Essex</a></li>
        <li><a href="london.html">London</a></li>
    </strong></div><!--Leagues End-->
</body>
</html>

.container {
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  font-family: arial;
  z-index: 2;
}
.navbar a {
  float: right;
  text-decoration: none;
  padding-left: 10px;
  color: #003399;
}
.nav li {
  display: inline;
}
.navbar {
  float: right;
  padding-top: 67px;
  padding-bottom: 45px;
  padding-right: 0px;
  z-index: 2;
}
#intro img {
  position: absolute;
  left:0px;
  display: block;
  margin: 0;
  max-width: 100%;
  height: auto;
  z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
  color: #000000;
}

这就是您在 css 中控制这些内容所需的全部内容。请参阅此处的 jsfiddle 示例

http://jsfiddle.net/fwvc6zsc/

如果您想更加确定自己使用的是正确的,您也可以这样更改:

strong li a{
  color: #000000;
  text-decoration: none;
}

因为你用的不一样class

使用这个:

.navbar li {
     css code 
}