943,192 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Problem with SImple Linear Drop Down Menu
Ad:
Permalink
Jul 28th, 2010
0

Problem with SImple Linear Drop Down Menu

Expand Post »
I am trying to create a simple horizontal dropdown menu using CSS. I have developed the code so far but there are two problems -
1. Positioning of the list items
2. Hovering can not make the sub-menu visible.
I have attached few screen shots.
the HTML code is as below -
HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="menu">
  2. 		<ul>
  3. 			<li class="current_page_item"><a href="#">Home</a></li>
  4. 			<li><a href="#">Blog</a></li>
  5. 			<li><a href="#">Photos</a></li>
  6. 			<li><a href="#">About</a></li>
  7. 			<li><a href="#">Links</a>
  8.             <ul>
  9.             	<li><a href="#">Movies</a></li>
  10.                 <li><a href="#">Games</a></li>
  11.                 <li><a href="#">Gadgets</a></li>
  12.                 <li><a href="#">Technology</a></li>
  13.             </ul>
  14.             </li>
  15. 			<li><a href="#">Contact</a></li>
  16. 		</ul>
  17. </div>

The CSS code is below -
HTML and CSS Syntax (Toggle Plain Text)
  1. /* Menu */
  2.  
  3. #menu {
  4. 	width: 940px;
  5. 	height: 120px;
  6. 	margin: 0 auto;
  7. 	padding: 0;
  8. 	background: url(images/img01.jpg) repeat-x left top;
  9. }
  10.  
  11. #menu ul {
  12. 	margin: 0px 0px 0px 10px;
  13. 	padding: 12px 0px 0px 0px;
  14. 	list-style: none;
  15. 	line-height: normal;
  16.  
  17. }
  18.  
  19. #menu li {
  20. 	float: left;
  21. 	list-style: none;
  22. 	margin: 0px 0px 0px 0px;
  23. 	padding: 0px 0px 0px 0px;
  24. 	position: relative;
  25. }
  26.  
  27. #menu a {
  28. 	display: block;
  29. 	height: 26px;
  30. 	width: 100px
  31. 	margin-right: 2px;
  32. 	margin-bottom: 10px;
  33. 	padding: 10px 20px 0px 20px;
  34. 	text-decoration: none;
  35. 	text-align: center;
  36. 	text-transform: uppercase;
  37. 	font-family: Arial, Helvetica, sans-serif;
  38. 	font-size: 12px;
  39. 	font-weight: bold;
  40. 	color: #FFFFFF;
  41. 	border: none;
  42.  
  43. }
  44.  
  45. #menu ul ul {
  46. 	visibility: hidden;
  47. }
  48.  
  49. #menu a:hover, #menu .current_page_item a {
  50. 	text-decoration: none;
  51. 	color: #FFF;
  52. 	text-shadow: 0 0 0.2em #BABABA, 0 0 0.2em #BABABA, 0 0 0.2em #BABABA, 0 0 0.2em #BABABA;
  53. }
  54.  
  55. #menu ul li: hover > ul{
  56. 	visibility: visible;
  57. }
  58.  
  59. #menu .current_page_item a {
  60. 	color: #FFFFFF;
  61. 	}

Please help in solving this.
Thanks.
Attached Thumbnails
Click image for larger version Name: css_prob.jpg Views: 115 Size: 52.4 KB ID: 16202  
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
priyam1309 is offline Offline
11 posts
since May 2010
Permalink
Jul 28th, 2010
0
Re: Problem with SImple Linear Drop Down Menu
I would try something like this

CSS Syntax (Toggle Plain Text)
  1. #menu ul li ul {
  2. margin:0;
  3. padding:0;
  4. position:absolute;
  5. top:26px;
  6. width:300px;
  7. visibility: hidden;
  8.  }

Note I specified a width, if you don't, chances are it will display as a vertical menu instead of horizonal. Hope this helps
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Jul 28th, 2010
0
Re: Problem with SImple Linear Drop Down Menu
px are a poor choice, the menu will work on Your pcs, but not on anyone elses with a different screen resolution window size basefont
0(zero) is dimensionless and will cause compliant browsers to throw the css definition away if it represented as 0px
css Syntax (Toggle Plain Text)
  1. #menu ul { margin:0 0 0 10px; padding:12px 0 0 0; list-style:none; }
lose the indenting of code, it is unneccessary, adds size to the file, is not needed by the browser, and does not improve readability for the developer. use an editor with code sysntax highlighting

did you consider any of the premade horizontal css menus available from sourceforge hotscripts phpscripts purecss (and others) to use as a development base, many are very well internally documented and explain what why when the author is using particular code.

invisible elements takes up space on the page. (the whitespace in your menu is the size of the invisible submenus) Use the "display" property to create invisible elements that do not take up space! (display:none; display:block; display:inline; )
and/or
Set the Z-index of the menu higher than 0 for other content to slide under it,
Set the z-index of the submenus higer than the menus, elements with different z-indexes can occupy the same x-y space on the page, then toggling visibility does not leave blanks, the higher z-index appears on top of the lower z-index, equivalent to page numbers

position:absolute; sets the element like the daniweb top menu, relative to the html page
position:fixed; sets the element like the daniweb bottom menu, relative to the window so can be made to remain onscreen
Last edited by almostbob; Jul 28th, 2010 at 1:40 pm.
Reputation Points: 562
Solved Threads: 365
Posting Maven
almostbob is offline Offline
2,967 posts
since Jan 2009
Permalink
Jul 29th, 2010
0
Re: Problem with SImple Linear Drop Down Menu
Click to Expand / Collapse  Quote originally posted by macneato ...
I would try something like this

CSS Syntax (Toggle Plain Text)
  1. #menu ul li ul {
  2. margin:0;
  3. padding:0;
  4. position:absolute;
  5. top:26px;
  6. width:300px;
  7. visibility: hidden;
  8.  }

Note I specified a width, if you don't, chances are it will display as a vertical menu instead of horizonal. Hope this helps

Hi Macneato,
I the problem comes when i require a horizontal menu. If a make position = absoluete, i get what i want will all menus lined up appropriatly. But i require a horizontal menu.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
priyam1309 is offline Offline
11 posts
since May 2010
Permalink
Jul 29th, 2010
0

Almost Solved but not completely...

Click to Expand / Collapse  Quote originally posted by almostbob ...
px are a poor choice, the menu will work on Your pcs, but not on anyone elses with a different screen resolution window size basefont
0(zero) is dimensionless and will cause compliant browsers to throw the css definition away if it represented as 0px
css Syntax (Toggle Plain Text)
  1. #menu ul { margin:0 0 0 10px; padding:12px 0 0 0; list-style:none; }
lose the indenting of code, it is unneccessary, adds size to the file, is not needed by the browser, and does not improve readability for the developer. use an editor with code sysntax highlighting

did you consider any of the premade horizontal css menus available from sourceforge hotscripts phpscripts purecss (and others) to use as a development base, many are very well internally documented and explain what why when the author is using particular code.

invisible elements takes up space on the page. (the whitespace in your menu is the size of the invisible submenus) Use the "display" property to create invisible elements that do not take up space! (display:none; display:block; display:inline; )
and/or
Set the Z-index of the menu higher than 0 for other content to slide under it,
Set the z-index of the submenus higer than the menus, elements with different z-indexes can occupy the same x-y space on the page, then toggling visibility does not leave blanks, the higher z-index appears on top of the lower z-index, equivalent to page numbers

position:absolute; sets the element like the daniweb top menu, relative to the html page
position:fixed; sets the element like the daniweb bottom menu, relative to the window so can be made to remain onscreen
Hi Almostbob,

One of the issues is solved. I used display instead of visibility and the menu items are lined up properly.. but still there's another issue. once the sub menu items are hidden i can not reveal them if i hover the mouse over the menu item. Any clues???

Moreover, other Hover properties work fine like creation of shadow of the menu items...
Last edited by priyam1309; Jul 29th, 2010 at 1:27 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
priyam1309 is offline Offline
11 posts
since May 2010
Permalink
Jul 29th, 2010
0
Re: Problem with SImple Linear Drop Down Menu
in css
.element:hover { display:inline;} ( or display:block; )

thats why I start with an existing script, too lazy
Last edited by almostbob; Jul 29th, 2010 at 3:38 pm.
Reputation Points: 562
Solved Threads: 365
Posting Maven
almostbob is offline Offline
2,967 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Google map directions not working properly
Next Thread in HTML and CSS Forum Timeline: Price Comparison Site - Advice Required


Tags
css, dropdownmenu, html



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC