Hello, I am trying to figure out how to create a drop down menu similar to http://mlb.com and http://www.baseballhq.com/. Of course I have my main menu set up, I just need help getting it to drop down in full width like the examples. I would prefer if this can be done in full CSS. Can anyone help out or point me in the right direction? Thank you! 
Take a look at this link.
http://www.visibilityinherit.com/code/mega-drop-down.php
It can get you started in the right direction :). It can surely be done in pure CSS/HTML. If you have any issues while recreating the menu, feel free to give us a shout.
Thanks Ryan for the help. I am stuck on one specific area. The drop down works, however, like in the demo, the submenu div nudges against the current li instead of just forcing against the left side of my wrapper. This is to produce the full width of the submenu div. Now the only thing I can think of that could work is manually creating a class for each submenu the div uses with the appropriate left:-xxxpx; code.
Let me know if there is an easier way or not.
ul#mega li {
list-style:none;
float:left;
padding:10px 20px;
font-size:16px;
margin-top:8px;
position:relative;
}
#mega a li {
color:white;
}
#mega a:hover li:hover {
color:#061C39;
background:white;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
#mega li:hover div {
left:auto;
top:35px;
float:left;
}
#mega a div {
background: none repeat scroll 0 0 #ccc;
font-weight: normal;
left: -999em;
margin-top: 1px;
padding: 0 10px 10px;
position: absolute;
text-align: left;
width: 1060px;
}
<ul id="mega">
<a href="#"><li>Stuff 1
<div>
stuff
</div>
</li></a>
<a href="#"><li>Stuff 2</li></a>
<a href="#"><li>Stuff 3</li></a>
</ul>
Your HTML code is not legal. Run it through the validator.w3.org to see.
Once it’s valid, then it’s time to try CSS-ing it. CSS depends on good HTML if you need it to work in ALL browsers.
As Stomme says it’s invalid :). In the link I give, the author of that article gives pretty clear HTML you can copy. All you need to do is really just change the anchors href and the text that gets displayed on screen :). Everything else can stay the same.
The only thing invalid is I didn’t provide a doctype.
Secondly, what you said doesn’t help the fact that I need the sub div to be 100% width of the entire wrapper, not just the content inside it…
There is no avoiding that this is invalid
<ul id="mega">
<a href="#"><li>Stuff 1
<div>
stuff
</div>
</li></a>
<a href="#"><li>Stuff 2</li></a>
<a href="#"><li>Stuff 3</li></a>
</ul>
There is no point in trying to deny that :). For multiple reasons it’s invalid.
- Anchors can’t wrap around block elements like <li>
- Only direct children of <ul> can be <li>
The 100% width of entire wrapper isn’t an issue. You just need to set the position:relative (instead of on the top level <li>) on the outer wrapper so the width/position is based off that. We can go from there.
Still stuck guys. Here’s my latest code. Any help or suggestions?
ul#mega li {
list-style:none;
float:left;
padding:10px 20px;
font-size:16px;
margin-top:8px;
position:relative;
}
#mega li a {
color:white;
}
#mega li:hover {
color:#061C39;
background:white;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
font-size:16px;
}
#mega li:hover a {
color:#061C39;
}
#mega li:hover div {
left:0;
top:35px;
position:absolute;
}
#mega div {
background: none repeat scroll 0 0 #ccc;
font-weight: normal;
left: -999em;
margin-top: 1px;
padding: 0 10px 10px;
position: absolute;
text-align: left;
width: 1060px;
}
<ul id="mega">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Reviews</a>
<div>
stuff
</div>
</li>
</ul>
Move the position;relative to #mega. That way the stacking context starts there :). I stated this in my last post (though I didn’t have the HTML to accordingly tell you which element to put it on)
Okay, I did what you said but the div still nudges against the current li hovered and not the wrapper.
What do you mean nudges? Due to the position:relative move, it’s basing the positioning off the wrappers width/height instead of the <li>'s.
Can you provide a picture of what end result you want? Your dropdown div is set to a specific width and is going that far out. Do you mean the dropdown is overlapping the top level <li>'s…? You set top:35px (not enough)…
Just shooting in the dark…
In the above example you can see what I am talking about.
Here is my entire code.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #333333;
font-family: Droid Sans,Arial,Verdana,sans-serif;
font-size: 14px;
line-height:1.3em;
background:#d5d5d5;
}
a, a:visited {
color:#225DB7;
text-decoration:none;
}
header {
clear: both;
height:45px;
margin: 0 auto;
position: relative;
text-align: left;
background: #061C39;
/*-webkit-box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 1.0);
-moz-box-shadow: 0px 0px 10px 0px rgba(25, 25, 25, 1.0);
box-shadow: 0px 0px 10px 1px rgba(25, 25, 25, 1.0); */
z-index:25;
}
#head-wrap {
width:1060px;
margin:0 auto;
position:relative;
}
#head-wrap .logo {
width:133px;
height:45px;
float:left;
margin-right:20px;
}
#mega {
position:relative;
}
ul#mega li {
list-style:none;
float:left;
padding:10px 20px;
font-size:16px;
margin-top:8px;
position:relative;
}
#mega li a {
color:white;
}
#mega li:hover {
color:#061C39;
background:white;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
font-size:16px;
}
#mega li:hover a {
color:#061C39;
}
#mega li:hover div {
left:0;
top:36px;
position:absolute;
}
#mega div {
background: none repeat scroll 0 0 #ccc;
font-weight: normal;
left: -999em;
margin-top: 1px;
padding: 0 10px 10px;
position: absolute;
text-align: left;
width: 1060px;
}
#page-wrapper {
clear: both;
margin: 0 auto;
position: relative;
text-align: left;
width: 1060px;
background:white;
min-height:800px;
-webkit-box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
-moz-box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
z-index:5;
}
#page-wrapper h1 {
font-size: 14px;
padding:6px;
background:#e9e9e9;
color:#313131;
border-bottom:1px solid #d3d3d3;
}
footer {
clear: both;
margin: 0 auto;
position: relative;
text-align: left;
width: 1060px;
background: rgb(51,51,51); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(51,51,51,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); /* IE6-8 */
height:200px;
color:white;
-webkit-box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
-moz-box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
box-shadow: 0px 0px 50px 0px rgba(25, 25, 25, 0.5);
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="head-wrap">
<div class="logo"><img src="images/logo.png" width="133" height="45"></div>
<ul id="mega">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Reviews</a>
<div>
stuff
</div>
</li>
<li><a href="#">Previews</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Game Database</a></li>
<li><a href="#">Online Leagues</a></li>
<li><a href="#">Site Info</a></li>
</ul>
</div>
</header>
<div id="page-wrapper">
<p>Testing the text out</p>
<p><a href="#">Testing links out</a></p>
</div>
<footer>footer</footer>
</body>
</html>
You may have given #mega position:relative, however you DIDN’T remove it from the <li>'s which is a huge factor. It won’t base it off #mega if an earlier parent has a stacking context set such as position:relative!
Simply removing the position:relative from the <li>'s gave me this effect. Good?
Perfect. I got the rest figured out. Thanks again for your patience Ryan. Much appreciated!
Got there in the end, and that’s all that matters ;).
You’re welcome.