Welcome to WebmasterWorld Guest from 54.158.143.40

Forum Moderators: not2easy

Message Too Old, No Replies

CSS drop down menu only showing on one page

   
10:11 am on May 3, 2013 (gmt 0)



Hi everyone!

I'm very new to this, it's my first site and I'm having trouble with my drop down menu:
My drop down menu drops under the section "research".
Well when I hover on "research" it only shows when I'm on the "research.html"page, not when I'm for example on the index.html page?
I've used the same code before and it worked so I'm guessing I have another rule which disables this rule.

Thank you for your help! (you'll find my code bellow)

Here is my css for the menu part:
body {
font-family: 'Raleway',Arial, Verdana, sans-serif;
margin:0px;
padding:0px;
/*background-color: #633;*/
background-image: url(../images_vrac/IMG_8429.JPG);
background-size:cover;
/*height:auto;*/
}

#container {
width: 960px;
margin: 0px auto;
background-image: url(../images/background.gif);
background-repeat:repeat-y;
height:2000px;
}
/*--head*/

#header {
width: 960px;
height: 200px;
padding-top:0px;
clear: both;
background-image: url(../images/banner4.gif);
}

#menu {
position:relative;
left: 0px;
top: 150px;
}

#menu ul {
display: inline-table;

}

#menu li {
float: left;
position:relative;
}


#menu li a {
text-align:center;
font-size: 120%;
margin: 5px;
line-height: 0.2em;
}

#menu ul ul {
display:none;
background-color: #faf3dd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#menu ul li:hover > ul {
display:block;
position:absolute;
padding-left: inherit;
}

#menu ul li li {
font-size:0.9em;
}

/*other significant parts*/

li {
list-style-type:none ;
padding:2px;
margin:4px;
}
a {
text-decoration:none;
color: #300;
}

li a:hover {
color: #FFF;
text-shadow: 1px 0px 1px #000000;
}

a:hover {
color: #7D6248 ;
}


MY html: index.html:

<!DOCTYPE html>

<head>
<metacharset="utf-8" />
<title>Home</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway|Alike' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="container">

<div id="header">
<div id="menu">
<ul> <li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About me</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="news">News &amp; Events</a></li>
<li><a href="vacancies">Vacancies</a></li>
<li><a href="people">People</a></li>
<li> <a href="contact">Contact</a></li>
</ul>
</div>
</div>

research.html:

<!DOCTYPE html>

<head>
<metacharset="utf-8" />
<title>Research</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway|Alike' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="container">

<div id="header">
<div id="menu">
<ul> <li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About me</a></li>
<li><a href="research.html">Research</a>
<ul><li> <a href="#.html">Group</a></li>
<li><a href="#.html">Homogenization</a> </li>
<li><a href="#.html">Tomography</a></li>
<li><a href="#.html">Bio-tissues</a></li>
<li><a href="#.html">New stuff</a></li></ul>
</li>
<li><a href="publications.html">Publications</a></li>
<li><a href="news">News &amp; Events</a></li>
<li><a href="vacancies">Vacancies</a></li>
<li><a href="people">People</a></li>
<li> <a href="contact">Contact</a></li>
</ul>
10:13 am on May 3, 2013 (gmt 0)



I changed the doctype for the post to make it shorter.
3:41 pm on May 3, 2013 (gmt 0)

10+ Year Member



In index.html you don't have the html for a drop down so nothing will show:

You have this:
<li><a href="research.html">Research</a></li>


It should be the same as the html on the other page.

e.g.this:


<li><a href="research.html">Research</a>
<ul>
<li> <a href="#.html">Group</a></li>
<li><a href="#.html">Homogenization</a> </li>
<li><a href="#.html">Tomography</a></li>
<li><a href="#.html">Bio-tissues</a></li>
<li><a href="#.html">New stuff</a></li>
</ul>
</li>
11:05 pm on May 3, 2013 (gmt 0)



OMG, thank you, sorry for wasting your time, this was so obvious i didn't even notice, shame on me.
11:10 pm on May 3, 2013 (gmt 0)



PS: you can close the post, problem solved!