1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS hover question

Discussion in 'CSS' started by j_o, Oct 31, 2011.

  1. #1
    Hi Everyone,

    I have a horizontal menu bar that shows a tab behind the text of each element. To do this I used a <ul> list and for each 'tab' i used three <li> tags.
    1)Left imgage
    2)Middle Image (goes behind text and is repeating)
    3)Right image

    I want to make it so if any of these elements are hovered then each of these <li> tags will have a different background. I have my page setup so that the page currently being viewed is the only one with all three tags. Other ones are just normal <li> tags with no background on them.

    Below is my CSS:

    
    #nav{
    	float:right;
    	width:100%;
    	overflow:hidden;
    	position:relative;
    	height: 25px;
    }
    #nav ul {
       clear:left;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       left:50%;
       text-align:center;
       height:25px;
    }
    
    #nav ul li {
       display:block;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       right:50%;
       height:25px;
    }
    #nav ul li.middle {
       display:block;
       float:left;
       list-style:none;
       margin:0;
       padding:0;
       position:relative;
       right:50%;
       height:25px;
       background: url(../img/nav_m.png) repeat-x 0 0;
    }
    #nav ul li.left {
      	background: url(../img/nav_l.png) no-repeat left 0;
      	height: 25px;
    	width: 18px;
    	padding: 0;
    	margin: 0;
      	display: block;
    	float: left;
    }
    
    #nav ul li.right {
      	background:url(../img/nav_r.png) no-repeat left 0;
      	height: 25px;
    	width: 18px;
    	padding: 0;
    	margin: 0;
      	display: block;
    	float: left;
    }
    #nav ul li.space {
      	height: 25px;
    	width: 8px;
    	padding: 0;
    	margin: 0;
      	display: block;
    	float: left;
    	background:none;
    }
    #nav ul li a {	
       display:block;
       margin:0 0 0 1px;
       padding:3px 10px;
       color:#ccc;
       text-decoration:none;
       line-height:1.3em;
       font-weight:bold;
       text-decoration:none;
       font-family: "Bank Gothic", Sans-Serif;
       text-transform: uppercase;
    }
    
    Code (markup):
    And here is my code for the actual nav bar. I have converted it from php to make it easier to read. Normally php is used to decide which page is being viewed and then it adds the extra two elements if needed (The left and right class elements along with assigning the class middle to the element with the link). For this instance I made the code as if the home page was being viewed.

    
    <ul>
    	<li class="left">&nbsp;</li>
            <li class="middle"><a href="index.php">Home</a></li>
    	<li class="right">&nbsp;</li>
    
    	<li class="space">&nbsp;</li>
    
            <li><a href="#">History</a></li>
    </ul>
    
    Code (markup):
    As you can probably guess this list is in a div called nav. I also shortened the list to make it a little easier to read.


    Thanks in advance for any help.
     
    Solved! View solution.
    Last edited: Oct 31, 2011
    j_o, Oct 31, 2011 IP
  2. #2
    :hover
    You need to declare a hover state for your menu items.

    #nav ul li:hover
    I think you're going to run into trouble however because of how your tabs are being build. You're best to put each tab in a DIV.
    Most menus are written: <ul><li><a> menu item </a></li> <li><a> next menu item </a></li> etc...
    Therefore creating a hover state is a general style for anything hovering over a <li>.
    You have three <li> tags making up one menu item, and they aren't consistent.
    You might try instead:
    <ul>
    <li><a><div class="tab_container"><div class="left"></div><div class="menu_item">MENU ITEM1</div></div></a></li>
    <li><a><div class="tab_container"><div class="left"></div><div class="menu_item">MENU ITEM2</div></div></a></li>
    </ul>

    Then you can target the <li> for the hover, and call to each <div> for the changed background.
    nav ul li:hover a div.tab_container
    nav ul li:hover a div.tab_container div.left
    nav ul li:hover a div.tab_container div.menu_item
     
    xira, Nov 1, 2011 IP
    j_o likes this.
  3. j_o

    j_o Well-Known Member

    Messages:
    516
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    113
    #3
    Thanks xira, that worked perfectly. The divs were definitely a better way of doing it than my previous attempts.
     
    j_o, Nov 1, 2011 IP