Log in

View Full Version : Making a drop down menu


srhzaidi
04-23-2015, 10:32 AM
How should a drop down menu be brought into the center of a page, yet it should ease out to the left after the browser has been minimized. The menu has been made inside a division and it looks like something like this:


<div id="cssmenu" >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li class='active has-sub'><a href="#">Services</a>
<ul>
<li><a href="#">Services</a></li>
<li class='has-sub'>
<a href="#">Service 1</a>
<ul class='has-sub'>
<li><a href="#">A Service</a></li>
<li><a href="#">Another Service</a></li>
</ul>
</li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

The CSS file has been attached.
mlegg
04-23-2015, 02:43 PM
change the #cssmenu #cssmenu-button to this

#cssmenu #menu-button {
margin: 0 auto;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: table;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
mlegg
04-23-2015, 02:50 PM
In the <head> of your html you should add this to help with mobile friendly or smaller devices, tablets, etc

<meta name="viewport" content="width=device-width, initial-scale=1" />
Beverleyh
04-23-2015, 03:05 PM
Your CSS already includes the facility to centre the desktop menu - it looks like the relevant "align-center" class has been removed from the markup at some point, so just add it back;
<div id="cssmenu" class="align-center">