• 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

    • Here in the UK we used to have a mobile network that would've been perfect for Trump. It was called ... Orange!
    • Trump's team takes down Trump Mobile coverage map that includes "Gulf of Mexico" by David Uzondu Image via Depositphotos.com When Donald Trump returned to office in January this year, one of the first things he did was sign an executive order to officially rename the Gulf of Mexico to the "Gulf of America". It was a signature move, but it seems his own team might have forgotten about it. The rollout for the new Trump Mobile service, a venture headed by his sons, is already facing issues with its pre-orders, and now has a whole new self-inflicted problem to deal with. A post from Travis Akers (@travisakers) has shown that the Trump Mobile official coverage map, intended to show potential customers their signal strength, prominently featured the name "Gulf of Mexico." It appears shortly after Akers's post went live, the Trump team took down the page, so if you visit trumpmobile.com/coverage, you would get a 404 error. Anyways, here's a screen recording of what the page looked like before the take down (double click to enlarge): So, how could the Trump team make such a mistake on something so politically important to them? From the recording, it looks like the coverage map is powered by Mapbox, a popular location platform for developers. Mapbox, by default, still uses "Gulf of Mexico" because its core map data is built on global sources like OpenStreetMap, which have not adopted the unilateral name change. Even though the official name is different in the US, these global datasets stick to the international consensus. Other tech companies, like Google, address this by changing their maps to display "Gulf of America" only for users in the US, a decision that annoyed the president of Mexico. The funny thing is, fixing this would have been pretty simple. Mapbox is quite flexible, and you can edit "natural features", including bodies of water. Here's how we did it (click to enlarge): The Trump Mobile coverage map has been offline for over five hours, as the Trump team presumably works to fix the issue and bring the page back online.
    • Maybe stop using that ###### once and for all? One can live withouth it. Anything META is cancer.
    • This also highlights the dangers of giving corporations unencrypted access to your documents / photos. It would appear this persons data has likely been scanned by Ai, which found something it didn't like, locking access to the account.
  • Recent Achievements

    • 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
    • Mentor
      M. Murcek went up a rank
      Mentor
  • Popular Contributors

    1. 1
      +primortal
      684
    2. 2
      ATLien_0
      266
    3. 3
      Michael Scrip
      194
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!