It seems like there might be something that I'm overlooking, as I am encountering a minor issue with this.
I am aiming to align the "submenu div" on the right side of the Show/hide links.
Initially, when I load the div, it is correctly positioned. However, when I click on the hide/show links, the div suddenly moves to the bottom.
Is there a more efficient way to achieve this layout, or is this method sufficient? Additionally, if I prefer not to show the div upon page load, would using .hide() or hidden style be appropriate?
For reference, here is an example http://jsfiddle.net/DH75T/
Thank you in advance.
CSS
div.inline2 {
display: inline-block;
width: 150px;
}
div.inline {
position:absolute;
display: inline-block;
border:1px solid #CCC;
background:#FFF;
}
JS
$(document).ready(function() {
$('a#show').click(function() {
$('div#submenu').fadeIn();
});
$('a#hide').click(function() {
$('div#submenu').fadeOut();
});
});
HTML
<div class="inline2">
<a href="#" id="show">Show_links</a>
<a href="#" id="hide">Hide links</a>
</div>
<div class="inline" id="submenu">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a>
</div>