Welcome to WebmasterWorld Guest from 54.196.208.6

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)

New User

joined:May 3, 2013
posts: 4
votes: 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)

New User

joined:May 3, 2013
posts: 4
votes: 0


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

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


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)

New User

joined:May 3, 2013
posts: 4
votes: 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)

New User

joined:May 3, 2013
posts: 4
votes: 0


PS: you can close the post, problem solved!