• 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

    • Save 15% on the Insta360 Link 2 4K Webcam, now available at the lowest price by Taras Buria Insta360 is known for its high-quality 360-cameras, but the company also offers high-end webcams for those who want to elevate their video calls or streaming. Right now, the Insta360 Link 2 4K webcam is available at a new all-time low price, saving you 15% off the standard MSRP. The Insta360 Link 2 is not your standard 4K webcam. This camera is mounted on a two-axis gimbal that physically pans and tilts to follow you as you move around the room. You can also set boundaries to prevent the camera from capturing certain areas and control it with gestures for a hands-free experience. The camera itself has a large 1/2" 4K sensor that captures more light and details with HDR and low-light mode support. A larger sensor also means a more natural bokeh effect. Built-in microphones support voice focus and voice suppression, and the camera can balance your voice with background music. Other features include additional modes, such as whiteboard mode, DeskView mode, portrait mode, and privacy mode. The latter tilts the camera down after 10 seconds of inactivity (you can also push it down manually). The Insta360 Link 2 is also remotely operated with a dedicated phone app, plus its desktop software lets you adjust features like background, filters, and more. Insta360 Link 2 4K Webcam - $169.99 | 15% off on Amazon US Insta360 Link 2 4K Webcam Tripod Bundle - $195 | 15% off on Amazon US 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.
    • RIP Jonathan Joss aka John Redcorn https://www.nbcnews.com/news/us-news/jonathan-joss-king-hill-voice-actor-killed-san-antonio-shooting-rcna210437
    • This will happen regardless what simply because people are upgrading their gear.
    • Rest in Peace, Loretta.  😢
    • Well, so did Lt. O'Reilly... but, we had to go there. 😂
  • Recent Achievements

    • Week One Done
      Nullun earned a badge
      Week One Done
    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      160
    2. 2
      ATLien_0
      124
    3. 3
      Xenon
      120
    4. 4
      snowy owl
      109
    5. 5
      +Edouard
      97
  • Tell a friend

    Love Neowin? Tell a friend!