Results 1 to 3 of 3

Thread: Center Menu Text

  1. #1
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Center Menu Text

    I am using the menu from this page:

    http://www.dynamicdrive.com/style/cs...rop_line_menu/

    I need to center the text of the horizontal sub menu and cannot get this to work. When I add a sub menu the text is placed to the left with a long menu bar full of space the width of my page. I know it's something simple I am overlooking...ugh....

    Here is my CSS code for the menu:
    Code:
    .droplinebar{
    	overflow: hidden;
    	height: 38px;
    	background-image: url(images/navbar.gif);
    	background-repeat: no-repeat;
    }
    
    .droplinebar ul{
    margin: 0 auto;
    padding: 0;
    width: 92%;
    font: 15px Georgia;
    background: center center repeat-x; /*default background of menu bar*/
    height: 38px;
    }
    
    .droplinebar ul li{
    display: inline;
    }
    
    .droplinebar ul li a{
    float: left;
    color: white;
    padding: 10px 40px;
    text-decoration: none;
    }
    
    .droplinebar ul li a:visited{
    color: white;
    }
    
    .droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
    color: white;
    background: transparent url(images/navhover.gif) center center repeat-x;
    }
    
    /* Sub level menus*/
    .droplinebar ul li ul{
    position: absolute;
    z-index: 200;
    left: 0;
    top: 0;
    background: url(images/navhoverblack.png); /*sub menu background color */
    visibility: hidden;
    }
    
    /* Sub level menu links style */
    .droplinebar ul li ul li a{
    font: normal 15px Georgia;
    padding: 10px;
    padding-right: 20px;
    margin-left: 20px;
    }
    
    .droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
    background: transparent url(images/navhover.gif) center center repeat-x;
    }

  2. #2
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    Did you try
    Code:
    text-align:center;
    in your /* Sub level menu links style */?

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes I tried that and the sub menu text is still aligned to the left. With five or six menu titles it doesn't look so bad. When there are only two menu titles it looks quite odd having the two menu titles all the way to the left.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •