664
I'm new to HTML5 and CSS3 and I can not figure out why my Navigation (menu) is not working.
Note I have a link for Motelakura (H1 tag) and when you place the cursor over it the Hand does not shop up unless you have it on the top part of the wording. Did that make any sense.
If you need all the css coding please let me know.
Any help would be great. Thanks in advance.
Expand|Select|Wrap|Line Numbers
- <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
- <script language="JavaScript" type="text/JavaScript">
- <!--
- function MM_swapImgRestore() { //v3.0
- var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
- }
- function MM_preloadImages() { //v3.0
- var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
- var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
- if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
- }
- function MM_findObj(n, d) { //v4.01
- var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
- d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
- if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
- for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
- if(!x && d.getElementById) x=d.getElementById(n); return x;
- }
- function MM_swapImage() { //v3.0
- var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
- if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
- }
- //-->
- </script>
- </head>
- <body onload="MM_preloadImages('buttons/home_over.jpg','buttons/about_us_over.jpg','buttons/directions_over.jpg','buttons/contact_us_over.jpg','buttons/things_to_over.jpg')">
- <!-- header-wrap -->
- <div id="header-wrap">
- <header>
- <hgroup>
- <h1><a href="index.html">Motelakura</a></h1>
- <h3>Hours: 24 hours a day, seven days a week
- </h3>
- </hgroup>
- <nav>
- <ul>
- <li><img src="buttons/ends.jpg" width="60" height="36" /></li>
- <li><a href="index.html"><img src="buttons/home.jpg" alt="Home Page" name="home" width="126" height="36" border="0" id="home" onMouseOver="MM_swapImage('home','','buttons/home_over.jpg',1);MM_swapImgRestore()" /></a></li>
- <li><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_us','','buttons/about_us_over.jpg',1)"><img src="buttons/about_us.jpg" alt="About Us" name="about_us" width="126" height="36" border="0" id="about_us" /></a></li>
- <li><a href="directions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('directions','','buttons/directions_over.jpg',1)"><img src="buttons/directions.jpg" alt="Directions to" name="directions" width="126" height="36" border="0" id="directions" /></a></li>
- <li><a href="contact_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','buttons/contact_us_over.jpg',1)"><img src="buttons/contact_us.jpg" alt="Contact Us" name="contact us" width="126" height="36" border="0" id="contact us" /></a></li>
- <li><a href="attractions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Things_to_do','','buttons/things_to_over.jpg',1)"><img src="buttons/things_to.jpg" alt="Thing to do in LA county" name="Things_to_do" width="126" height="36" border="0" id="Things_to_do" /></a></li>
- <li><img src="buttons/ends.jpg" width="60" height="36" /></li>
- </ul>
- </nav>
- </header></div>
Expand|Select|Wrap|Line Numbers
- /* ------------------------------------------------------
- STRUCTURE
- --------------------------------------------------------- */
- #header-wrap {
- width: 100%;
- height: 70px;
- z-index: 99999;
- /* position: fixed;*/
- top: 0;
- left: 0;
- }
- header {
- position: relative;
- width: 900px;
- height: 70px;
- margin: 0 auto;
- }
- /* -------------------------------------------
- Header
- -------------------------------------------- */
- /* Logo */
- header hgroup {
- position: absolute;
- background: url(../images/header.jpg) no-repeat;
- height: 142px;
- width: 307px;
- display: block;
- top: 18px;
- left: 2px;
- }
- header hgroup h1 a {
- margin-top: 40px;
- margin-left: 5px;
- margin-bttom: 15px;
- /*text-indent: -9999em;*/
- display: block;
- height: 45px;
- width: 300px;
- }
- header hgroup h3 {
- margin-top: 25px;
- /* text-indent: -9999em;*/
- height: 14px;
- font-size: 12px;
- }
- /* Main Navigation */
- header nav {
- float: left;
- margin-top: 155px;
- }
- header nav ul {
- width: 900px;
- padding: 0;
- list-style: none;
- }
- header nav ul li {
- float: left;
- }
