game_over Posted November 26, 2010 Share Posted November 26, 2010 I am trying to create a drop down menu for a button. It is a small image with text next to it, when hovered i want a drop down menu to appear. I have tried nesting it in UL/LI and then having a sub LI to display on hover, however when i put my button between <li> it goes crazy. I've tried doing list-style: none; padding: 0; margin: 0; to remove all styling from LI but it doesnt help, is there anything else? This is the code i want to have a drop down menu when hovered: <a class="profile" href="#"><span id="image"><img src="avatar.gif" /></span></a><span id="username">name</span> similar to what neowin is using for the username drop down menu at the top Link to comment Share on other sites More sharing options...
0 Cupcakes Posted November 26, 2010 Share Posted November 26, 2010 Nope, the best (and to be honest, only) way to do a dropdown menu is with an llist item in either an unordered (or ordered) list. Can you post up the CSS and HTML you have for your current dropdown menu? Or a linik to test out your dropdown in a browser? Link to comment Share on other sites More sharing options...
0 LaP Posted November 26, 2010 Share Posted November 26, 2010 Why would you want to create a drop down menu using tag others than ul and li? Semantically ul and li are the best options right now for a menu. http://htmldog.com/articles/suckerfish/dropdowns/ Link to comment Share on other sites More sharing options...
0 DeathLace Posted November 26, 2010 Share Posted November 26, 2010 Well technically you can do it with anything, it's just known that li's make it easiest, because they have most of the default CSS styling built in (display: block, width: 100% of parent element), so it usually lines up perfectly right away. But you can do it with anything as long as you sit and set the styling, but I would stick wtih the ul/li way, as it's the easiest. Link to comment Share on other sites More sharing options...
0 game_over Posted November 26, 2010 Author Share Posted November 26, 2010 Nope, the best (and to be honest, only) way to do a dropdown menu is with an llist item in either an unordered (or ordered) list. Can you post up the CSS and HTML you have for your current dropdown menu? Or a linik to test out your dropdown in a browser? this is basically it at the moment: <a class="profile" href="#"><span id="image"><img src="avatar.gif" /></span></a><span id="username">name</span> The css is positioning and sizing. When i stick an <li> round it, thats when it messes up, there is no styling applied to the list what so ever. I've done it using only DIVs but i dont think it's the best way to do it. #session a.profile:hover { position: relative; } #session div.menu { display: none; } #session:hover div.menu { display: block; position: absolute; top: 20px; left: 0; padding: 10px; margin: 10px; z-index: 100; opacity: 0.8; color: #ffffff; width: 100px; background: #000000; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } <div id="session"> <a class="profile" href="#"><span id="image"> <img src="avatar.gif" /></span></a> <span id="name">username</span> <div class="menu"> Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /> </div> </div> Link to comment Share on other sites More sharing options...
0 Cupcakes Posted November 26, 2010 Share Posted November 26, 2010 Why would you want to create a drop down menu using tag others than ul and li? Schematically ul and li are the best options right now for a menu. http://htmldog.com/articles/suckerfish/dropdowns/ Semantically ;). Suckerfish dropdowns are pretty outdated as well. There are plenty of versions that can utilize just CSS alone (no js) and work in a multitude of browsers. http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/ http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/ Link to comment Share on other sites More sharing options...
0 LaP Posted November 26, 2010 Share Posted November 26, 2010 Semantically ;). I blame google translate ;) Yeah suckerfish menu is old but i think it is one of the easiest to understand for someone who start. Link to comment Share on other sites More sharing options...
0 game_over Posted November 26, 2010 Author Share Posted November 26, 2010 The code in my previous post is working great, is it browser safe? obviously i've cleaned that Menu list up. Link to comment Share on other sites More sharing options...
Question
game_over
I am trying to create a drop down menu for a button. It is a small image with text next to it, when hovered i want a drop down menu to appear.
I have tried nesting it in UL/LI and then having a sub LI to display on hover, however when i put my button between <li> it goes crazy.
I've tried doing list-style: none; padding: 0; margin: 0; to remove all styling from LI but it doesnt help, is there anything else?
This is the code i want to have a drop down menu when hovered:
<a class="profile" href="#"><span id="image"><img src="avatar.gif" /></span></a><span id="username">name</span>
similar to what neowin is using for the username drop down menu at the top
Link to comment
Share on other sites
7 answers to this question
Recommended Posts