Jump to content

Drop down menu bar


Asim

Recommended Posts

Hey guys I am trying to create a simple drop down menu bar.Now I know I can search google and get the results lol but I need help to understand it. I did use google and came with some drop down menus but I hardly understood the code to do anything or what to edit..Now I have made a simple menu bar here is the coding....THIS IS THE CSS CODING

@charset "utf-8";/* THIS IS THE MAIN NAVIGATION BAR SETTING CHANGE THE WIDTH COLOUR AND PADDING..*/ul#navigation {	list-style:none;	width:525px;	padding-top: 0px;	padding-left: 140px;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;}ul#navigationv li {	display:inline;	background-color: #000;}/* YOU CAN CHANE THE BACKGROUND COLOUR HERE */ul#navigation li a {	text-decoration:none;	padding:5px 0;	width:100px;	color:#000;	float:left;	background-color: #B7B7B8;}ul#navigation a {	text-align:center;	border-left-width: 1px;	border-left-style: none;	border-left-color: #fff;	background-color: #FFF;}/* THIS PART IS FOR WHEN THE BORWSER MOUSE IF OVER THE MENUBAR, YOU CAN CHANGE THE ROLLOVER IMAGE OR MAKE IT A COLOUR...*/ul#navigation a:hover {	background-image:url(../Images/Menu.png);	color:#FFF;}

THIS IS THE HTML CODING

   <ul id="navigation">      <li><a href="Home.html">Home</a></li>      <li><a href="About.html">About Us</a></li>      <li><a href="Services.html">Services</a></li>      <li><a href="Products.html">Products</a></li>      <li><a href="Contact.html">Contact</a></li>    </ul>

Now what can I add to this one I already made, so that it becomes a drop down menu?Thanks

Link to comment
Share on other sites

Asime spasi me! :)You can check www.lijecenje-kuranom.com to see what I've done, and what are you missing.
assalamu alaikum :) can you get me the code for that?? or just tell me what do add cause there is so much data that I don't know...Thank You
Link to comment
Share on other sites

You see.<ul class="meni" valign="middle"> <li><div class="ld">Glavni meni</div> <ul> <li onclick="location.href='/index'"> <a class="meni" title="Početna stranica" href="/index">Početna stranica <br /><span class="meni_opis">(Povratak na početnu stranicu)</span></a></li>You have just <ul> <li>, but I have <ul> <li> <ul> <li>

Link to comment
Share on other sites

Hey guys I am trying to create a simple drop down menu bar.
ok I found time to make changes to your style sheet I only put in where changes are neededa big part of the stumbling block was the typo in your style sheet, 'navigationv'
ul#navigation>li		/*%%new%% fix typo in style name*/			/*%%and make apply to first child only   the '>'*/			 {	display:inline;/*	background-color: #000;*/		/*why make colour black here?*/	float:	left;	/*%%new%% make float left so second level can float underneath*/}/*%%new%% applies to second level menu*/ul#navigation li ul	{	display:		none;	/*hide it for now*/	list-style-type:	none;	/*no bullets*/	background:	#fed;	/*give it background and perhaps border so it stands out*/	padding-top:	2em;		/*fix for IE and Opera*/	}ul#navigation li:hover ul	{	display:		block;	/*when hover on parent element make it show*/	}

and the HTML

  <ul id="navigation">	  <li><a href="Home.html">Home</a><ul><li>one</li><li>two</li><li>three</li></ul></li><!--end li for first menu-->	  <li><a href="About.html">About Us</a></li>	  <li><a href="Services.html">Services</a></li>	  <li><a href="Products.html">Products</a></li>	  <li><a href="Contact.html">Contact</a><ul><li>four</li><li>five</li><li>six</li></ul></li>	</ul>

Note that the second level UL must be before the </li> of the parent element.This should get you on your way..just add more margins, padding, hover effects, etc.You should also try removing some style elements, one line at a time...you have a few that do not do anything.Before you go much further, check in all browsers. I have added one patch for IE and Opera, you may run into other glitches.enjoy . . .Guy

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...