hola tengo un problema con ul li
este es mi codigo
Código HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="index.css?v=<?php echo time(); ?>" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head">
<div class="menu" style="width:596px;float:right;paddding-right:20px;">
<ul style="float:right;paddding-right:10px;padding-right:10px;">
<li >
<a href="#" class="top">Diego
<table><tr><td>
<ul id="m1">
<li><a href="javascript:op(0,1)">ROCK</a></li>
<li><a href="javascript:op(1,1)">DANCE</a></li>
<li><a href="javascript:op(16,1)">R & B</a></li>
<li><a href="javascript:op(18,1)">POP</a></li>
<li><a href="javascript:op(15,1)">BEATBOX</a></li>
</ul>
</td></tr></table></a>
</li>
<li >
<a href="#" class="top">Salir</a>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="contingut"></div>
</div>
</body>
y este mi css
Código HTML:
body {
margin: 0px;
font: 11px Arial, Helvetica, sans-serif;
background-color: #fff;
overflow: auto; }
#logo {
padding: 2px 0 0 8px;
height: 20px;
float: left; }
#head {
background: #559bce;
padding-bottom: 8px;
height: 25px; }
#content {
height: auto;
padding: 9px 0 8px 9px; }
#user {
float: right;
width: 330px; }
.header { background-color: #559bce; }
.back { background-color: #559bce; }
body{background:#03689B;font:11px Arial, Helvetica, sans-serif}
#topbar{height:27px;width:100%;position:absolute;top:0;left:0;z-index:500}
a{outline:none}
.menu ul{
list-style-type:none;
padding:0;
margin-top:0;
margin-right:10px;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
margin-right:-10px;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:100;
left:-2px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:12px;
font-weight:bold;
width:149px;
padding:9px 0;
color:#fff;
background-color:#449ECB;
text-decoration:none;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#000;
background:orange;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
padding-top:7px;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
.menu .top{background:url('http://www.viciao2k3.net/t/tri1.gif') no-repeat bottom center;}
.menu .top:hover{background:url('http://www.viciao2k3.net/t/tri2.gif') no-repeat bottom center;}
#contingut{
background:url('http://www.viciao2k3.net/tv/load.gif') no-repeat center center;
text-align:center;
vertical-align:middle;
margin-top:-222px;
margin-left:-390px;
position: absolute;
top:50%;
left:50%;
width:780px;
height:445px;
}
el problema es que en la barra superior los links diego y salir estan muy separados y necesito que esten mas cerca el css no es mio y nose como solucionarlo