PDA

View Full Version : hover underline style in html?



glengates
May 28th, 2011, 08:08 PM
Hi all,

Need some help with a styling within HTML

I am creating an expanding menu in html with main menus expanding to submenus, but am having a bit of difficulty with the styling - in particular, having an underline appear when I hover over the main menu options as they are not hyperlinks!

The underline is happening ok in the submenus, which i presume is because they are hyperlinks!

I have enclosed the style part of my code




<style type="text/css">
A:link {text-decoration: none; color: #55555}
A:visited {text-decoration: none; color: #55555}
A:hover { text-decoration: underline; color: #55555 }

.menu1
{
background-image: url(AD Images/arrow link online.png);
margin-left:0px;
padding-left:13px;
padding-top:5px;
padding-bottom: 2px;
display:block;
font-family: corbel;
font-style: normal;
font-size: 13;
color: #555555;
cursor: pointer;
height: 30px;
width: 150px;
border: thin solid white
}
.submenu
{
background-image: url(AD Images/arrow link online2.png);
margin-left:0px;
display: block;
height: 30px;
padding-left:13px;
padding-top: 5px;
font-family: corbel;
font-style: normal;
font-size: 13;
color:#555555;
width: 150px;
border: thin solid white
}
.hide
{
display: none;
}
.show
{
display: block;
}

</style>Can anyone help, please..........
Thanks
Glen

AndrewGSW
May 29th, 2011, 02:21 AM
Bit hard to see without some HTML, but if you are using 'li' elements within your menu then:

.menu li:hover {
text-decoration: underline;
}
might be what you're after. Most modern browsers understand the pseudo-selector ':hover' on elements other than a's. Well.. IE6 would need persuading :p

glengates
May 29th, 2011, 04:42 PM
Sorry,

Here is the menu html


<form id="form1" runat="server">
<div>
<a class="menu1" onclick="showHide('mymenu1')">Menu</a>
<div id="mymenu1" class="hide">
<a href="default.aspx" class="submenu">Sub Menu 1</a>
<a href="default.aspx" class="submenu">Sub Menu 2</a>
<a href="default.aspx" class="submenu">Sub Menu 3</a>
<a href="default.aspx" class="submenu">Sub Menu 4</a>
</div>