css menu [Archive] - PHPBuilder.com

benracer

01-17-2008, 05:11 PM

Hi,

is it possible to add a » to the menu on hover?

I have this now to change the border and background but i am not sure how to add the symbol on hover.

<style type="text/css">
body {
margin: 0 0 0 0;
background-color:#EFEFEF;
}

#button {
width: 156px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #000;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #000;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #CCCCCC;
border-right: 10px solid #FFFFFF;
background-color: #EFEFEF;
color: #000;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #FFFFFF;
border-right: 10px solid #CCCCCC;
background-color: #EFEFEF;
color: #000;
font-size:11px;
font-weight:bold;
}

#lower_menu {
margin-left:10px;
}

#search {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #CCCCCC;
border-right: 10px solid #FFFFFF;
background-color: #EFEFEF;
color: #000;
}

.go {
font-size: 12px;
border: 1px solid #000000;
font-style: italic;
color: #000000;
}

.search {
font-size: 10px;
border: 1px solid #000000;
color: #000000;
}

</style>

</head>
<body>
<?php
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){
$x = 16;
}else{
$x = 13; }
?>

<div id="button">
<div style="border-bottom: 1px solid #000;">
<div id="search">
<form action="/search_results.php" method="get" name="form" target="_parent" id="form" style="display: inline">
<input name="q" type="text" class="go" onclick="clearText(this)" onblur="insertText(this)" value="Search..." size="<? echo $x; ?>" maxlength="30" >
<input type="submit" class="search" value="Go" />
</form></div>
</div>
<ul>
<li><a href="/" target="_parent">Home</a></li>
<li><a href="/spares.php" target="_parent">Traxxas Spares</a></li>
<li><a href="/page/star" target="_parent">Star Clothing</a></li>
<li><a href="/cart" target="_parent">Shopping Cart</a></li>
<li><a href="/track.php" target="_parent">Order Tracking</a></li>
<li><a href="/page/about" target="_parent">About Us</a></li>
<li><a href="/page/contact" target="_parent">Contact</a></li>
</ul>
</div>
</body>
</html>

sneakyimp

01-17-2008, 05:47 PM

I would try creating a graphic of the » html entity and then assigning it as background-image in your hover css.

background-image:url('bgdesert.jpg');
background-repeat: no-repeat;
background-position: right;

or something like that.

benracer

01-17-2008, 05:49 PM

Thanks, if you see the site (link below) it shows some sort of content?

http://www.alistapart.com/articles/taminglists/

(around 1/3 down the page)

sneakyimp

01-17-2008, 06:00 PM

i have no idea how that last post relates to your original one.