Here is the html code followed by CSS code. Just to add. the background color changes on hover to 333on for the topnav (or bottomnav, which essentially is the same), however, the font color does not change from black to coral and that is the problem. I have tried other colors. I never had a problem with code like this before.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Enigmatic Brain Reveals</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<!--start Google analytics code-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){
(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70459726-1)', 'auto');
ga('send', 'pageview');
</script>
<!--end Google analytics code-->
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="logo">
<img src="images/sitephotos/logo.jpg" alt="logo" />
</div><!--logo-->
<div id="icon">
<ul>
<li><img src="images/sitephotos/link2.png" alt "photography site" /></li>
<li><img src="images/sitephotos/link1.png" alt="book site" /></li>
</ul>
</div><!--icon-->
<div id="topnav">
<ul>
<li>Home</li>
<li>Book</li>
<li>Excerpt</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--topnav-->
<div id="banner">
<img src="images/banner/banner1.jpg" alt="banner" />
</div><!--banner-->
<div id="content">
<h2>Main Heading</h2>
<p>placeholder</p>
</div><!--contemnt-->
<div id="links">
<ul>
<li><img src="images/sitephotos/button2.png" alt="link" /></li>
<li><img src="images/sitephotos/button1.png" alt="link" /></li>
</ul>
</div><!--links-->
<div id="bottomnav">
<ul>
<li>Home</li>
<li>Book</li>
<li>Excerpt</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--bottomnav-->
<div id="footer">
<p>Copyright © Dewan Jaglul. All rights reserved.</p>
</div><!--footer-->
</div><!--wrapper-->
</div><!--outer-->
</body>
</html>
/* CSS Document */
* {margin: 0px; padding: 0px; border: 0px; }
body {
font-family: "Arial", "Cambria", "Candara", "Hoefler Text", "Liberation Serif", "serif", "Tahoma", "Times", "Times New Roman" ;
color: black;
}
html {
background-image: url(../images/sitephotos/background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
a { text-decoration:none; }
a:link { color:#000000; }
a:visited { color:#000000; }
a:active { color:coral; }
a:focus { color:coral; }
a:hover { color:coral; }
/* text elements*/
h2 { margin-bottom: 10px; }
p { margin-bottom: 10px;
line-height: 150%;
}
/* containers*/
#outer {
width:1044px;
margin: auto;
background-color:#333;
padding: 10px 0;
}
#wrapper {
width:990px;
background-color:coral; }
#wrapper { margin: 8px auto; }
#logo {
overflow: hidden; }
#icon {
margin: 20px;
padding: 10px;
border: 5px coral solid;
}
#icon ul li {display: inline; padding: 0px 10px;}
#topnav {
font-size: 18px;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
margin: 10px 0;
padding: 5px 10px;
}
#topnav ul li {display: inline; padding: 5px 15px;}
#topnav ul li:hover { background-color: #333;}
#topnav ul li:hover a { color:red; }
#banner {
width: 980px;
height: 326px;
margin: 0 auto;
overflow: hidden;
}
#content {
padding: 10px;
}
#links {
margin: 20px;
padding: 10px;
border: 5px coral solid;
}
#links ul li {display: inline; padding: 0 53px;}
#bottomnav {
font-size: 18px;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
margin: 10px 0;
padding: 5px 10px;
}
#bottomnav ul li {display: inline; padding: 5px 15px;}
#bottomnav ul li:hover { background-color: #333;}
#bottomnav ul li:hover a: { color: coral}
#footer {
border-top: 2px #333 solid;
}
#footer p {
text-align: center;
font-style: italic;
padding: 10px 0;
}
You have no <a> tags in your menus, your selectors won't work until they're added in.
AdChoices