I have two navigation menus...vertical and horizontal. I need different background colors for them. I can't seem to get the background color for the vertical navigation menu. Any help would be appreciated. Thank you.
Printable View
I have two navigation menus...vertical and horizontal. I need different background colors for them. I can't seem to get the background color for the vertical navigation menu. Any help would be appreciated. Thank you.
Can you post a link or code?
<body>Quote:
Originally Posted by cbVision
<header>
<h1><img src="mwulogo.png" alt="Midwest University" /></h1>
</header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li><a href="#">The Road to War</a>
<ol>
<li><a href="#">Planting the Seeds</a></li>
<li><a href="#">The First Crisis</a></li>
<li><a href="#">Compromise & Failure</a></li>
<li><a href="#">Fault Lines</a></li>
</ol>
</li>
<li><a href="#">Politicians & Generals</a>
<ol>
<li><a href="#">Politicians</a></li>
<li><a href="#">Generals</a></li>
</ol>
</li>
<li><a href="#">The Course of War</a>
<ol>
<li><a href="#">1861-1862</a></li>
<li><a href="#">1863</a></li>
<li><a href="#">1864-1865</a></li>
</ol>
</li>
<li><a href="#">Aftermath</a>
<ol>
<li><a href="#">Lincoln Assassination</a></li>
<li><a href="#">Reconstruction</a></li>
<li><a href="#">A New Constitution</a></li>
<li><a href="#">The United States Is ...</a></li>
</ol>
</li>
</ol>
</nav>
/* Navigation list styles */
nav ul {
font-famiy: Century Gothic MS, sans-serif;
font-size: 14 px;
font-weight: bold;
letter-spacing: 3 px;
line-height: 20 px;
}
nav ul li a {
text-decoration: none;
}
li a:hover {
color: hsl(212, 100%, 29%);
}
They both look vertical using that code:
http://jsfiddle.net/DECWs/
Also, you don't have background defined at all.
I added two lines for backgound color seen here:
http://jsfiddle.net/DECWs/1/
I need to set the background color to the vertical navigation section to hsl(32, 100%, 95%)
This is the CSS from the cw_layout
nav.horizontal ul {
display: block;
width: 950px;
height: 20px;
}
nav.horizontal ul li {
display: block;
float: left;
text-align: center;
width: 150px;
}
nav.vertical {
clear: left;
float: left;
margin-right: 0px;
width: 300px;
}
I have fixed it, but the color doesn't match up with my assignment...it looks white on the computer, but the book color looks tan.
