• 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

    • Boy, I wonder how much time they'll save when Copilot ######s something up and they find out the error years if not decades later. It's not like UK had a massive ######up within their postal service decades ago that destroyed hundreds of lives of Brits because their computer systems were hallucinating s**t...
    • You clearly missed the sarcasm in that comment. It's pretty clear that the point of that comment was to point out the irony in the fact that nearly every negative thing people say about Windows 11, also applies to Windows 10. Heck, even the Win10 start menu was wildly unpopular when it came out.
    • Even biggest AMD fans and Intel haters will love this 14600K deal as you get free 240 AIO by Sayan Sen Last week, the Intel 14600K was on sale for $193, and you also got a free game with it. However, it looks like there is still some stock of these chips left, as the processor is selling for $199. Along with the free game, you also get a free 240 mm AIO liquid cooler (purchase link under the specs list below). The 14600K is based on Intel's 14th Gen Raptor Lake Refresh design. Since it is a K variant, it is unlocked for overclocking. However, do keep in mind that it is a fairly power-hungry processor, much more so than something like an equivalent Ryzen. But the chip is fairly powerful, and you can enjoy excellent gaming and productivity performance with it. Speaking of AMD Ryzen, the 14600K is about equivalent to the Zen 4-based 7600(X) in gaming and faster in productivity, thanks to the E-cores. Ensure your motherboard has decent VRM power delivery and cooling (ideally a Z790 chipset motherboard), plus you will need a good quality air cooler (and a complementary good case with excellent airflow) or a 240/280 mm AIO liquid cooler. Thus this is where the free MSI AIO cooler will come in handy. The technical specs of the 14600K are given below: Core Count: 14 (6 Performance Cores + 8 Efficiency Cores) Thread Count: 20 Base Clock Frequency: 3.5 GHz (P-core), 2.6 GHz (E-core) Boost Clock Frequency: Up to 5.3 GHz Cache: 24 MB Cache Stock Memory Support: DDR4 (3200 MT/s) and DDR5 (5600 MT/s) Socket: LGA 1700 TDP: 125 W Integrated Graphics: Intel UHD Graphics 770 PCIe Support: PCIe Gen 5 (16 lanes) and Gen 4 (4 lanes) Process Technology: Intel 7 (10 nm) Maximum Temperature: 100° C Get the Intel Core i5-14600K at the link below (make sure to select the checkbox for the free AIO and the free game): Intel Core i5-14600K BX8071514600K + MSI MAG Coreliquid A13 240mm Liquid Cooler 240mm + Free Intel Spring Bundle (Civilization VII & Dying Light: The Beast): $199.99 (Sold and Shipped by Newegg US first-party seller) This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • I think the use of AI generated ads will be directly proportional to the cost of the ad time. If you are paying $1,000 to put some ads on social media, then expect the level of effort to reflect that price (and it has for years). If you are paying $1,000,000 for ad time, then expect more effort.
    • nvm.. You can use daisy chain if your monitors can use it.  
  • Recent Achievements

    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
    • Week One Done
      rollconults earned a badge
      Week One Done
    • Week One Done
      lilred1938 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      142
    2. 2
      Xenon
      130
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      97
  • Tell a friend

    Love Neowin? Tell a friend!