Jump to content

Navbar dropdown menu won't center the text


lodott1
 Share

Recommended Posts

Hi wc3schools forum members! I have a slight issue with my newly created navbar. I can't seem to get the text on the dropdown menu centered. I want the second block in the dropdown menu, "recordings", to have centered text, so that it doesn't just align with the previous block "videos". Any suggestions? Here is my css and html so far: css:

nav ul {    width: 80%;    margin-left: auto;    margin-right: auto;    margin-top: 0;    padding: 0;    list-style: none;      background-color: #7b7b7b;    background-image: linear-gradient(#a7a7a7, #505050);    border-bottom-left-radius: 10px;    color: white;    font-family: 'Open Sans';    font-size: 14}nav ul li{    float: left;    display: inline-block;    position: relative;}nav ul a{    display: inline-table;    float: left;    padding: 1em 5em;    border-radius: 10px;}nav ul li:hover > a{    background-color: #a0bbcc;} *html nav ul li a:hover/* IE6 */{    color: #fafafa;} nav ul li:hover > ul {    display: block;} /* Sub-menu */nav ul ul {    list-style: none;    margin: 0;    padding: 0;    display: none;    position: absolute;    left: 0;    top: 100%;    width: 100%;    z-index: 99;           background-image: linear-gradient(#bfbf88, #7e7e5a);      -moz-border-radius: 10px;    border-radius: 10px;} nav ul ul li {    float: none;    margin: 0;    display: block; } nav ul ul li:last-child {     box-shadow: none;} nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;} *html nav ul ul a { /* IE6 */       height: 10px;    width: 150px;} *:first-child+html nav ul ul a { /* IE7 */        height: 10px;    width: 150px;} nav ul ul a:hover {    background-color: #0186ba;    background-image: linear-gradient(#04acec, #0186ba);} nav ul ul li:first-child a /* This controls the first dropdown menu size*/{    border-radius: 5px 5px 0 0;} nav ul ul li:first-child a:after /* This controls the triangle arrow */{    content: '';    position: absolute;    left: 30px;    top: -8px;    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 8px solid #bfbf88;} nav ul ul li:first-child a:hover:after {    border-bottom-color: #04acec; } nav ul ul li:last-child a {    border-radius: 0 0 5px 5px;} /* Clear floated elements */nav ul:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;}* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */ 

html:

<nav>    <ul>        <li><a href="#">HOME</a></li>        <li><a href="#">Read</a></li>        <li><a href="#">Listen</a>            <ul>            <li><a href="#">Videos</a></li>            <li><a href="#">Recordings</a></li>            </ul></li>        <li><a href="#">Contact</a></li>        </ul>    </nav>
Link to comment
Share on other sites

Solved it myself! Turns out the sinner was my padding in:

nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;}

I switched to padding: 1em 3em;

Turns out with padding at 5em, it pushed the "recording" to the right.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...