www.webdeveloper.com
Results 1 to 2 of 2

Thread: Hover CSS

  1. #1
    Join Date
    Jun 2011
    Posts
    64

    Question Hover CSS

    I have a CSS drop down menu and I want it so that when you hover over the drop down items the original main menu item changes back to the original color. How can I do this. At the moment when I hover over the top items the background color turn orange and the same when I then hover over a drop down item but the background color on the top item stays orange when it's supposed to go back to the original color...

    Code:
    <div id="navigation"><!-- Navigation Bar Start -->
    
    
    	
        
        <div class="navMenu">
    		<ul>
    			<li id="left"><a href="index.html">Home</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li id="middle"><a href="http://about.me/thomashochkins">About</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li class="outer" id="middle"><a href="gallery.html">Gallery</a>
    				<ul>
    					<li class="inner" id="innermiddle"><a href="download.html">Download</a></li>
    					<li class="inner" id="innermiddlebottom"><a href="photos.html">Photos</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    	<div class="navMenu">
    		<ul>
    			<li id="middle"><a href="videos.html">Videos</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    
    
    	<div class="navMenu">
    		<ul>
    			<li id="middle"><a href="contact.html">Contact</a>
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
        
        <div class="navMenu">
    		<ul>
    			<li id="right">
    				<ul>
    					<li></li>
    					<li></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
       <br class="clearFloat" />
    </div>
    Code:
    .navMenu {
    	margin-top:20px;
    	margin-left:60px;
    	margin-right:60px;
    	padding:0;
    }
    
    .navMenu ul {
    	margin:0;
    	padding:0;
    	line-height:40px;
    }
    
    .navMenu li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	float:left;
    	position:relative;
    	background-color:#E8E8E8;
    }
    
    
    .navMenu .inner {
    	background-color:#E8E8E8;
    	display:block;
    	width:200px;
    }
    
    .navMenu ul li a {
    	text-align:center;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	text-decoration:none;
    	text-shadow:#FFF 2px 2px 3px;
    	width:75px;
    	height:40px;
    	display:block;
    	color:#464646;
    }
    
    .navMenu ul ul {
    	position:absolute;
    	visibility:hidden;
    	top:20px;
    }
    
    .navMenu ul li:hover ul {
    	visibility:visible;
    	margin-top:20px;
    }
    
    .navMenu li:hover {
    	background-color:#E56500;
    }
    
    .navMenu ul li:hover ul li a:hover {
    	color:#FFF;
    	text-shadow:none;
    	text-decoration:none;
    	width:193px;
    	text-align:left;
    }
    
    .navMenu a:hover {
    	color:#FFF;
    	text-decoration:none;
    	text-shadow:none;
    }
    
    .navMenu ul li:hover a {
    	color:#FFF;
    	text-shadow:none;
    }
    
    .navMenu ul li:hover li a {
    	width:193px;
    	color:#464646;
    	border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    	text-shadow:#FFF 2px 2px 3px;
    } 
    
    .edge {
    	background-color:#E56500;
    	width:480px;
    }
    
    #right {
    	-webkit-border-top-right-radius:5px;
    	-webkit-border-bottom-right-radius:5px;
    	-moz-border-top-right-radius:5px;
    	-moz-border-bottom-right-radius:5px;
    	border-top-right-radius:5px;
    	border-bottom-right-radius:5px;
    	border-right:1px solid #D5D5D5;
    	border-top:1px solid #D5D5D5;
    	border-bottom:1px solid #D5D5D5;
    	width:300px;
    	height:40px;
    }
    
    #left {
    	-webkit-border-top-left-radius:5px;
    	-webkit-border-bottom-left-radius:5px;
    	-moz-border-top-left-radius:5px;
    	-moz-border-bottom-left-radius:5px;
    	border-top-left-radius:5px;
    	border-bottom-left-radius:5px;
    	border-left:1px solid #D5D5D5;
    	border-top:1px solid #D5D5D5;
    	border-bottom:1px solid #D5D5D5;
    }
    
    #middle {
    	border-bottom:1px solid #D5D5D5;
    	border-top:1px solid #D5D5D5;
    }
    
    #innermiddle {
    	border-left:1px solid #D5D5D5;
    	border-right:1px solid #D5D5D5;
    	margin-left:-1px;
    }
    
    #innermiddlebottom {
    	border-left:1px solid #D5D5D5;
    	border-right:1px solid #D5D5D5;
    	border-bottom:1px solid #D5D5D5;
    	margin-left:-1px;
    }
    
    .navMenu .inner a {
    	text-align:left;
    	padding-left:7px;
    }
    
    #prices {
    	border-bottom-left-radius:5px;
    	border-bottom-right-radius:5px;
    }
    
    #right:hover {
    	background-color:#E8E8E8;
    }
    
    .clearFloat {
    	clear:both;
    	margin:0;
    	padding:0;
    }
    Thanks, Thomas

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    Code:
    .navMenu a:hover {
    background-color: #E56500;
    }
    Try that instead.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles