Looking for a drop down menu box like Google or Facebook

In that case my code will not work. You will need a heavily styled select menu or some very creative css. I don't know how you would trigger something onclick with css though so a select box might be the way to go.

 

I will use normal HTML or If I need javascripts for link I can use that but the first thing it's layout which is not looking good atm

 

Yeah, I didn't use any images or anything. Just got the functionality working for you. You'll have to style it to your preference. Might want to start with making an image in photoshop of how you want it to look. If you don't have photoshop you can use GIMP too (free).

 

I want the same style as Google same to same

 

Hey good news I fixed it there is one problem it's not disappearing when i click outside the drop down box.

 

Replace this:

<script type="text/javascript">
$(document).ready(function() {
    $('#settingsBar').children('ul').children().each(function(index, value) {
        $(this).click(function() {
            var ul = $('ul', this);
            if (ul.is(':visible')) {
                $(this).removeClass('selected');
                ul.hide();
            } else {
                $(this).closest('ul').find('ul').each(function(i,v) {
                    $(this).parent().removeClass('selected');
                    $(this).hide();
                });
                
                $(this).addClass('selected');
                ul.show();
            }
        });
    });
});
</script>

HTML:

With this;

<script type="text/javascript">
$(document).ready(function() {
    $('html').click(function() {
        $('settingsBar').children('ul').children().hide();
    });

     $('#settingsBar').click(function(event){
         event.stopPropagation();
     });

    $('#settingsBar').children('ul').children().each(function(index, value) {
        $(this).click(function() {
            var ul = $('ul', this);
            if (ul.is(':visible')) {
                $(this).removeClass('selected');
                ul.hide();
            } else {
                $(this).closest('ul').find('ul').each(function(i,v) {
                    $(this).parent().removeClass('selected');
                    $(this).hide();
                });
                
                $(this).addClass('selected');
                ul.show();
            }
        });
    });
});
</script>

HTML:

I didn't get the chance to test, but that should fix the issue.

 

check this if, it will work for you.

http://lwis.net/free-css-drop-down-menu/

 

Still not working did you test yourself

 

Like I said, didn't get the chance to test it. Made a stupid mistake. Try this instead:

<script type="text/javascript">
$(document).ready(function() {
    $('html').click(function() {
        $('#settingsBar').children('ul').children().each(function(index, value) {
			$(this).removeClass('selected');
			$('ul', this).hide();
		});
    });
	
	$('#settingsBar ul').click(function(event){
		event.stopPropagation();
	});

    $('#settingsBar').children('ul').children().each(function(index, value) {
        $(this).click(function() {
            var ul = $('ul', this);
            if (ul.is(':visible')) {
                $(this).removeClass('selected');
                ul.hide();
            } else {
                $(this).closest('ul').find('ul').each(function(i,v) {
                    $(this).parent().removeClass('selected');
                    $(this).hide();
                });
               
                $(this).addClass('selected');
                ul.show();
            }
        });
    });
});
</script>

HTML:

 

Yes Working fine now thanks man

 

No problem. Good luck with the styling