Asim Posted February 27, 2011 Share Posted February 27, 2011 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 More sharing options...
[dx] Posted February 27, 2011 Share Posted February 27, 2011 Asime spasi me! :)You can check www.lijecenje-kuranom.com to see what I've done, and what are you missing. Link to comment Share on other sites More sharing options...
Asim Posted February 27, 2011 Author Share Posted February 27, 2011 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 More sharing options...
[dx] Posted February 27, 2011 Share Posted February 27, 2011 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 More sharing options...
cousineaug Posted February 28, 2011 Share Posted February 28, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.