html - How to center align CSS navigation menu? -
can please me? i'm trying center navigation menu. have tried different things, nothing works, , don't know do. appreciate help. in advance!
nav { display: inline-block; list-style-type: none; float: left; width: 100%; height: 102px; text-align: center; } nav > ul { float:right; width:100%; height:102px; background:#222; border-radius: 10px 10px 0px 0px; } nav > ul > li { float:left; width:auto; margin-right:10px; line-height:102px; } nav > ul li { padding:50px; color:white; font-family:helvetica, sans-serif; } nav > ul > li > ul { background:#222; opacity:0; transition:opacity 1s; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; -ms-transition:opacity 1s; border-radius: 0px 0px 10px 10px; } nav > ul > li:hover > ul { opacity:1; }
html
<div> <nav> <ul> <li> <a href="#">hjem</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">bilder</a></li> <li><a href="#">video</a></li> <li><a href="#">design</a></li> </ul> </nav> </div>
here did.
#outer{ width:100%; height: 102px; text-align: center; background:#222; border-radius: 10px 10px 0px 0px; } nav { display: inline-block; list-style-type: none; margin: 0 auto; } nav > ul > li { float:left; width:auto; margin-right:10px; line-height:102px; } nav > ul li { padding:50px; color:white; font-family:helvetica, sans-serif; } nav > ul > li > ul { background:#222; opacity:0; transition:opacity 1s; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; -ms-transition:opacity 1s; border-radius: 0px 0px 10px 10px; } nav > ul > li:hover > ul { opacity:1; }
and need give id div.
<div id="outer">
Comments
Post a Comment