sexshopasaszs2slwx
New Member
I am trying to make my own navigation bar to get a better understanding of to create good navigation bars. The problem that I am having is centering my navbar. Now I know that using using margin-left: auto and margin-right: auto do usually do the trick and I have used that in the past but in this case no matter where I put these style elements my navbar doesn't seem to be centered. I have my body set to 100% and have provided my code below.*Note: I have tried a container for my navbar and centering it but it still doesn't seem to work.\[code\]#navbar ul {list-style-type:none;color: #000;padding: 0px;text-align: center;}li:hover {background-color: #cc2c32;padding: 16px .1px;border-top-left-radius: 5px;border-top-right-radius: 5px;}.subcategory {display: none;width: 1031px;height: 200px;background-color: #cc2c32;color: #03F;position: absolute;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;margin-top: 15px;}li:hover .subcategory {display: block;}#navbar {border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;background-color: #dee8ff;float: left;font-family: Arial, Helvetica, sans-serif;margin-left: auto;margin-right: auto;}#navbar ul li {display: inline;}#navbar ul li a {padding: 0 1.5em;text-decoration: none;}ol {list-style-type: none;float: left;display: block;}.contentwrapper {margin-top: 10px;margin-bottom: 10px;height: 180px;width: 200px;background-color: inherit;position: relative;color: #2d4594;}a:link {color: #2d4594;text-decoration: none;}a:visited {color: #2d4594;text-decoration: none;}a:hover {color: #2d4594;text-decoration: none;}\[/code\]And my HTML is \[code\]<body><div id="navbar"> <ul> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"> <div class="contentwrapper"> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> <ol>Hey</ol> </div> </div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> <li><a href="http://stackoverflow.com/questions/12809394/#">LinkHere</a> <div class="subcategory"></div> </li> </ul> </div> </body>\[/code\]