html - CSS dropdown navigation -
i have css dropdown menu. want homepage start on left side of page, not on center. herein style sheet , div tags dropdown navigation bar:
ul, li, html, { margin:0; padding: 0; } body { text-align: center; margin: 0 auto; padding: 0; font: 65% arial, sans-serif; } li { list-style-type: none; } { text-decoration: none; color: #034af3; } ul#nav { width: 22.5em; height:2.5em; margin: 2em auto 0; font-size: 1.5em; } ul#nav li { position: relative; float: left; width: 5em; height: 2em; line-height: 2em; background-color: #465c71; display: block; padding: 4px 0px; border-right: 1px #4e667d solid; color: #dde4ec; } ul#nav li.noborder { border-right: none; } ul#nav li:hover { background-color: silver; } ul#nav li { display: block; float: left; width: 100%; } ul#nav li ul { display: none; } ul#nav li:hover ul { display: inline; float: left; width: 10em; height: auto; margin: 0; padding: 0.27em; font-size: 1em; text-align: left; } ul#nav li:hover ul li { width: 100%; height: 2em; background-color: yellow; border: none; border-bottom: 1px solid silver; overflow: hidden; } ul#nav li:hover ul li { display: block; margin: 0; padding: 0 0 0 .3em; height: 100%; line-height:2em; color: #465c71; } ul#nav li:hover ul li a:hover { background-color: white; }
<div style="background:#3a4f63;"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">abour</a> <ul> <li><a href="#">about 1</a></li> <li><a href="#">about 2</a></li> <li><a href="#">about 3</a></li> <li class="noborder"><a href="#">about 4</a></li> </ul> </li> <li><a href="#">blog</a> <ul> <li><a href="#">about 1</a></li> <li><a href="#">about 2</a></li> <li><a href="#">about 3</a></li> <li class="noborder"><a href="#">about 4</a></li> </ul> </li> <li class="noborder"><a href="#">contact</a></li> </ul> </div>
try:
body { text-align: left; } ul#nav { margin: 2em 0 0; }
Comments
Post a Comment