Hey all, found this website when searching for an answer to an earlier question I had when I discovered I had a bigger problem at hand.
As the title suggests, I'm doing a learning exercise with horizontal navigation menu bars which contain multiple column sub-menus. This is in response to a high amount of information being accessed from the main page rather than a series of sub-pages. My problem comes when trying to make the sub-menu work for more than 1 button of the nav bar.
Summary of setup:
I created a smaller div to house each column inside a container div for each sub-menu. Thus, 1 sub-menu has up to 5 smaller div's in it to create the column effect. My problem was realized when I tried to display this div from each list, finding it off center or misaligned.
I'm unsure if this is even the correct path towards accomplishing this task but I'm open to all suggestions and corrections. I appreciate your time and help.
and the stylesheet
THANKS!
As the title suggests, I'm doing a learning exercise with horizontal navigation menu bars which contain multiple column sub-menus. This is in response to a high amount of information being accessed from the main page rather than a series of sub-pages. My problem comes when trying to make the sub-menu work for more than 1 button of the nav bar.
Summary of setup:
I created a smaller div to house each column inside a container div for each sub-menu. Thus, 1 sub-menu has up to 5 smaller div's in it to create the column effect. My problem was realized when I tried to display this div from each list, finding it off center or misaligned.
I'm unsure if this is even the correct path towards accomplishing this task but I'm open to all suggestions and corrections. I appreciate your time and help.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Travis' Homepage</title>
<link rel="stylesheet" href="styles/stylesheet.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Social Networking</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forums</a>
<div class="subnav-container">
<div class="subnav">
<h3>Anything Based forums</h3>
<ul>
<li>
<a href="#">General [M]ayhem Forums</a>
</li>
</ul>
</div>
<div class="subnav">
<h3>Car Based</h3>
<ul>
<li><a href="#">502 Street Scene</a></li>
<li><a href="#">Louisville Streets</a></li>
<li><a href="#">Cincinatti Street Scene</a></li>
<li><a href="#">VW Vortex</a></li>
<li><a href="#">3000GT/Stealth International</a></li>
<li><a href="#">Fourtitude</a></li>
<li><a href="#">502 Underground</a></li>
<li><a href="#">DSM Talk Forums</a></li>
<li><a href="#">DSM Tuners Forums</a></li>
<li><a href="#">DSM Link forums</a></li>
</ul>
</div>
<div class="subnav">
<h3>Computer</h3>
<ul>
<li><a href="#">2 CPU Forums</a></li>
<li><a href="#">ALR Revolution 6x6 Website/Forum</a></li>
<li><a href="#">[H]ard | Forum</a></li>
<li><a href="#">Real Red Raider Forum</a></li>
<li><a href="#">Xtreme Systems Forums</a></li>
<li><a href="#">Maximum PC Forums</a></li>
<li><a href="#">Overclock.net Forums</a></li>
</ul>
</div>
<div class="subnav">
<h3>Video Game</h3>
<ul>
<li><a href="#">Gran Turismo Planet(GTP)</a></li>
<li><a href="#">Gameshark/Sharkport</a></li>
<li><a href="#">Forza Central</a></li>
<li><a href="#">[H]ard | Gaming</a></li>
<li><a href="#">Clan Riot Squad [RS]</a></li>
<li><a href="#">Netcode Illuminati</a></li>
<li><a href="#">TC Admin</a></li>
<li><a href="#">GSP Talk</a></li>
</ul>
</div>
<div class="subnav">
<h3>R/C Car Based</h3>
<ul>
<li><a href="#">The Starting Grid</a></li>
<li><a href="#">Xtreme R/C Cars</a></li>
<li><a href="#">Traxxas</a></li>
<li><a href="#">RC Universe</a></li>
<li><a href="#">R/C Tech</a></li>
<li><a href="#">Ofna Back Talk</a></li>
<li><a href="#">Beat Your Truck</a></li>
<li><a href="#">Unlimited Engineering</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Hosting</a></li>
<li><a href="#">P. Sites</a></li>
</ul>
</div>
</div>
<div class="footer">
Created by <a href="#">ME!</a>
</div>
</div>
</body>
</html>and the stylesheet
HTML:
html, body {
margin:0;
padding:0;
background:#555555;
font:12px Verdana, Sans-serif;
}
.container{
width:960px;
margin:20px auto 0;
text-align:center;
}
.header .topnav{
display:inline-block;
margin:10px 0 0 0;
font: bold 12px Verdana, Sans-serif;
}
.header .topnav ul{
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
display:block;
text-align:center;
position:relative;
}
.header .topnav ul li {
display:block;
float:left;
position:relative;
}
.header .topnav ul li a {
display:block;
float: left;
padding: 10px 20px;
text-decoration:none;
color:#777;
box-shadow: 0 0 3px black;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#d9d9d9));
}
.header .topnav ul li a:hover,
.header .topnav ul li:hover > a {
color: #ac0000;
}
.subnav-container{
position:absolute;
top:100%;
left:-999em;
z-index:99;
width:960px;
background:#919191;
}
.subnav-container .subnav{
float:left;
width:192px;
}
.subnav-container .subnav h3{
font-size:10px;
}
.subnav-container .subnav ul{
}
.subnav-container .subnav ul li a{
width:150px;
background:none;
color:black;
border:none;
box-shadow:none;
}
.header .topnav ul li:hover .subnav-container{
clear:both;
left:-505px;
}THANKS!
. PM if you need more help, or others here will definitely have input. So without further adieu...