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:

Code:

<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

Code:

#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

Code:

<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;

Code: