• 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

    • Microsoft locks Windows 11 user out, shows how easy losing data from forced encryption is by Sayan Sen Back in March earlier this year, a new redesigned Microsoft Account sign-in was released with the intention to make it "more modern, simple, and secure." Microsoft also probably hopes that the revamp will help win some hearts since many dislike the Microsoft Account (MSA) quite a bit as they are forced to use the service during Windows 11 installation. Yes, signing in to the MSA is one of the several system requirements for Windows 11, and it is also the recommended way and it clearly does not like it when users opt for a Local account instead. Microsoft often highlights the benefits of an MSA as it points out the unified access users get across devices and services like Windows, Office, OneDrive, and Xbox, which can help in synchronization of files and settings for convenience. A Microsoft Account also stores the BitLocker encryption key which is crucial thing that all users who have encryption need to store securely. Back in May this year, we covered reports of users losing their data as a consequence of BitLocker key loss, and this is a real danger for many, given that Microsoft now enables automatic BitLocker encryption on Windows 11 24H2, that most users won't even be aware of. So in the case of loss of access to a Microsoft Account, an affected user can suddenly find that they have lost all their data and there may be no way to recover it according to Microsoft's terms. Such account lock-outs can happen as a Reddit user deus03690 found out. The frustrated user claims that Microsoft apparently "randomly" locked their account when they were dealing with multiple data drives. They explain: The user has good reason to be annoyed and frustrated at this, Microsoft's own official guidance about the Account lock says: "If you tried to sign in to your account and received a message that it's been locked, it's because activity associated with your account might violate our Terms of Use." The Terms of Use for MSA explain how Microsoft deals with a closed account. It states: Thus, this shows how users can be pretty much helpless if they get locked out of MSA or lose access to it. It also shows how over-reliance on cloud services on Windows 11, something which LibreOffice recently pointed out, can lead to additional data nightmares like losing all of your data due to forced BitLocker encryption that you may not even be aware of was there in the first place. The solution? Consider keeping your important data backed up locally on internal or external HDDs and SSDs or NAS solution, as only cloud storage is probably not the best decision.
    • I don't know, I haven't checked what changed in previous sockets. I agree that the 1156-1155-1151 succession was suspicious, with a reduction in pin count every time. Intel could do a better job of pre-allocating pins for future use. Another hypothesis is that the internal layout of their CPUs change, like the I/O is moved from one place to another on the chip, and they need to reorganize pins rather than having circuitry go into spaghetti mode to remain compatible. I agree that if AMD is able to maintain compatibility, Intel should be able to do the same, at least by reserving pins for future use and then using those pins when a need for them arises. However, I wouldn't say that AMD's products are entirely better. Intel's I/O now slightly edges out thanks to having double the bandwidth to the chipset and dedicated Thunderbolt lanes to the CPU. It seems that they could widen their lead with the next platform. NVMe SSDs have increased the need for PCIe lanes significantly, and AM5 has been pretty underwhelming in that regard, especially because the chipset connection is so narrow and gets saturated with just 1 gen 4 SSD, leaving the other chipset connectivity (Ethernet, Wi-Fi, audio, etc) to hope for any remaining bandwidth. Otherwise motherboard manufacturers could also make more x2 M.2 slots, those would be fast enough at gen 5 speeds and possibly at gen 4 speeds too.
  • Recent Achievements

    • Week One Done
      korostelev earned a badge
      Week One Done
    • 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
    • Enthusiast
      Motoman26 went up a rank
      Enthusiast
  • Popular Contributors

    1. 1
      +primortal
      675
    2. 2
      ATLien_0
      264
    3. 3
      Michael Scrip
      184
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!