Dropdown menu activates from two places and hover state issue

SessionDesign · February 20, 2011, 9:35pm

Hi,

I got two problems:

I got a menu here with submenu, but for some reason the dropdown menu gets activated from two spots. One is where it should be and the other is somewhere on the “logo” to the left.
The “Hjem” button or (Home button for you guys) won’t activate when i hover over the text it self, but if you go over or under the text it works. Why dosen’t the hover state work on the text?

I can’t seem to find the issues, hope someone could take a look at it for me. All help is really appreciated!

Here’s the live page: http://www.grafikk-design.no/dagenibilder/bryllup.html

CSS

/**HTML 5**/
section, header, footer, aside, article, nav {
	display: block;
}

html, body {
	margin:0; padding:0; height:100%;
}

/**FONTFACE**/

/* A font by Jos Buivenga (exljbris) -> http://www.exljbris.com */ 

@font-face {
	/* This declaration targets Internet Explorer */
	font-family: FertigoProRegular;
	src: url(../fertigo_pro-webfont.eot);
}

@font-face {
	/* This declaration targets everything else */
	font-family: FertigoProRegular;
	src: url(//:) format('no404'), url(../fertigo_pro-webfont.woff) format('woff'), url(../fertigo_pro-webfont.ttf) format('truetype'), url(../fertigo_pro-webfont.svg#webfontWsyYCAK8) format('svg');
	font-weight: normal;
	font-style: normal;
}

/**GENERAL**/

body {
	background: #fbfbfb;
	background: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
	background: url(../images/bg.png), -moz-linear-gradient(top, #ffffff, #f8f8f8);
	background: url(../images/bg.png), linear-gradient(top, #ffffff, #f8f8f8);
	
}

a {
	text-decoration: none;
	color: #d9d9d9;	
}

li {
	list-style: none;
}

/**TEXT-STYLE**/

h1, h2, h3, h4, p {
	font-size: 12px;
	font-family: FertigoProRegular;
	font-weight: normal;
	color: #d9d9d9;
/**	text-shadow: 1px 1px 7px #000000;**/
}

p {
	line-height: 15px;	
}

h1 {
	font-size: 14px;
}

h2 {
	font-size: 16px;
	line-height: 30px;
	color: #ffffff;
}

h3 {
	font-size: 13px;
	line-height: 20px;
	color: #ffffff;
}

h4 {
	font-size: 12px;
}

/**HEADER AND NAVIGATION**/

header {
	position: fixed;
	height: 85px;
	width: 100%;
	background: #222222;
	background: -webkit-gradient(linear, left top, left bottom, from(#362a3b), to(#000000));
	background: -moz-linear-gradient(top, #362a3b, #000000);
	background: linear-gradient(top, #362a3b, #000000);
}

header #spacer {
	position: absolute;
	top: 26px;
	left: 460px;
}

header #fb {
	position: absolute;
	top: 31px;
	left: 470px;
}

nav img {
	position: absolute;
	top: 25px;
	left: 43px;
}

nav a {
	position: relative;
	left: 200px;
	padding-top: 58px;
	padding-bottom: 32px;
	padding-left: 10px;
	padding-right: 10px;
}
	
nav a:hover, nav .selected {
	background: #362a3b;
	text-decoration: none;	
	-webkit-transition: background .1s;
	-moz-transition: background .1s;
	-o-transition: background .1s;
	transition: background .1s;	
}
	
nav ul li {
	position: relative;
	float: left;
	margin-right: 5px;
	top: 36px;
}
	
nav ul li ul {
	background: #362a3b;
	display: none;
	position: absolute;
	left: 200px;
	top: 48px;
	width: 150px;
	visibility: hidden;
	line-height: 30px;
}

nav ul li ul li {
	position: relative;
	left: -200px;
	top: 0px;
}

nav ul li:hover ul {
	display: block;
	visibility: visible;
}

nav ul li ul li a {
	clear: both;
	padding: 0;
	margin: 0;
	padding-left: 15px;
	color: #d9d9d9;
}

nav ul li ul #sub_1 a:hover {
	background: #605a62;
	padding-right: 96px;
	padding-top: 5px;
	padding-bottom: 5px;
}

nav ul li ul #sub_2 a:hover {
	background: #605a62;
	padding-right: 61px;
	padding-top: 5px;
	padding-bottom: 5px;
}

nav ul li ul #sub_3 a:hover {
	background: #605a62;
	padding-right: 47px;
	padding-top: 5px;
	padding-bottom: 5px;
}

nav ul li ul #sub_4 a:hover {
	background: #605a62;
	padding-right: 57px;
	padding-top: 5px;
	padding-bottom: 5px;
}

/**ARTICLES**/

td {

	padding-top: 88px;
	padding-right: 2px;
	padding-left: 2px;
}


/**FOOTER**/

footer {
	position: fixed;
	clear: both;
	width: 100%;
	height:100%;
	background: #222222;
	background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#362a3b));
	background: -moz-linear-gradient(top, #000000, #362a3b);
	background: linear-gradient(top, #000000, #362a3b);
}

#author {
	margin-left: 20px;
	padding-top: 20px;
}

#copyright {
	margin-left: 20px;
}

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="Kenneth Westgaard, Grafikk & Design" />
	<meta name="robots" content="index,follow" />
	<meta name="robots" content="all" />

	<link href="css/reset.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/style_gallery.css"/>
	<title>Studio Expose / Dagen i Bilder</title>
	<style>section, header, footer, aside, article, nav { display: block; }</style>
</head>

<body>

	<header>
		<nav>
			<img src="images/logo.png" />
				<ul>
					<li><h1><a href="index.html">Hjem</a></h1></li>
					<li><h1><a href="#">Galleri</a></h1>
						<ul>
						<li id="sub_1"><h4><a href="bryllup.html">Bryllup</a></h4></li>
						<li id="sub_2"><h4><a href="konfirmasjon.html">Konfirmasjon</a></h4></li>
						<li id="sub_3"><h4><a href="portrett.hmtl">Portrett/Familie</a></h4></li>
						<li id="sub_4"><h4><a href="gravid.hmtl">Gravid/Nyfødt</a></h4></li>
						</ul>
					</li>
					<li><h1><a href="priser.html">Priser</a></h1></li>
					<li><h1><a href="kontakt.html">Kontakt</a></h1></li>
				</ul>
		</nav>
		<!--
		<img id="spacer" src="images/nav_spacer.jpg" />
		<a href="http://www.facebook.com"><img id="fb" src="images/fb.png" /></a>
		!-->
	</header>
	
		<article>
			<table>
			<tr>
			<td><img src="images/01.jpg" /></td>
			<td><img src="images/bryllup/02.jpg" /></td>
			<td><img src="images/bryllup/03.jpg" /></td>
			<td><img src="images/bryllup/04.jpg" /></td>
			<td><img src="images/bryllup/05.jpg" /></td>
			<td><img src="images/bryllup/06.jpg" /></td>
			<td><img src="images/bryllup/07.jpg" /></td>
			<td><img src="images/bryllup/08.jpg" /></td>
			<td><img src="images/bryllup/09.jpg" /></td>
			<td><img src="images/bryllup/10.jpg" /></td>
			<td><img src="images/bryllup/11.jpg" /></td>
			<td><img src="images/bryllup/12.jpg" /></td>
			<td><img src="images/bryllup/13.jpg" /></td>
			<td><img src="images/bryllup/14.jpg" /></td>
			<td><img src="images/bryllup/15.jpg" /></td>
			<td><img src="images/bryllup/16.jpg" /></td>
			<td><img src="images/bryllup/17.jpg" /></td>
			<td><img src="images/bryllup/18.jpg" /></td>
			<td><img src="images/bryllup/19.jpg" /></td>
			<td><img src="images/bryllup/20.jpg" /></td>
			<td><img src="images/bryllup/21.jpg" /></td>
			<td><img src="images/bryllup/22.jpg" /></td>
			<td><img src="images/bryllup/23.jpg" /></td>
			<td><img src="images/bryllup/24.jpg" /></td>
			<td><img src="images/bryllup/25.jpg" /></td>
			</tr>
			</table>
			
		</article>
	
	<footer>
		<p id="author"><a href="http://www.grafikk-design.no">Utviklet av Grafikk &amp; Design</a> </p>
		<p id="copyright">Copyright © 2011 Dagen i Bilder - All rights reserved.</p>
	</footer>
	

</body>
</html>

Topic	Replies	Views
Dropdown issue	111	August 20, 2006
Dropdown Menu Problem flash	37	March 24, 2004
Dropdown Menu Problem	98	March 24, 2004
Menu hover jogged over in ie6	102	July 30, 2009
Dropdown issue flash	35	August 13, 2006

Dropdown menu activates from two places and hover state issue

Follow:

Popular

Loose Ends

Dropdown menu activates from two places and hover state issue

Related topics

Follow:

Popular

Loose Ends