Drop Down Menu

HTML & CSS
1

Hello

I am having trouble in getting my drop-down menu to work. I have never done one before and I am still a relative beginner on CS3.

http://www.ubereadoolische.com/home.html

Firstly the drop down links are not aligned properly.

Secondly it is not separated from the remaining text.

Thirdly I cannot hover over them to click them.

Can anyone advise?

Thanks
James

2

Hi,

The main section is position:relative which means that it has more priority over the nav and therefore cuts off the dropdown when you try to reach it. Just give the nav a higher z-indez and position:relative.

Don’t place the dropdown too far away from the trigger item because even if there is a 1px gap you will not be able to reach the menu before it disappears. There must always be a connection between the trigger item and the dropdown.

I would also set the list item to be display:inline-block as some browsers don’t like positioning in respect of inline elements.

Here is the revised dropdown code:


.nav {
	border: 1px solid #FFAE00;
	border-width: 1px 0;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	position:relative;
	z-index:9;
}
.nav ul{margin:0;padding:0;list-style:none}
.nav li {
	display: inline-block;
	text-decoration: none;
	position: relative;
}
.nav a {
	display: inline-block;
	padding: 10px;
}
ul ul {
	display: none;
	width: 200px;
	position:absolute;
	top:100%;
	left: 0;
	text-align:left;
	background:rgba(0,0,0,0.7);
	box-shadow:10px 10px 10px rgba(255,255,255,0.1);
}
ul ul > li {
	float: none;
	position: relative;
}
ul > li:hover > ul { display: block; }
ul > li:hover >a{	color: #FFAE00;}

Just replace your section with the above.

Note that usually you would place page defaults like your links at the top of the stylesheet and not mixed in with other code:


a:link {
	color: #E10048;
	text-decoration: none;
}
a:visited {
	color: #7375D8;
	text-decoration: none;
}
a:hover {
	color: #FFAE00;
	text-decoration: none;
}
3
4

Thank you ever so much, you are amazing :slight_smile:

Never come across z-index before.

5