Есть горизонтальное меню, при наведении на ссылку которого, выпадающее из него меню в виде строчки ссылок должно "выпадать" чуть выше первого. На практике имеем косяк в виде увеличения "родительского" li до величины "дочернего", что рушит всю разметку и ещё парочку неприятных "следствий".
Думаю, я что-то неправильно пишу в css, но что -- не понимаю.
Страница:
http://romaadelante.ru/t/test.html
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
$('.navmenu ul li').hover(
function() {
$(this).find('ul').slideDown();
},
function() {
$(this).find('ul').slideUp('fast');
}
);
});
</script>
<style type="text/css">
.navmenu ul {
padding: 0;
margin: 0;
display:inline;
list-style: none;
}
.navmenu li {
display: inline;
margin:0;
padding:0;
float:left;
}
.navmenu ul ul{
position:relative;
top:-50px;
padding:0;
margin:0;
display: inline;
}
</style>
</head>
<body>
<div class="navmenu" style="position:absolute;top:100px;left:100px;">
<ul>
<li> <a href="#">toplink1</a>
<ul style="display: none;">
<li><a href="#">link1</a> / <a href="#">link2</a> / <a href="#">link3</a></li>
</ul>/
</li>
<li> <a href="#">toplink2</a>
<ul style="display: none;">
<li><a href="#">link21</a> / <a href="#">link22</a> / <a href="#">link23</a></li>
</ul>/
</li>
</div>
</body>
</html>