-
1 Attachment(s)
Making a drop down menu
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.
-
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;
}
-
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" />
-
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:
<div id="cssmenu" class="align-center">
