0
필자가 작업해온이 플라이 아웃 메뉴를 못 박는 것에 가깝습니다. 현재 몇 가지 문제점이 있습니다.jQuery CSS 사용자 정의 플라이 아웃 메뉴 스타일 지정 문제
내 하위 메뉴 항목에 왼쪽/오른쪽 패딩을 얻으려고합니다. 그다지 나쁘지는 않습니다. 또한 첫 번째 하위 메뉴가 표시 될 때 목록 항목의 첫 번째 행과 자식 사이에 약간의 간격을 만들려고합니다.
다음은 현재 코드와 내가 원하는 것을 보여주는 스크린 샷입니다. 내 현재의 CSS를 기반으로, 이것을 깨끗한 방법으로 처리하는 방법에 대한 생각은 무엇입니까?
<!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></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$("#nav ul").css({ display: "none" }); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function() {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function() {
mainmenu();
});
</script>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
body
{
font-size: 0.85em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#nav a
{
display: block;
padding: 4px 0px 4px 0px;
color: #dfca90;
text-decoration: none;
background-color: #ECE9D8;
font-size: 9px;
font-weight: bold;
font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
}
#nav > li > a
{
font-size: 16px;
font-variant: small-caps;
border-right: 1px solid #dfca90;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 6px;
padding-top: 6px;
background-color: #fff;
color: #dfca90;
}
#nav li ul li a:hover
{
color: #999;
}
#nav li
{
float: left;
position: relative;
}
#nav ul
{
position: absolute;
display: none;
width: 170px;
border: 2px solid #dfca90;
}
#nav ul li
{
}
#nav li ul a
{
width: 170px;
height: auto;
float: left;
}
#nav ul ul
{
top: -2px;
}
#nav li ul ul
{
left: 170px;
background-color: #ECE9D8;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript </a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a> </li>
<li><a href="#">3.1.2 Tutorial</a> </li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
</body>
</html>
여기 정직한 질문은 이미 약 200 개가 있습니다. 왜 다시합니까? 응답하기 전에 얼마나 많은 시간을 당신이 총에 썼는지 세어보세요. 아직 조금 남아 있습니다. 가혹한 것처럼 들리거나 엉덩이처럼 내리려는 것은 아닙니다. 나는 동기 부여에 대해서 궁금합니다. –
내가하고있는 일은 내가 나 자신을 위해 완벽하게하고 싶다. – aherrick