• 0

CSS Drop Down Menu without using UL/LI?


Question

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

7 answers to this question

Recommended Posts

  • 0

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?

  • 0

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.

  • 0
  On 26/11/2010 at 20:59, Cupcakes said:

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;
}


&lt;div id="session"&gt;
		&lt;a class="profile" href="#"&gt;&lt;span id="image"&gt;
		&lt;img src="avatar.gif" /&gt;&lt;/span&gt;&lt;/a&gt; 
		&lt;span id="name"&gt;username&lt;/span&gt;
		&lt;div class="menu"&gt;
				Menu&lt;br /&gt;Menu&lt;br /&gt;Menu&lt;br /&gt;Menu&lt;br /&gt;Menu&lt;br /&gt;
                &lt;/div&gt;
&lt;/div&gt;

  • 0
  On 26/11/2010 at 21:05, LaP said:

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/

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Watchdog finds Microsoft guilty of confusing advertising when it comes to Copilot by Usama Jawad While Microsoft is advocating for Copilot usage in both personal and enterprise environments as much as possible, it arguably hasn't made as big of a splash as it wanted. Now, the U.S. watchdog National Advertising Division (NAD) has criticized Microsoft for some of its advertising practices when it comes to Copilot. In a recent blog post spotted by The Verge, NAD noted that Copilot does possess the functionalities that Microsoft expressly claims it does in enterprise use cases. This includes capabilities like summarization of content, generating text, and creating outlines for PowerPoint slide decks. While Copilot does have some limitations in this area, NAD thinks that they are pretty minor, so the lack of disclosure in this area doesn't really impact how most customers leverage Copilot. That said, the watchdog discovered some problems in Microsoft's messaging when it came to Business Chat. It believes that Redmond's universal and interchangeable use of Copilot for both the assistant and Business Chat can cause confusion among users, as they judge their functionalities. For example, NAD argues that while Copilot is quite fast at seamlessly generating documents in other applications, this is not the case with Business Chat, which requires more manual steps, and this is not abundantly clear in the advertising on Microsoft's website. Finally, NAD advised Microsoft to get rid of its claims regarding an increase in productivity and ROI because while the tech giant does have supporting studies to back its boasts, they do not provide a "good fit" for objective claims. It's also worth highlighting that the UK government recently did trial Copilot in work environments and discovered that participants did save 26 minutes per day on average. Still, it seems like this is not good enough for NAD. Interestingly, Microsoft did respond to NAD's advisory, saying that while it disagrees with some of the watchdog's findings, it has made changes to its advertising messages in order to comply with NAD's recommendations. Source: NAD via The Verge
    • My new emergency poo ticket holder
    • These are the same ignorant, gullible, cowardly fools who still believe that gods are real and that fictional White Jesus is coming back to Earth "any day now". It's a Venn-diagram of two almost perfectly concentric circles. In short, they'll buy anything you lie to them about as long as it makes them less afraid... Of things the rest of us know we don't have to be afraid of at all.
    • It isn't fair to shift all blame to the user. Yes, the user shouldn't have blindly trusted MS with all their data, but assuming the facts reported are correct, MS massively screwed up too. Both can be true.
    • How about with add up/down votes on posts instead? Then we could upvote posts that are True based on the facts and supported by evidence. And we could also downvote the ridiculous paranoid rantings of ignorant, gullible, cowardly people who still fall for ancient proven lies and obvious fearmongering scams behind such nonsense like white supremacy, Nazism, Trumpism, etc. I'm willing to give it a try. How about you?
  • Recent Achievements

    • Experienced
      dismuter went up a rank
      Experienced
    • One Month Later
      mevinyavin earned a badge
      One Month Later
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
  • Popular Contributors

    1. 1
      +primortal
      699
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      211
    4. 4
      +FloatingFatMan
      186
    5. 5
      Steven P.
      142
  • Tell a friend

    Love Neowin? Tell a friend!