www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Rollover menu highlight

  1. #1
    Join Date
    Oct 2008
    Posts
    36

    resolved [RESOLVED] Rollover menu highlight

    Hi! I posted a thread earlier, but this one is for something different.

    Please see the test site at: http://www.aahanet.org/trendstoday/.

    When you put your mouse over the News (or Practice Management or Tools) menu item, a light, blue curved "cap" displays. When I move the mouse down to one of the drop down menu items, the "cap" goes away. Is there a way to keep the "cap" on as I go through the items in the drop down menu below?

    I'm not sure if this is possible with just CSS, but thought I would ask.

    Thank you!!
    Harms

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,105
    As long as your hover styles are on the LI instead of the anchor, it should work as seen in this basic example:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>Title</title>
    		<meta name="language" content="en" />  
    		<meta name="description" content="" />  
    		<meta name="keywords" content="" />
    		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
    		<style type="text/css">
    			ul li {float: left; width: 200px; background: #ddd;}
    			ul li ul li {float: none;}
    			ul li:hover {background: #aaa;}
    			ul li ul {display: none;}
    			ul li:hover ul {display: block;}
    		</style>
    		<script type="text/javascript">
    			//<![CDATA[  
    
    			//]]> 
    		</script>
    	</head>
    	<body>
    		<ul>
    			<li><a href="#">Hover for dropdown</a>
    				<ul>
    					<li><a href="#">Menu item 1</a></li>
    					<li><a href="#">Menu item 1</a></li>
    					<li><a href="#">Menu item 1</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Hover for dropdown 2</a>
    				<ul>
    					<li><a href="#">Menu item 1</a></li>
    					<li><a href="#">Menu item 1</a></li>
    				</ul>
    			</li>			
    		</ul>
    	</body>
    </html>

  3. #3
    Join Date
    Oct 2008
    Posts
    36
    Thank you Vision! Don't know why I didn't think of that. I think my brain has become mush. Works great now!
    Harms

  4. #4
    Join Date
    Aug 2010
    Posts
    7
    display:block!hehe!

Thread Information

Users Browsing this Thread

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

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