/*1번*/

li{
  color:#3333FF !important;
  }

1번과 2번중에 스타일이 우선적으로 적용되는 대상은 1번보다 더 구체적인 2번마크업대상에 스타일값이 적용된다.

여기서 내가 강제적으로 최우선적으로 적용되게 하는 값이

 !important;

이다..

li{float:left;}처럼 메뉴 수평배치하는 또 다른 명령은...

li{display:inline-block;}

이 명령으로 수평처리하면

li다음에 오는 대상이 끌려오는 것을 막을 수 있다.

* 상위 ul에 overflow:hidden;을 안해도 된다

 (상단대메뉴의 서브메뉴가 타이틀부분까지 걸쳐 보여질때에 필요함)

ul의 너비를 줄이지 않고 li들을 중앙정렬하려면

li{inline-block;}   ul{text-align:center;}

일단 확인하시고...

 <style type="text/css">
 *{
  margin:0;
  padding:0;
  }
 ul.menu{
  list-style:none;
  border-top:2px solid gray;
  height:100px;
  outline:1px solid green;
  text-align;center;
  }
 ul.menu li{
  display;inline-block;
  text-align:center;
  border:1px solid red;
  width:200px;
  }
 </style>