This method uses line alignment and inline-block to create a dropdown, it's 100% functional for all browsers if the dropdown links are horizontally aligned, but needs work for vertical alignment, For those who think IE6 does not support inline-block, well, it does :P
Here is a sample of what I have so far, move your mouse over the "main" link and then down.
Inline-Block Dropdown
Example
Only Firefox, IE6-7
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Inline-Block Dropdown Test</title>
<style type="text/css">
/*new method testing*/
/*does not work in IE7-8 or Opera*/
/*reset*/
#nav,
#nav ul {
padding:0;
margin:0;
}
#nav a {
color:#000;
}
/*colors*/
.main {
padding:0 50px;
background:orange;
}
.one {
padding:0 50px;
background:blue;
}
.two {
padding:0 50px;
background:green;
}
.three {
padding:0 50px;
background:purple;
}
.main:hover {
background:#ffd485;
}
.one:hover {
background:#8383ff;
}
.two:hover {
background:#3f823f;
}
.three:hover {
background:#783d78;
}
/*functionality*/
li {
display:inline;
}
#nav a {
display:inline-block;
}
#nav li a.main {
vertical-align:top;
}
#nav a:hover {
margin-top:100px;
}
#nav li a.main:hover {
vertical-align:baseline;/*for ie6*/
position:relative;
top:-100px;
}
/*horizontal to vertical*/
#nav {
float:left;
}
#nav ul {
margin-top:-100px;
}
#nav ul a {
margin-right:-300px;
position:relative;
height:25px;
line-height:25px;
}
/*dirty trick, for now*/
#nav .one {
}
#nav .two {
top:25px;
}
#nav .three {
top:50px;
}
#nav {
margin-left:300px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
</style>
<![endif]-->
</head>
<body>
<ul id="nav">
<li><a href="#main" class="box main">main</a><ul><li><a href="#1" class="one">link 1</a></li><li><a href="#2" class="two">link two</a></li><li><a href="#3" class="three">link three</a></li></ul></li>
</ul>
</body>
</html>
UPDATE
Stu Nicholls from cssplay.co.uk made this method work cross browser :Dhttp://www.cssplay.co.uk/menus/inline-dropdown.html
This is just experimentation for fun. If you have any suggestions or tips then feel free to comment.
0 comments:
Post a Comment