Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Prevent style change on root of dropdown

    Hey everyone,

    I have a CSS dropdown menu using the following code. My only issue is, when any of the sub-headers are hovered the root title becomes left aligned. How can I ensure it stays centred while keeping all others left aligned?

    Thanks:

    CSS:
    Code:
    ul {
      font-family: 'Actor', sans-serif;
      font-size: 15px;
      margin: 0;
      padding: 0;
      list-style: none;
      z-index:20;
    }
    ul li {
      display: block;
      position: relative;
      z-index:20;
    }
    li ul { display: none; }
    ul li a {
      clear: none;
    		display:block;
    		padding:4px;
    		color: #000;
    		text-align:center;
    		text-decoration:none;
    		font-size:15px;
    		font-family: 'Actor', sans-serif;
      white-space: nowrap;
      z-index:20;
    }
    ul li a:hover { background: #dc0111; text-align:center;}
    li:hover ul {
      display: block;
      position: absolute;
      z-index:20;
    }
    li:hover li {
      float: none;
      font-size: 11px;
      text-align:center;
      z-index:20;
    }
    li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    li:hover li a:hover { background: #fff; color:#000; text-align:left;}
    Body:
    Code:
    <ul id="menu">
                            	<li><a href="games.php">GAMES</a>
                                	<ul>
                                    	<li><a href="link.com" target="_blank">Link01</a></li>
                                        <li><a href="link.com" target="_blank">Link02</a></li>
                                        <li><a href="link.com" target="_blank">Link03</a></li>
                                        <li><a href="link.com" target="_blank">Link04</a></li>
                                        <li><a href="link.com" target="_blank">Link05</a></li>
                                    </ul>
                                </li>
                            </ul>

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Code:
    li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    In this part of the code, you are saying that ALL li:hover a should be text-aligned left.

    And since your submenus are all contained in the li, everything will be aligned left. You need to change the code above to get more specific:

    Code:
    li:hover a {background: #dc0111; color: #fff; }
    li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    Code:
    li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    In this part of the code, you are saying that ALL li:hover a should be text-aligned left.

    And since your submenus are all contained in the li, everything will be aligned left. You need to change the code above to get more specific:

    Code:
    li:hover a {background: #dc0111; color: #fff; }
    li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    Hey, thanks for the reply. So are you saying I should directly swap:
    Code:
    li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    for:
    Code:
    li:hover a {background: #dc0111; color: #fff; }
    li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    [/QUOTE]

    If so I tried this and its not made any difference :-\
    Any other ideas?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Problem solved, I simply swapped that last bit for the following:

    Code:
    li:hover a {background: #dc0111; color: #fff; }
    li ul li:hover a { background: #dc0111; color:#FFF; text-align:left;}
    li:hover li a { background: #dc0111; color:#FFF; text-align:left;}
    li:hover li a:hover { background: #fff; color:#000; text-align:left;}
    Thanks for your help


  •  

    Posting Permissions

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