• 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

    • The Radeon RX 9060 XT is 5% slower than the GeForce RTX 5060 Ti, but the GeForce RTX 5060 Ti is 23% more expensive, at least when comparing MSRPs.
    • I would love to see Musk's face! 🤣🤣🤣
    • I think each AI option has their ups and downs. For Copilot, I find it more personable in how it talks compared to GPT & Gemini. I also appreciate the open ended questions it often provides at the end of its responses to keep the conversation going.
    • Microsoft offers free access to AI video creation with Bing Video Creator by Pradeep Viswanathan Two years ago, Bing Image Creator became one of the first major online services that allowed users to create images from text using OpenAI’s DALL-E model. Today, Microsoft is introducing Bing Video Creator, powered by OpenAI’s Sora, allowing users to create videos with text prompts. Despite announcing Sora last year, OpenAI has not been able to expand its availability to millions of ChatGPT users due to huge AI infrastructure requirements. It is still only available to ChatGPT Pro subscription users, which costs about $200 per month. Recently, Google announced its Veo 3 video generation model, which performs significantly better than OpenAI’s Sora, to all Gemini paid subscribers, making video generation accessible to even Gemini Pro subscribers, which costs just $20 per month. Now, Microsoft is democratizing access to video generation models by making Bing Video Creator free for all Bing users. Bing Video Creator is rolling out today globally (excluding China and Russia) on the Bing Mobile App, and it will be coming soon to the Bing desktop experience within Copilot Search. Bing Video Creator users will have the ability to choose between Fast and Standard generation speeds. Each user will have 10 Fast creations; following that, users can redeem 100 Microsoft Rewards points for each Fast creation or continue with Standard creation speeds. Once you have downloaded the Bing mobile app, here’s how you can access the Video Creator feature: Open Video Creator within the Bing Mobile app by clicking on the menu in the bottom right corner and selecting “Video Creator.” Just type in a text description of the video you want to create in the prompt box. Once the prompt text is ready, just tap “Create.” Or you can also just type directly into the Bing mobile app search bar "Create a video of..." to create a video. You’ll receive a notification when your video is ready to view. If required, you can also download the video or share it via social media or email. You will also have the ability to copy a direct link to the video for easy sharing elsewhere. Microsoft will be storing the generated videos for up to 90 days in your account for easy access later. Microsoft noted that the Bing Video Creator videos are 5 seconds long and can be created only in 9:16 format for now. Microsoft will be adding the 16:9 format soon. When you are waiting for your video to be created, you can also queue up another two videos. Once one of the slots becomes available, you can add another one to the queue. When Bing Video Creator becomes available on desktop, you can visit Bing.com/create for both image and video creation needs.
  • 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
      150
    2. 2
      ATLien_0
      122
    3. 3
      Xenon
      121
    4. 4
      snowy owl
      99
    5. 5
      +Edouard
      95
  • Tell a friend

    Love Neowin? Tell a friend!