Jump to content
Sign in to follow this  
lodott1

Navbar dropdown menu won't center the text

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>

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...