# Css drop down menu

**URL:** <https://forum.kirupa.com/t/css-drop-down-menu/311336>\
**Category:** Uncategorized\
**Created:** [July 3, 2010, 5:03am UTC](https://forum.kirupa.com/t/css-drop-down-menu/311336 "2010-07-03T05:03:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![drummer392](https://avatars.discourse-cdn.com/v4/letter/d/45deac/32.png) [@drummer392](https://forum.kirupa.com/u/drummer392)\
**Post date:** [July 3, 2010, 5:03am UTC](https://forum.kirupa.com/t/css-drop-down-menu/311336/1 "2010-07-03T05:03:09Z")

</div>

Hey guys,

I have been working on a drop down menu all day, and so far I have this code (below) and for some reason the drop downs are using part of the main \<li\>'s CSS properties, cause when try and change one thing for the drop down, the main \<li\> gets affected. What am I missing? Here is the code:

```auto
#menu{
	padding:0;
	margin:0;
	padding-left:270px;
}
#menu ul{
	padding:0;
	margin:0;
}
#menu li{
	position: relative;
	float: left;
	list-style: none;
	margin: 0;
	padding:0;
}
#menu li a{
	padding-left:8px;
	padding-right:8px;
	padding-bottom:10px;
	padding-top:12px;
	display: block;
	color:#FFFFFF;
	text-decoration:none;
}
#menu li a:hover{
	padding-left:8px;
	padding-right:8px;
	padding-bottom:10px;
	padding-top:12px;
	display: block;
	color:#203557;
	background-color:#fff;
	text-decoration:none;
}
#menu li ul{
	position: absolute;
	width: 180px;
	visibility:hidden;
}
#menu li ul a{
	color:#203557;
	background-color:#fff;
}
#menu li:hover ul, #menu li.hover ul{
	visibility:visible;
	font-size:12px;
	color:#203557;
	background-color:#fff;
}

```