homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS drop down menu only showing on one page
maxounette1



 
Msg#: 4570315 posted 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#: 4570315 posted 10:13 am on May 3, 2013 (gmt 0)

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

Paul_o_b

10+ Year Member



 
Msg#: 4570315 posted 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#: 4570315 posted 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#: 4570315 posted 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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved