homepage Welcome to WebmasterWorld Guest from 184.73.52.98
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS drop down menu only showing on one page
maxounette1




msg:4570317
 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>

 

maxounette1




msg:4570318
 10:13 am on May 3, 2013 (gmt 0)

I changed the doctype for the post to make it shorter.

Paul_o_b




msg:4570384
 3:41 pm on May 3, 2013 (gmt 0)

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>

maxounette1




msg:4570490
 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.

maxounette1




msg:4570491
 11:10 pm on May 3, 2013 (gmt 0)

PS: you can close the post, problem solved!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved