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 & 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 & 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>
