Rounded dropdown menu

HTML & CSS
1

I been trying to create a drop down menu which looks like the first picture attached, and my attempt is the second picture attached:

here is my CSS code so far, can anyone help me please?

.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	border-bottom: 5px solid #e39333;
	clear: both;
	float: left;
	height: 39px;
	width: 940px;
	display: inline;
}
.sf-menu ul {
	margin: 0;
	padding: 0;
}

.sf-menu li {
	float: left;
	position: relative;
	list-style: none;
	margin: 0 2px 0 0;
	padding: 0;
}
.sf-menu li a {
	display: block;
	float: left;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	padding: 10px 0 0 12px;
	margin: 0 0 0 8px;
	height: 29px;
}

.sf-menu li a:hover{
	text-decoration: underline;
}

.sf.menu li ul {
	width: auto;
	position: absolute;
	clear: left;
	top: 38px;
	left: 10px;
	display: none;
	text-align: left;
	font-size: 0.9em;
	background: transparent;
	z-index: 1;
}

.sf.menu li ul li {
	clear: both;
	text-align: left;
	background: transparent;
}

.sf.menu li ul li a {
	padding: 5px 10px 5px 10px;
	font-size: 1em;
	text-align: left;
	margin: 0;
	width: 120px;
	height: auto;
}

.sf.menu li a:hover{
	text-decoration: underline;
}

.sf.menu li.over a {
	text-decoration: none;
}

.sf.menu li ul li a, #Menu li.over li a {
}

.sf.menu li:hover ul, #Menu li.over ul {
	display: block;
}

.sf.menu li ul li a:hover {
	text-decoration: underline;
}
2

Hi, put your live attempt somewhere, the <ul> can probably have the black background, the <li> a green background (with the rounded image on it)…should be very straightfoward.

What exactly are you having problems with? If no live link is available then please post full HTML :slight_smile:

3

Hi, I don’t know where your green graphics are for the rounded corners…but on the #Menu ul, just give “overflow:hidden” and a black background (mess with font colors of course)

Then on the <li>'s you can just set the rounded corners image :slight_smile:

It really is straight foward :slight_smile:

As for the dropdown, you don’t even have dropdown code in there!

The HTML should contain something like this. The bolded is the actual dropdown


<ul>
<li><a href="#">Text</a>
[b]<ul>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
</ul>[/b]
</li>
</ul>

Get a dropdown going by looking off this Suckerfish dropdown tutorial :slight_smile:

4

Just PM you with the live link dont want it to be posted on the forum, please have a look.