html - Center css navigation menu -
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu { width: auto; border-bottom: 3px solid #47c9af; font-family: raleway, sans-serif; line-height: 1; } #cssmenu ul { background: #ffffff; } #cssmenu > ul > li { float: left; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu.align-right > ul > li > { margin-right: 0; margin-left: -4px; } #cssmenu > ul > li > { z-index: 2; padding: 18px 25px 12px 25px; font-size: 15px; font-weight: 400; text-decoration: none; color: #444444; -webkit-transition: .2s ease; -moz-transition: .2s ease; -ms-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease; margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { color: #ffffff; } #cssmenu > ul > li > a:after { position: absolute; left: 0; bottom: 0; right: 0; z-index: -1; width: 100%; height: 120%; border-top-left-radius: 8px; border-top-right-radius: 8px; content: ""; -webkit-transition: .2s ease; -o-transition: .2s ease; transition: .2s ease; -webkit-transform: perspective(5px) rotatex(2deg); -webkit-transform-origin: bottom; -moz-transform: perspective(5px) rotatex(2deg); -moz-transform-origin: bottom; transform: perspective(5px) rotatex(2deg); transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after { background: #47c9af; }
<!doctype html> <html lang=''> <head> <meta charset='utf-8'> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="script.js"></script> <title>css menumaker</title> </head> <body> <center> <div id='cssmenu'> <ul> <li class='active'><a href='#'>home</a> </li> <li><a href='#'>products</a> </li> <li><a href='#'>company</a> </li> <li><a href='#'>contact</a> </li> </ul> </div> </body> <html>
it displays left, make text-align center, , display:inline it's still not displaying, , want insert in container, containers width 60% this?
i amended markup read:
<div class="container"> <div id='cssmenu'> <ul> <li class='active'><a href='#'>home</a></li> <li><a href='#'>products</a></li> <li><a href='#'>company</a></li> <li><a href='#'>contact</a></li> </ul> </div> </div>
then added new class:
.container { width: 60%; margin: 0 auto; }
Comments
Post a Comment