2 Replies - 818 Views - Last Post: 24 July 2009 - 06:31 PM

#1 mejnoona  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-April 09

css drop down menu for menu

Posted 15 July 2009 - 02:44 PM

I have some css code. I have the basics, but I am having problems with getting the menu to pop out the submenu like it should.
Here is my code. It is meant to be a horizontal navigation dropdown menu on the page. What this code does is it puts the link under the header item, but it does not hide itself and when you put the mouse over the header, nothing happens.
Thanks

<html>

<head>

<style type="text/css">


body {

background-color:black;
}

#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}


#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

#menu ul ul,
#menu ul li:hover ul ul,
#menu ul ul li:hover ul ul
{display: none;}

#menu ul li:hover ul,
#menu ul ul li:hover ul,
#menu ul ul ul li:hover ul
{display: block;}


</style>

</head>

<body>


<div id="menu">

<ul>About
<li><a href="us.php">Us</a></li>
<ul>

</div>

</body>

</html>




Is This A Good Question/Topic? 0
  • +

Replies To: css drop down menu for menu

#2 mejnoona  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-April 09

Re: css drop down menu for menu

Posted 24 July 2009 - 06:22 PM

I found this tutorial on dreamincode.net and it worked really good until I added another item to the drop down menu for the Home section.

Here's the css

body {
margin-left:0;
margin-top:0;
background-color:red;

}

#home {
color: white;
background:blue;
font-size: 20px;
font-family: Arial;
height:60px;
left:32px;
line-height:20px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:100px;
z-index:100;

}

#home:hover {
background:darkblue none repeat scroll 0%;
cursor:pointer;
height:40px;
}

#home a:visited, #about a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%;
}



#home a:hover {
background:blue;
color: white;
}

#involve {
color: white;
background:blue;
font-size: 20px;
font-family: Arial;
height:20px;
left:129px;
line-height:20px;
overflow:hidden;
position:absolute;
text-align:center;
top:50px;
width:200px;
z-index:100;

}

#involve:hover {
background:darkblue none repeat scroll 0%;
cursor:pointer;
height:40px;
}

#involve a:visited, #about a {
color:white;
display:block;
line-height:18px;
text-decoration:none;
width:100%;
}



#involve a:hover {
background:blue;
color: white;
}


#content {
position:relative;
width:500px;
margin-top:100;
margin-left:auto;
margin-right:auto;
background:white;
color:black;
}

.h1institute #content {
color:black;
height:20;
}

.h1intermediate #content {
color:black;
height:20;
}

.h1study #content {
color:black;
height:20;
}

.logo {
color:black;
height:20;
text-align:center;
}




Here's the html

<div id="home">
Home</br>
<a href="index.php"> Home</a>
<a href="about.php"> About</a>
</div>
<div id="involve">
Get Involved</br>
<a href="textpiece.php">Text to Performance</a>

</div>



I increased the height in the home section in order to make room for the about link. But now if I go to my page, it has the home, home showing. When I hover over the index.php (home link) it then shows me the about. It is supposed to show the about and home (index.php) when i hover over the first home (the header).

What am I missing here? Thanks
Was This Post Helpful? 0
  • +
  • -

#3 mejnoona  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 25-April 09

Re: css drop down menu for menu

Posted 24 July 2009 - 06:31 PM

nm I was editing in wrong place. Now I'm good:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1