purna_ch Posted August 8, 2014 Share Posted August 8, 2014 i have made a simple header page for a project. now i want to create a dropdown menu for a single menu item in the menu bar. how i will do that ..?? for ex-under COURSES MENU, THE SUBMENU ARE : DEGREE,DIPLOMA,HIGHSCHOOL. Quote Link to comment Share on other sites More sharing options...
CroNiX Posted August 8, 2014 Share Posted August 8, 2014 Many many ways. Best to google "css menu dropdown" Quote Link to comment Share on other sites More sharing options...
Zane Posted August 9, 2014 Share Posted August 9, 2014 It also helps us tremendously to have code written beforehand. Otherwise, you might as well ask "Is this a good car?" To answer you question without you having given code, just use the SELECT HTML tag, with OPTION tags inside. Quote Link to comment Share on other sites More sharing options...
WebOutGateway Posted August 12, 2014 Share Posted August 12, 2014 Creating a dropdown menu is simple with HTML and CSS. 1. Create your list of menu items, one with its sub-menu, using HTML. <ul id="menu"> <li> <a href="#">HOME</a> </li> <li><a href="#">COURSES</a> <ul class="sub-menu"> <li> <a href="#">DEGREE</a> </li> <li> <a href="#">DIPLOMA</a> </li> <li> <a href="#">HIGHSCHOOL</a> </li> </ul> </li> <li><a href="#">ABOUT</a> </li> </ul> 2. Next, using CSS, style your menu list as it is, when it is hovered, and the appearance of your submenu when the main menu is hovered. /*Initialize*/ ul#menu, ul#menu ul.sub-menu { padding:0; margin: 0; } ul#menu li, ul#menu ul.sub-menu li { list-style-type: none; display: inline-block; } /*Link Appearance*/ ul#menu li a, ul#menu li ul.sub-menu li a { text-decoration: none; color: #fff; background: #666; padding: 5px; display:inline-block; } /*Make the parent of sub-menu relative*/ ul#menu li { position: relative; } /*sub menu*/ ul#menu li ul.sub-menu { display:none; position: absolute; top: 30px; left: 0; width: 100px; } ul#menu li:hover ul.sub-menu { display:block; } Source: http://forums.phpfreaks.com/topic/290356-how-to-create-a-dropdown-list-in-a-header-menu-in-html-and-css/?do=findComment&comment=1487238 You may also want to take a look at this: http://cssmenumaker.com/blog/flat-dropdown-menu-tutorial I hope this helps. Thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.