[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I style css hover?

Posted on 2011-05-09
12
Medium Priority
?
289 Views
Last Modified: 2012-05-11
Hi,

I have the attached code behind my web page...

How can I alter my css so the dark purple background colour's height expands like the lighter purple background colour upon mouse hover? e.g....

design
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body bgcolor="#ffffff">



<style>
#pcm{display:none;}
ul.headerMenu ul{display:none}
ul.headerMenu li:hover>ul{display:block}
ul.headerMenu ul{position: absolute;left:-1px;top:98%;}
ul.headerMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.headerMenu,ul.headerMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-color:#55379b;
	background-repeat:repeat;
	border-color:#AAAAAA;
	/* dropdown border */
	border-width:0px;
	border-style:solid;
}
ul.headerMenu table {border-collapse:collapse}ul.headerMenu {
	display:block;
	zoom:1;
	float: left;
	width:705px;
}
ul.headerMenu ul{
	width:700px;
}
ul.headerMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.headerMenu a:active, ul.headerMenu a:focus {
outline-style:none;
}
ul.headerMenu a, ul.headerMenu li.dis a:hover, ul.headerMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#55379b;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
	cursor:default;
}
ul.headerMenu span{
	overflow:hidden;
}
ul.headerMenu li {
	float:left;
}
ul.headerMenu ul li {
	float:none;
}
ul.headerMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.headerMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.headerMenu li.sep span{
	float:none;	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#AAAAAA;	background-image:none;}
ul.headerMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.headerMenu li:hover{
	position:relative;
}
ul.headerMenu li:hover>a{
	background-color:#8154b7;
	border-color:#665500;
	border-style:solid;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
}
ul.headerMenu li a:hover{
	position:relative;
	background-color:#8154b7;
	border-color:#665500;
	border-style:solid;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
}
ul.headerMenu li.dis a {
	color: #AAAAAA !important;
}
ul.headerMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.headerMenu ul img {width:16px;
height:16px;
}
ul.headerMenu img.over{display:none}
ul.headerMenu li.dis a:hover img.over{display:none !important}
ul.headerMenu li.dis a:hover img.def {display:inline !important}
ul.headerMenu li:hover > a img.def  {display:none}
ul.headerMenu li:hover > a img.over {display:inline}
ul.headerMenu a:hover img.over,ul.headerMenu a:hover ul img.def,ul.headerMenu a:hover a:hover img.over{display:inline}
ul.headerMenu a:hover img.def,ul.headerMenu a:hover ul img.over,ul.headerMenu a:hover a:hover img.def{display:none}
ul.headerMenu a:hover ul{display:block}
ul.headerMenu div.dropDown{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:left center;
	background-repeat: no-repeat;
	padding-left:11px;
	padding-right:30px;}
ul.headerMenu li:hover>a>div.dropDown{	background-image:url(./images/arrv_anim_1o.gif);}
ul.headerMenu .arrowFlat{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:left center;
	background-repeat: no-repeat;
	padding-left:11px;
	padding-right:30px;}
ul.headerMenu .subMenu{
	height:54px;
	background-color:#8154b7;}
ul.headerMenu li.noCustomReport>a
{
    width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:White;
	font-family:Arial;
	background-color:#8154b7;
}
ul.headerMenu li.sub1>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:15px;
	color:Black;
	font-family:Arial;}
ul.headerMenu li.sub2>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:Black;
	font-family:Arial;}
ul.headerMenu li.sub3>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:Black;
	font-family:Arial;}
ul.headerMenu a:hover div{	_background-image:url(./images/arrv_anim_1o.gif)}
ul.headerMenu ul div,ul.headerMenu a:hover table div{background-image:url(./images/arr_double_1.gif)}
ul.headerMenu ul li:hover > a div{	background-image:url(./images/arr_double_1o.gif);}
ul.headerMenu table a:hover div{background-image:url(./images/arr_double_1o.gif)}
</style>

<span>
<div>
<div>
<ul class="headerMenu headerMenum">
	<li class="headerMenui"><a class="headerMenui" href="#"><div class="dropDown">My custom report</div><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="subMenu">
        <li class="noCustomReport"><a>You have <span>1 page</span> in your custom report</a></li>
        <span><li class="sub1"><a href="#">Add to my report</a></li></span>
	    <span><li class="sub2"><a class="headerMenui" href="http://www.bbc.co.uk" title="See all sections">See all sections</a></li></span>
	    <span><li class="sub3"><a class="headerMenui" hrefhttp://www.bbc.co.uk" title="Show report">Show report</a></li></span>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<span><li class="headerMenui"><a class="headerMenui" href="http://www.bbc.co.uk" title="Edit my details"><div class="arrowFlat">Edit my details</div><![if gt IE 6]></a></li></span>
	<span><li class="headerMenui"><a class="headerMenui" href="http://www.bbc.co.uk" title="Personal bookmarks"><div class="arrowFlat">Personal bookmarks</div><![if gt IE 6]></a></li></span>
</ul>
</div>
</div>
</span>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Open in new window

0
Comment
Question by:aspnet-scotland
  • 7
  • 5
12 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722278
Well, I accomplished this, but not with expanding the UL, but giving the submenu some borders.

See if you like this or not.

Change the following CSS selector properties to the code below to see the change:

ul.headerMenu {
    display: block;
    float: left;
    padding: 1px 0 0 1px;
    width: 705px;
}

Open in new window


ul.headerMenu .subMenu {
    background-color: #8154B7;
    border-bottom: 3px solid #55379B;
    border-left: 3px solid #55379B;
    border-right: 3px solid #55379B;
    height: 54px;
    margin-left: -2px;
}

Open in new window


Obviously you can adjust the borders to get the thickness you want. I only went this direction because I am not sure expanding that UL with a hover action will be possible without JS.

See the screenshot for reference.

 Screenshot
0
 

Author Comment

by:aspnet-scotland
ID: 35722609
That looks ideal but would you be able to tweek your borders to match a dark purple background of 935px width and 40px height as I've unfortunately had to change my sizes...thanks!
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722619
Can you post your new markup? That would make it easier.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:aspnet-scotland
ID: 35722671
I solved it with the below if thats the best way?...
ul.headerMenu .subMenu 
{
    background-color: #8154B7;
    border-bottom: 7px solid #55379B;
    border-left: 7px solid #55379B;
    border-right: 7px solid #55379B;
    height: 54px;
    margin-left: -6px;
}

Open in new window

0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722729
So it works? Do you need more assistance? Did the border fix work for you?

Your last past confused me.
0
 

Author Comment

by:aspnet-scotland
ID: 35722733
Oh, and after moving the markup into an asp.net usercontrol (inserting asp.net panel, button and input controls within my divs for data binding etc) firefox displays fine but ie9 displays like the below...

 layout
Any advice?

Thanks!
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722754
Your last post shows a new question.

I would recommend finishing this thread and opening a new one, in order to get the more attention from the Experts.
0
 

Author Comment

by:aspnet-scotland
ID: 35722876
Ok, thanks.

One thing on my original question though, I missed asking how I would cover the full white space below the dark purple header, i.e. the white to the right and left of the hover drop down?

Latest markup attached...

Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body bgcolor="#ffffff">



<style>
#pcm{display:none;}
ul.headerMenu ul{display:none}
ul.headerMenu li:hover>ul{display:block}
ul.headerMenu ul{position: absolute;left:-1px;top:98%;}
ul.headerMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.headerMenu,ul.headerMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 0px 0px 0px;
	background-color:#55379b;
	background-repeat:repeat;
	border-color:#AAAAAA;
	/* dropdown border */
	border-width:0px;
	border-style:solid;
}
ul.headerMenu table {border-collapse:collapse}
ul.headerMenu 
{
    display: block;
    float: left;
    padding: 1px 0 0 1px;
    width: 935px;
	height:40px;
}
ul.headerMenu ul{
	width:700px;
}
ul.headerMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.headerMenu a:active, ul.headerMenu a:focus {
outline-style:none;
}
ul.headerMenu a, ul.headerMenu li.dis a:hover, ul.headerMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#55379b;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
	cursor:default;
}
ul.headerMenu span{
	overflow:hidden;
}
ul.headerMenu li {
	float:left;
}
ul.headerMenu ul li {
	float:none;
}
ul.headerMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.headerMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.headerMenu li.sep span{
	float:none;	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#AAAAAA;	background-image:none;}
ul.headerMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.headerMenu li:hover{
	position:relative;
}
ul.headerMenu li:hover>a{
	background-color:#8154b7;
	border-color:#665500;
	border-style:solid;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
}
ul.headerMenu li a:hover{
	position:relative;
	background-color:#8154b7;
	border-color:#665500;
	border-style:solid;
	font:14px Arial;
	color: #fff;
	text-decoration:none;
}
ul.headerMenu li.dis a {
	color: #AAAAAA !important;
}
ul.headerMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.headerMenu ul img {width:16px;
height:16px;
}
ul.headerMenu img.over{display:none}
ul.headerMenu li.dis a:hover img.over{display:none !important}
ul.headerMenu li.dis a:hover img.def {display:inline !important}
ul.headerMenu li:hover > a img.def  {display:none}
ul.headerMenu li:hover > a img.over {display:inline}
ul.headerMenu a:hover img.over,ul.headerMenu a:hover ul img.def,ul.headerMenu a:hover a:hover img.over{display:inline}
ul.headerMenu a:hover img.def,ul.headerMenu a:hover ul img.over,ul.headerMenu a:hover a:hover img.def{display:none}
ul.headerMenu a:hover ul{display:block}
ul.headerMenu div.dropDown{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:left center;
	background-repeat: no-repeat;
	padding-left:11px;
	padding-right:30px;}
ul.headerMenu li:hover>a>div.dropDown{	background-image:url(./images/arrv_anim_1o.gif);}
ul.headerMenu .arrowFlat{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:left center;
	background-repeat: no-repeat;
	padding-left:11px;
	padding-right:30px;}
ul.headerMenu .subMenu {
    background-color: #8154B7;
    border-bottom: 3px solid #55379B;
    border-left: 3px solid #55379B;
    border-right: 3px solid #55379B;
    height: 54px;
    margin-left: -2px;
}
ul.headerMenu li.noCustomReport>a
{
    width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:White;
	font-family:Arial;
	background-color:#8154b7;
}
ul.headerMenu li.sub1>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:15px;
	color:Black;
	font-family:Arial;}
ul.headerMenu li.sub2>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:Black;
	font-family:Arial;}
ul.headerMenu li.sub3>a{
	float:left;
	background-color:#D9CCEA;
	width:Auto;
	height:Auto;
	margin-top:0px;
	margin-left:10px;
	color:Black;
	font-family:Arial;}
ul.headerMenu a:hover div{	_background-image:url(./images/arrv_anim_1o.gif)}
ul.headerMenu ul div,ul.headerMenu a:hover table div{background-image:url(./images/arr_double_1.gif)}
ul.headerMenu ul li:hover > a div{	background-image:url(./images/arr_double_1o.gif);}
ul.headerMenu table a:hover div{background-image:url(./images/arr_double_1o.gif)}
</style>

<span>
<div>
<div>
<ul class="headerMenu headerMenum">
	<li class="headerMenui"><a class="headerMenui" title="Welcome text"><div class="welcomeLogin">Welcome <b>Joe Bloggs</b></div><![if gt IE 6]></a></li>
	<li class="headerMenui"><a class="headerMenui" href="#"><div class="dropDown">My custom report</div><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="subMenu">
        <li class="noCustomReport"><a>You have <span>1 page</span> in your custom report</a></li>
        <span><li class="sub1"><a href="#">Add to my report</a></li></span>
	    <span><li class="sub2"><a class="headerMenui" href="http://www.bbc.com" title="See all sections">See all sections</a></li></span>
	    <span><li class="sub3"><a class="headerMenui" hrefhttp://www.bbc.com" title="Show report">Show report</a></li></span>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<span><li class="headerMenui"><a class="headerMenui" href="http://www.bbc.com" title="Edit my details"><div class="arrowFlat">Edit my details</div><![if gt IE 6]></a></li></span>
	<span><li class="headerMenui"><a class="headerMenui" href="http://www.bbc.com" title="Personal bookmarks"><div class="arrowFlat">Personal bookmarks</div><![if gt IE 6]></a></li></span>
</ul>
</div>
</div>
</span>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Open in new window

0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35722920
Change your .subMenu to this:

ul.headerMenu .subMenu {
    background-color: #8154B7;
    border-bottom: 3px solid #55379B;
    border-left: 154px solid #55379B;
    border-right: 82px solid #55379B;
    height: 54px;
    margin-left: -153px;
}

Open in new window


it will take up the whole div.

0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35722932
Here is a screenshot.

 Screenshot
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35726031
Did this work out for you?
0
 

Author Comment

by:aspnet-scotland
ID: 35727183
I had to tweek your code to the below but it now works, thanks!

ul.headerMenu .subMenu
{
    background-color: #8154B7;
    border-bottom: 3px solid #55379B;
    border-left: 151px solid #55379B;
    border-right: 85px solid #55379B;
    height: 54px;
    margin-left: -150px;
}

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question