Menu
<%@ Page Language="C#" AutoEventWireup="true" Theme="SF" CodeBehind="ULLITest.aspx.cs" Inherits="ClickDoors_WebApp.ULLITest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#Menu
{
padding:0;
margin:0;
list-style-type:none;
font-size:13px;
color:#717171;
width:100%;
}
#Menu li
{
border-bottom:1px solid #eeeeee;
padding:7px 10px 7px 10px;
}
#Menu li:hover
{
color:White;
background-color:#ffcc00;
}
#Menu a:link
{
color:#717171;
text-decoration:none;
}
#Menu a:hover
{
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="Menu">
<li><a href="#">Internal Doors</a></li>
<li><a href="#">Prefinished Internal Doors</a></li>
<li><a href="#">External Doors</a></li>
<li><a href="#">Internal Pair [French Doors]</a></li>
<li><a href="#">External Pair [French Doors]</a></li>
<li><a href="#">Custom Size Doors</a></li>
<li><a href="#">Door Frames</a></li>
<li>Test</li>
</ul>
</div>
</form>
</body>
</html>
When i hover over it background-color is changed immediately but font color remains same until i hover over text.
In short i want my menu to behave similar to stackoverflows menu (Questions Tags Users....)
Any help will be appreciated.
235
I'd do it like this:
Set your <a> tags to display:block
Remove the padding from your <li>'s (make it padding:0px)
Re-add the padding to your <a> tags padding:7px 10px 7px 10px;
Add background-color:#ffcc00; to #Menu a:hover
Get rid of #Menu li:hover
101
need to add #Menu li:hover a {color:White;} This will set white color for a when a li is hovered.
Demo: http://jsfiddle.net/Nceef/
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
