0 Replies - 3311 Views - Last Post: 07 July 2010 - 03:13 PM

#1 tkdesign  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-July 10

CSS Hover active area

Posted 07 July 2010 - 03:13 PM

Hi all,

Newbie to the forum so please be gentle. Im working on a drop down menu. I have it floating to the right but cant seem to get the active area or bold "process" to stick when I rollover the positioned menu. Tried JS stuff, jquery, :hover, doesnt seems to work. Anyone know of a work around?

HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fred Sparks Design</title>

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload = function()
	{
		var lis = document.getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.idName == 'navi_process')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}


</script>

</head>

<body>

<div class="container container_12">
	<div id="header">

    <a id="logo" href="/" title="Fred Sparks Design"><span>Fred Sparks Design</span></a>
    <div id="navigation">
        <ul id="leftnavigation">
        <li id="navi_about"><a href="/about"><span>About</span></a></li>
        <li id="navi_capabilities"><a href="/capabilities"><span>Capabilities</span></a></li>
        <li id="navi_philosophy"><a href="/philosophy"><span>Philosophy</span></a></li>
        <li id="navi_process">

            <a href="#"><span>Process</span></a>
             <ul id="flyoutmenu">
              <li id="navi_strategy"><a href="/strategy"><span>Strategy</span></a></li>
              <li id="navi_innovation"><a href="/innovation"><span>Innovation</span></a></li>
              <li id="navi_sustanability"><a href="/sustanability"><span>sustanability</span></a></li>
             </ul>
         </li>

       <li id="navi_projects"><a href="/projects"><span>Projects</span></a></li>

</ul>

    </div>
    <div class="clear">&nbsp;</div>
  </div>



	<div class="clear">&nbsp;</div>

</div>
</body>
</html>





CSS
/*css reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, button, textarea { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; font-weight: normal; }
html { display: table; width: 100%; height: 100%; overflow-x: hidden !iefix; }
img { vertical-align: middle; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
label { cursor: pointer; display: inline-block; }


.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.automargin { margin: 0px auto; }
.hidden { display: none !important; }
.watch { background-color: fuchsia !important; }
.round { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }



/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {	margin-left: auto;	margin-right: auto;	width: 924px;}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {	margin-left: 0;}

.omega {	margin-right: 0;}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {	width:57px;}
.container_12 .grid_2 {	width:134px;}
.container_12 .grid_3 {	width:211px;}
.container_12 .grid_4 {	width:288px;}
.container_12 .grid_5 {	width:365px;}
.container_12 .grid_6 {	width:442px;}
.container_12 .grid_7 {	width:519px;}
.container_12 .grid_8 {	width:596px;}
.container_12 .grid_9 {	width:673px;}
.container_12 .grid_10 {width:750px;}
.container_12 .grid_11 {width:827px;}
.container_12 .grid_12 {width:904px;}



/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {	padding-left:77px;}
.container_12 .prefix_2 {	padding-left:154px;}
.container_12 .prefix_3 {	padding-left:231px;}
.container_12 .prefix_4 {	padding-left:308px;}
.container_12 .prefix_5 {	padding-left:385px;}
.container_12 .prefix_6 {	padding-left:462px;}
.container_12 .prefix_7 {	padding-left:539px;}
.container_12 .prefix_8 {	padding-left:616px;}
.container_12 .prefix_9 {	padding-left:693px;}
.container_12 .prefix_10 {	padding-left:770px;}
.container_12 .prefix_11 {	padding-left:847px;}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {	padding-right:77px;}
.container_12 .suffix_2 {	padding-right:154px;}
.container_12 .suffix_3 {	padding-right:231px;}
.container_12 .suffix_4 {	padding-right:308px;}
.container_12 .suffix_5 {	padding-right:385px;}
.container_12 .suffix_6 {	padding-right:462px;}
.container_12 .suffix_7 {	padding-right:539px;}
.container_12 .suffix_8 {	padding-right:616px;}
.container_12 .suffix_9 {	padding-right:693px;}
.container_12 .suffix_10 {	padding-right:770px;}
.container_12 .suffix_11 {	padding-right:847px;}

/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {	left:77px;}
.container_12 .push_2 {	left:154px;}
.container_12 .push_3 {	left:231px;}
.container_12 .push_4 {	left:308px;}
.container_12 .push_5 {	left:385px;}
.container_12 .push_6 {	left:462px;}
.container_12 .push_7 {	left:539px;}
.container_12 .push_8 {	left:616px;}
.container_12 .push_9 {	left:693px;}
.container_12 .push_10 {left:770px;}
.container_12 .push_11 {left:847px;}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {	left:-77px;}
.container_12 .pull_2 {	left:-154px;}
.container_12 .pull_3 {	left:-231px;}
.container_12 .pull_4 {	left:-308px;}
.container_12 .pull_5 {	left:-385px;}
.container_12 .pull_6 {	left:-462px;}
.container_12 .pull_7 {	left:-539px;}
.container_12 .pull_8 {	left:-616px;}
.container_12 .pull_9 {	left:-693px;}
.container_12 .pull_10 {	left:-770px;}
.container_12 .pull_11 {	left:-847px;}




/* Clear Floated Elements-----------------------*/

.clear {	clear: both;	display: block;	overflow: hidden; visibility: hidden;	width: 0;	height: 0;}
.clearfix:after {	clear: both;	content: ' ';	display: block;	font-size: 0;	line-height: 0;	visibility: hidden;	width: 0;	height: 0;}
.clearfix {	display: inline-block;}
* html .clearfix {	height: 1%;}
.clearfix {	display: block;}


/* Typography-----------------------*/

body {font-family: Trebuchet MS, Arial, Sans-Serif; font-size: 87.5%; line-height: 1.66em; font-style: normal; text-transform: none;  }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 0.8em; font-weight: bold; }
p { margin: 0 0 1.5em; }
li ul, li ol { margin: 0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em; }
table { margin-bottom: 1.4em; width: 100%; }
th { font-weight: bold; }
th, td, caption { padding: 4px 10px 4px 5px; }
tfoot { font-style: italic; }


/* Home Page-----------------------*/
#header { height:130px; border-top:1px solid #000; border-bottom:1px solid #000; width:900px; position:relative; margin-top:22px;}
#logo { display:block; background-image: url(images/fred-sparks-design.png); background-repeat:no-repeat; height:55px; width:187px; position:absolute;}
#logo span { display:block; text-indent:-9000px; }

/* navigation come and get it----*/
#navigation {
	position:absolute;
right:61px;
top:14px;
	width:590px;
	height:130px;
}
#navigation ul { margin:0px; padding:0px;}
#navigation ul li { margin:0px; padding:0px; list-style:none;}
#navigation a span { display:block; text-indent:-9000px;}
#navigation a { display:block; background-image:url(images/navi-sprite.png); background-repeat:no-repeat; height:21px;}


#leftnavigation { width:300px; float:left;}
#rightnavigation { width:300px; float:left;}
#navi_process { position:relative;}

#navi_about a{background-position:0px 0px;}
#navi_about a:hover{ background-position:0px -123px;}
#navi_capabilities a{ background-position:0px -22px;}
#navi_capabilities a:hover{ background-position:0px -145px;}
#navi_philosophy a{ background-position:0px -44px;}
#navi_philosophy a:hover{ background-position:0px -167px;}

#navi_process a{ background-position:0px -64px; height:18px; width:175px; display:block; z-index:1;}
#navi_process a:hover{ background-position:0px -188px; width:175px; display:block; z-index:1;}
li#navi_process ul { display: none; }
li#navi_process:hover ul { display: block;  }
li#navi_process:hover {background-position:0px -188px!important;}

#flyoutmenu { position:absolute; top:0px; left:64px; width:243px;height:45px; z-index:1;}


#navi_projects a{ background-position:0px -84px;}
#navi_projects a:hover{ background-position:0px -207px;}

#navi_strategy, #navi_innovation, #navi_sustanability { float:left;}
#navi_process #navi_strategy a{ background-position:-68px -188px !important; display:block; width:65px;}
#navi_process #navi_innovation a{ background-position:-139px -188px !important; display:block; width:65px;}
#navi_process #navi_sustanability a{ background-position:-209px -188px !important; display:block; width:84px;}





And here is a link to it with the images working and everything.
My link

Doing alot of background-image positioning so figure it might be good to see the images as well.

Is this even possible with the menu positioned?

Is This A Good Question/Topic? 0
  • +

Page 1 of 1