drop down menu using css

Page 1 of 1

7 Replies - 1412 Views - Last Post: 22 May 2009 - 06:09 AM

#1 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

drop down menu using css

Posted 20 May 2009 - 05:06 AM

hi everyone

been trying to create a drop down menu for a navigation bar but cant quite figure out what I'm doing wrong! I'd like the different seasons to dro down under the "season"s heading when the mouse is over it and also other topics to appear under the "about" heading instead og where they are at the moment. ive tried a coupla permutations with css, changing the divs etc and eveing creating unordered lists but cant quite get it.

here is my css, ill include it all

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900x;
 color: black;
 padding: 10px;
 border: 1x solid #ccc;
 height: 100px;
 margin: 5px 0px 5px 0px;
 background: #C0D9D9;
}

#menubar {
border-top: 2px solid #e6e6e6;
	  border-right: 2px solid #b1b1b1;
	  border-bottom: 2px solid #b1b1b1;
	  border-left: 2px solid #e6e6e6;
	  background-color: #ccc;
	  color: #000;
	  height: 1.4em;
	  line-height: 1.2em;
	  }
	  
  .menu {
	  width: auto;
	  float: center;
	  padding: 0.1em 3em 0.1em 0.5em;
	  cursor: default;
	}
	
.menu ul {
	  display: none;
	  position: absolute;
	  background-color: #e6e6e6;
	  color: black;
	  list-style: none;
	  margin: 0.1em 0 0 0;
	  padding: 0;
	}
	
	.menu ul li {
	  display: block;
	  padding: 0.2em;
	}
	
	div.menu:hover ul {
	  display: block;
	  margin: 0;
	  padding: 0;
	}

	div.menu ul li:hover {
	  background-color: #ccf;
	}



#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #C0D9D9;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}


and my html:

<div id="menubar" class="menu">
		 <a name="top"></a>
	  <a href="index.html">Home</a> 
 
	 
	  
	  About Glen Moss  
	  
		<a href="about.html">About the area </a>
		<a href="gettinghere.html">Getting there</a>
		<a href="peatbog.html">What is a peatbog?</a>
	   
						
		 <a href="#">Seasons</a>	
		 <ul>
		<li><a href="spring.html" target="_blank">Spring</a></li>
		<li><a href="summer.html" target="_blank">Summer</a></li>
		<li><a href="autumn.html" target="_blank">Autunm </a></li>
		<li><a href="winter.html" target="_blank">Winter</a> </li>	
		</ul>
		
	<a href="links.html">Useful Links</a> 
 
   
  
  <a href="gallery.html">Gallery</a>
  
  
  <a href="contact.html">Contact Us </a>	
  
		  This is the Navigation		 
			   
		 </div>


if someone can give me a nudge in the right direction of how to get my drop down looking like it should id appreciate it!

thanks

Is This A Good Question/Topic? 0
  • +

Replies To: drop down menu using css

#2 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,289
  • Joined: 12-March 09

Re: drop down menu using css

Posted 20 May 2009 - 05:17 AM

you can use PHP,ASP or any other Server Side Language to get data from database.
Was This Post Helpful? 0
  • +
  • -

#3 firebolt  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 91
  • View blog
  • Posts: 5,561
  • Joined: 20-February 09

Re: drop down menu using css

Posted 20 May 2009 - 06:10 AM

Compare: This is just a simple CSS dropdown menu example.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body{font-family:georgia;}
#container{width:500px;margin:auto;font-size:11pt;}
 
#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
 
#menu ul:hover .item a{color:#fff;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999;}
 
#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
.clear{clear:both;height:10px;}
</style>
 
</head>
<body>
<div id="container">
<h1>css drop down</h1>
 
<div id="menu">
 
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
 
<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>
 
<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>
 
<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>
 
</div>
</body>

Was This Post Helpful? 0
  • +
  • -

#4 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: drop down menu using css

Posted 20 May 2009 - 06:43 AM

hi thanks for the replies. its just a simple css navigation bar so wont need a backend database for it.



 
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
 
<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>
 
<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>
 
<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

sorry what do the "item" and "top" refer to? cant see anything in the css. sorry bout all the questions im still learning!
Was This Post Helpful? 0
  • +
  • -

#5 firebolt  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 91
  • View blog
  • Posts: 5,561
  • Joined: 20-February 09

Re: drop down menu using css

Posted 20 May 2009 - 11:14 PM

Strange. I had it working before. Let me have a look at it.

Have a look at this link. It should help you.

http://sperling.com/examples/menuh/

Thanks.
Was This Post Helpful? 0
  • +
  • -

#6 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: drop down menu using css

Posted 21 May 2009 - 04:06 AM

thanks very much for your help, not sure what was wrong but seems to be working now!

thanks again

View Postfirebolt, on 20 May, 2009 - 10:14 PM, said:

Strange. I had it working before. Let me have a look at it.

Have a look at this link. It should help you.

http://sperling.com/examples/menuh/

Thanks.

Was This Post Helpful? 0
  • +
  • -

#7 firebolt  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 91
  • View blog
  • Posts: 5,561
  • Joined: 20-February 09

Re: drop down menu using css

Posted 22 May 2009 - 06:04 AM

OK. No problems.
Was This Post Helpful? 0
  • +
  • -

#8 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 199
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: drop down menu using css

Posted 22 May 2009 - 06:09 AM

If you have any future issues making changes, there are at least 2 snippets which implement a version of this:

Overlapping Vertical:
http://www.dreaminco.../snippet992.htm

Horizontal:
http://www.dreaminco...snippet1400.htm
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1