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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need text only hover for navlist

    Hi,

    I'm a novice and need help with this navlist.

    I want the text to only become underlined when the text is hovered over. As it is now the underline appears when the any part of the box is hovered over.

    Thanks in advance for your suggestions.

    Code:
    <!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">
    <head>
    
    <style type="text/css">
    
    .menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }
    
    .menu li{
    float:left;
    position:relative;
    z-index:100;
    }
    
    .menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:80;
    left:-1px;
    top:25px;
    }
    
    .menu a, .menu :visited {
    	display:block;
    	font-size:10px;
    	width:140px;
    	color:#000;
    	background:#000;
    	text-decoration:none;
    	text-align:center;
    	font-family:verdana, sans-serif;
    	padding-top: 7px;
    	padding-right: 0;
    	padding-bottom: 7px;
    }
    .menu ul ul {
    	visibility:hidden;
    	position:absolute;
    	width:149px;
    	height:0;
    	text-decoration: none;
    }
    
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    	visibility:visible;
    }
    
    
    a:link {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    a:active {
    	text-decoration: underline;
    	color: #999999;
    }
    
    </style>
    </head>
    Code:
    <body>
    
    <div class="menu">    
    	<ul>
    		 <li><a href="#">home</a></li>
    		 <li><a href="index.html">gallery</a>
       			<ul>
       		 <li><a href="#">black and whites</a></li>
       		 <li><a href="#">colors</a></li>
    		    </ul>
    		  </li>
    		<li><a href="#">purchases</a></li>
    		<li><a href="#">about</a></li>
    		<li><a href="#">contact</a></li>
    	</ul>
    </div>
    
    </body>
    </html>
    Last edited by AlexanderC; 07-09-2011 at 07:14 PM. Reason: attaching file

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Wrap the a in a "span"

    Code:
    span { display: inline; }
    Code:
    <a href="#">
     <span>Rada</span>
    </a>
    Last edited by Sammy12; 07-09-2011 at 07:31 PM.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Tried it but nothing. the code I put in is below.

    I was also told to apply the hover to the list item and make that the size of the top tabs. However, I don't really know what that means.

    Code:
    .span { display: inline; }
    Code:
    <li><a href="#"><span>home</span></a></li>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try making it
    Code:
    span:hover {
     text-decoration: underline; 
    }
    instead of the a:hover

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That worked on the "home" link as long as I didn't put a span tag on any of the others. When I did then none got underlined plus it did some really weird positioning/element duplication stuff...

    That seemed like a good guess though. To me it seems to be the problem that the li tags are selectable instead of just the link. I can't figure out why that is. Any thoughts?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <!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">
    <head>
    
    <style type="text/css">
    .menu ul{
    list-style-type:none;
    padding:0;
    margin:0;
    }
    
    .menu li{
    float:left;
    position:relative;
    z-index:100;
    }
    
    .menu table{
    position:absolute;
    border-collapse:collapse;
    z-index:80;
    left:-1px;
    top:25px;
    }
    
    .menu a, .menu :visited {
    	display:block;
    	font-size:10px;
    	width:140px;
    	color:#000;
    	background:#000;
    	text-decoration:none;
    	text-align:center;
    	font-family:verdana, sans-serif;
    	padding-top: 7px;
    	padding-right: 0;
    	padding-bottom: 7px;
    }
    .menu ul ul {
    	visibility:hidden;
    	position:absolute;
    	width:149px;
    	height:0;
    	text-decoration: none;
    }
    
    .menu ul li:hover ul,
    .menu ul a:hover ul{
    	visibility:visible;
    }
    
    
    a:link {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    span:hover {
    	border-bottom: #FFF 1px solid;
    	color: #FFFFFF;
    }
    a:active {
    	text-decoration: underline;
    	color: #999999;
    }
    
    </style>
    </head>
    <body>
    
    <div class="menu">    
    	<ul>
    			<li><a href="#"><span>home</span></a></li>
    		 <li><a href="index.html"><span>gallery</span></a>
       			<ul>
       		 <li><a href="#"><span>black and whites</span></a></li>
       		 <li><a href="#"><span>colors</span></a></li>
    		    </ul>
    		  </li>
    		<li><a href="#"><span>purchases</span></a></li>
    		<li><a href="#"><span>about</span></a></li>
    		<li><a href="#"><span>contact</span></a></li>
    	</ul>
    </div>
    </body>
    </html>
    hovering over: the text


    hovering over: NOT the text


    the text is only underlined when hovering over it. isnt this what you wanted?
    Last edited by Sammy12; 07-10-2011 at 07:28 AM.

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's working better than I had it. Thanks! So, the text gets underlined when hovered over, but when the boxes are hovered over I still get a pointy finger (although no underline). If the boxes are then clicked it activates the a:active rule and thus the link. So the one issue remaining is how to get rid of this pointy finger when the cursor is only over the box. Thanks again for sticking with me on this!

    (oddly enough as long as each link was a dummy link it would disappear permanently after being clicked on. Replacing it with an actual link fixed this.)

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    with cursor: you can toggle a cursor style.

    there is

    http://www.w3schools.com/cssref/pr_class_cursor.asp
    cursor: default; (arrow)
    cursor: text; (text thingy :P)
    cursor: pointer; (pointer - links)

    try setting { cursor: default; } and span { cursor: pointer; }

    warning! by setting "a" and "span", you are setting this style for ALL "a"s and "span"s for the ENTIRE page. So you might want to set a class so that these changes only apply to this one situation
    Last edited by Sammy12; 07-10-2011 at 08:23 PM.

  • Users who have thanked Sammy12 for this post:

    AlexanderC (07-14-2011)

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a lot for your suggestions. This was getting convoluted though so I went back to my old menu. Although this one is working better I'm having a similar problem.

    Check it out if you want, I'm posting it as a new thread and it would be great to have your suggestions


  •  

    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
    •