Menu
I want to create a drop down menu (alternate to Browswer's <select> tag).
So Here I've created a <div> in another <div> to stimulate the <select>
But When I expand the dropdown <div> automatically parent <div> also expands making structure of page very dirty.
I mean, Here is output of my actual code:
When I click on Expand The Result Is:
But I want output, When I click on Expand like:
Here is My Code:
<html>
<head>
<title>Drop Down Demo</title>
<style type="text/css">
.ddown{
width:250px;
min-height: 25px;
background: #aaa;
border: 2px solid #777;
color: #444;
text-align: center;
margin: 0px;
display: inline-block;
}
.ddown a{
display: none;
width: 100%;
height: 25px;
text-align: left;
color: #666;
text-decoration: none;
background: #ddd;
border: 1px solid #999;
}
.ddownHead{
display: inline-block !important;
}
.ddownItem{
display: inline-block !important;
}
.ddownItem:hover{
background: #33a;
color: #fff;
}
.ddown_busy{
background: #77a !important;
border: 1px solid #558 !important;
color: #fff !important;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function toggle_expand_ddown(x){
if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).removeClass("ddownItem");
});
});
}
else
{
$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
$(x).closest("div").find("div").each(function(){
$(this).find("a").each(function(){
$(this).addClass("ddownItem");
});
});
}
}
</script>
</head>
<body>
<div style="width:100%;height:25px;background:#aa0;border:2px solid #770;">
<div class="ddown">
<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
<div>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
<a href="#!">Item 1</a>
</div>
</div>
This is Another Child in same Parent
</div>
</body>
</html>
I've Also Created Fiddle
Here.I think It is Because of CSS only. But However Any suggestions are welcome.Hope You'll Help me Soon.
396
asked Dec 06 '25 14:12
I think you are having problem with opening and closing <div> tags
I tried to add a <div> tag to the another child and this **css**:
.div2{
display: inline-block;
position: absolute;
}
FIDDLE DEMO
or this without using position absolute by adding this css to your main div:
overflow: visible;
vertical-align: top;
FIDDLE DEMO 2
or by adding float:left to the .ddown css
FIDDLE DEMO 3
PS: I think option 1 is a better practice, you'll just have to put every child in a <div> tag
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
