Forum Moderators: not2easy
<html>
<head>
<style type="text/css">
.arrow { width:7px; }
.arrow li { border-bottom:1px solid gray; margin:0 auto 0 auto;}
.a1 { width:7px; }
.a2 { width:5px; }
.a3 { width:3px; }
.a4 { width:1px; }
.dropdown {
float:left;
cursor:pointer;
margin-left:20px;
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
}
.dropdown ul {
list-style:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.dropdown .container {
position:relative;
float:left;
}
.dropdown .title {
color:#6b6b6b;
margin:5px 7px 0 0;
font-size:0.63em;
float:left;
}
.dropdown .button {
height:20px;
font-size:0.69em;
border-bottom:1px solid #b4b4b4;
background-color:#ededed;
float:left;
}
.dropdown .current {
float:left;
font-weight:bold;
padding:3px 7px 3px 7px;
}
.dropdown .divider {
height:60%;
margin-top:4px;
float:left;
border-left:1px solid #ccc;
}
.dropdown .tab {
height:100%;
padding:0 6px 0 4px;
float:left;
}
.dropdown .arrow {
margin-top:8px;
float:left;
}
.dropdown .items {
position:absolute;
top:20px;
left:0px;
z-index:100;
background-color:white;
font-size:0.63em;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
.dropdown .items li {
border-top:1px solid #ccc;
padding:5px;
cursor:pointer;
}
.dropdown .items li:hover {
background-color:#f4f4f4;
}
</style>
</head>
<body>
<div class="dropdown">
<span class="title">media</span>
<div class="container">
<div class="button">
<div class="current">All</div>
<div class="divider"></div>
<div class="tab">
<ul class="arrow"><li class="a1"></li><li class="a2"></li><li class="a3"></li><li class="a4"></li></ul>
</div>
</div>
<ul class="items">
<li><a href="">Audio</a></li>
<li><a href="">Images</a></li>
<li><a href="">Text</a></li>
<li><a href="">Video</a></li>
<li><a href="">This should cause expansion</a></li>
</ul>
</div>
</div>
</body>
</html>
ps love the drop down triangle.
edit don't know if you know but the triangle doesn't show in IE6.
EDIT:
When I isolate just the arrow code out in IE6 it looks like there's a great deal of space between the <li> even though I've try specifying 0px margins and paddings. Grrr.
You can see what's happening to the triangle
The li has a height/padding/margin/something :p.
Not sure on a fix, tried a few random things but no luck. If you find it post.
edit great minds eh ;)
<style type="text/css" media="screen">
.tab {
height: 20px;
float: left;
background: #cfc;
}.arrow{
width: 0;
font-size: 0;
border-style: solid;
}.s {
border-width: 7px 6px 0 6px;
border-color: #000 #fff #fff #fff;
margin: 6px 0 0 4px;
}.e {
border-width: 6px 0 6px 7px;
border-color: #fff #fff #fff #000;
margin: 2px 0 0 6px;
}</style>
</head>
<body>
<div class="tab"><div class="arrow s"></div></div>
<div class="tab"><div class="arrow e"></div></div>
if you make all the borders the same width but different colors, you should see what the above is trying to do, my code is not great, but is just an idea to play around with perhaps..
