Quote:
Originally Posted by Psionicsin
So far I'm liking it...did I do anything wrong?
|
That's looking
much better but it's still more complicated than it needs to be. I'm sure most of that comes from the template your using (hate wordpress and didn't look at that genesis framework you link to).
It looks like you use both visibility: hidden/visible
and position the dropped ul off/on the page to hide or display your ul. You don't need both. Currently,
all my examples use visibility: hidden/visible; or display: none/block; to control the dropped menu. I am moving over to positioning off the page as page readers won't see the dropped menu if it's hidden (it's a handicapped access thing).
Look at your menu like this (minus the js transition you put on the most recent version). Maybe this can be adapted to your genesis framework, maybe not. It seems much less complex...
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
html, body {
color: #333;
margin: 0;
padding: 0;
text-decoration: none;
font: 300 100%/1.5625 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#wrap {
width: 1000px;
margin: 15px auto;
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
background: #fff;
}
#header {
height: 130px;
background: url(images/bg-header.png) no-repeat top;
}
h1#title {
line-height: 75px;
margin: 0;
text-align: center;
font-size: 2em;
}
ul#nav,
ul.dropped {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav {
height: 55px;
background: url(images/bg-menu.png) repeat-y;
}
ul#nav li {
width: 135px;
padding: 0 9px 0 0;
float: left;
position: relative;
text-align: center;
}
ul#nav li.single {line-height: 55px;}
ul#nav li:last-child {padding: 0;}
ul#nav li a {
height: 55px;
width: 135px;
display: block;
}
ul.dropped {
width: 135px;
position: absolute;
top: 55px;
left: -999px;
z-index: 1;
}
ul#nav li:hover ul.dropped {
left: 0;
background: url(images/bg-menu.png) repeat-y;
}
ul#dropped li {
line-height: 55px;
width: 135px;
padding: 0;
}
#inner {
height: 400px;
padding: 0 20px;
overflow: auto;
background: #fc6;
}
a:link, a:visited {
text-decoration: none;
color: #fff;
}
a:hover, a:active {color: #f00;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="title"><a href="#">Title</a></h1>
<ul id="nav">
<li><a href="#">Company<br/>Introduction</a></li>
<li><a href="#">Product<br/>Introduction</a></li>
<li class="single"><a href="#">Chromatics</a>
<ul class="dropped">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</li>
<li class="single"><a href="#">Gallery</a></li>
<li class="single"><a href="#">Video</a></li>
<li class="single"><a href="#">References</a></li>
<li><a href="#">Customer<br/>Center</a></li>
</ul>
<!--end header--></div>
<div id="inner">
<p>
Just some stuff to show the menu drops on top of content - <br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end inner--></div>
<!--end wrap--></div>
</body>
</html>