Forum Moderators: not2easy
What happens and I would like it to not happen with the horizontal nav bar is.. surrounding the link (background?) is a box that could be any color. Each nav bar treats this differently. For example: On hover a color appears, color is always present and the link color changes, tabs, etc...
In fact, as I am typing this in I look at the nav bar at the top of the page that indicates where I am in this forum.. Home/etc/etc/etc
Okay.. in this example it is just pure links, no buttons surrounding the links or behind the links or part of the links. just links.
That is how I want my nav bar. But, what I have is a 'background color or button or box' (for lack of correct term) at each link across the nav bar.
If I move my cursor to the right of a link by a few pixels - in fact to the left side of the second link - the hover effect happens and my link changes color or acts like something is happening. I just want rid of it. Simple.. just a link.. no hover effects, background boxes, etc..
I have searched high and low for a solution and most offer how to create a button, box, background, etc.. but can't figure out how to do the opposite! :)
---------------------------------------------------
CSS:
#menu { background:#000000; width:650px; margin:1px auto; height:32px; margin-top:47px; clear:both;}
#menu ul {
width: 810px; /* 100px x # of links */
margin: 0 auto; /* center */
padding:0;
list-style: none;
text-align: left;
}
#menu ul li{ display:inline;}
#menu a {
float:left;
width:100px;
line-height: 32px;
color:#c0c0c0;
font-size:16px;
text-decoration:none;
outline-style:none;
}
#menu a:hover{
color:#ffffff; text-decoration: underline;
}
----------------------------------------------------
Header Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "example.com/TR/html4/strict.dtd">
<!--
Text Text Text
-->
<html xmlns="example.com/1999/xhtml">
<head profile="example.com/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {width:710px;}
#header img {
padding:10px 0 15px 0;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<div id="logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></div>
<center><div id="menu">
<ul>
<li><a href="example.com/">TEXT</a>
<li><a href="example.com/about-us/">TEXT</a>
<li><a href="example.com/our-homes/">TEXT</a>
<li><a href="example.com/heron-ridge/">TEXT</a>
</ul>
</div></center>
</div>
<!--end header -->
#menu ul li{ display:inline; outline-style:none; width:100px; line-height: 32px; font-size:16px; padding: 0 20px 0 0;
}
Now I would like to get rid of the "underline" (under the link) and just have the actual words change color when mouse is hovering.
complete menu code as is now:
#menu { background:#000000; width:650px; margin:1px auto; height:32px; margin-top:47px; clear:both;}
#menu ul {
width: 810px; /* 100px x # of links */
margin: 0 auto; /* center */
padding:0;
list-style: none;
text-align: left;
}
#menu ul li{ display:inline; outline-style:none; width:100px; line-height: 32px; font-size:16px; padding: 0 20px 0 0; }
#menu a:hover{
color:#ffffff;
}
#menu a:hover{color:#ffffff; text-decoration: underline;
}
#menu a:hover{ color: #FF0000; text-decoration: none; }
Thank you.
For some reason I still have the underline. Perhaps because I removed the "pages" php call from header file and created the nav menu in the header by using: <li><a href="example.net/AboutUs"><li>etc....
Would I need to put some code in this header file to remove the underline from the link?
Also, Once I changed colors on the hover I found the lavender is real nice...
I would like the actual links to be #E6E6FA; and the mouse over to be #ffffff#
Tried different combos and could not get the links to be lavender. Again, perhaps thru the header file?
#menu { background:#000000; width:650px; margin:1px auto; height:32px; margin-top:47px; clear:both;}
#menu ul {
width: 810px; /* 100px x # of links */
margin: 0 auto; /* center */
padding:0;
list-style: none;
text-align: left;
}
#menu ul li{ display:inline; outline-style:none; width:100px; line-height: 32px; font-size:16px; margin: 0 20px 0 0; }
#menu a:hover{
color:#E6E6FA; text-decoration: none; outline-style:none;
}
