Simple CSS drop-down menu positioning

Dear EE community,

I have an incredibly simple CSS drop-down menu. However, I'm having trouble putting text either side of it. Any ideas?

Thanks in advance.

/* simple drop down menu - CSS */
#sddm
{	margin: 0;
	padding: 0; display:inline;
	z-index: 30;
}

#sddm li
{	list-style: none;
	float: left; 
}


#sddm li a
{	
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 10px;
	color:#FFFFFF;
	text-align: center;
	text-decoration: none;
}

#sddm li a:hover {	
        background:#000000;
	color:#FFFFFF;
}

#sddm div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid #000000;
	z-index: 2;
}

#sddm div a {	
        position: relative;
	display: block;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap; 
	text-align: left;
	text-decoration: none;
	background:#FFFFFF;
	color:#000000;
	z-index:2;
}

#sddm div a:hover {	
        background:#000000;
	color: #FFF;
}

Open in new window


<!--  simple drop down menu - HTML -->
<!-- not bothered to include the javascript as this is a CSS issue but can if it is required -->

<div class="FeedAmount">
show <ul id="sddm"><li><a onmouseover="mopen('m1')" onmouseout="mclosetime();"><?php echo $limit.'&nbsp;&#x25BC;'; ?></a>
        				<div id="m1" onmouseover="mcancelclosetime();" onmouseout="mclosetime();">
						<a href="<?php echo $_SERVER['PHP_SELF'].'?code='.$code.'&feed=25'; ?>">25</a>
						<a href="<?php echo $_SERVER['PHP_SELF'].'?code='.$code.'&feed=50'; ?>">50</a></div></li></ul> posts
</div>

Open in new window


So, in this example, I would like it to say "show <drop down menu here> posts" , if this is possible.
BenthamLtdAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
David S.Connect With a Mentor Commented:
The simplest solution would be to put the word (or group of words) before and after the menu each in a <span> and then float the <span>s.

The more complicated solution would be to use display:inline-block (which requires a bit of work to support older browsers).
http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

P.S. I suggest you consider making your menu usable for people who navigate with the keyboard.
0
 
BenthamLtdAuthor Commented:
Worked a treat, many thanks. Simply slapped a <span style="float:left;"></span> around each word.

And yes, I'll take into consideration keyboard navigation.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.