css 또는 jquery로 수평 메뉴 맞춤

-1

수평으로 표시되어야하는 하나의 하위 레벨을 가진 수평 메뉴에서 작업 중입니다. 아래의 수평 메뉴에 대한 코드는 다음과 같습니다. 나는 그것에 종사했지만 특정 문제에 직면하지 않았습니다. 상위 메뉴를 왼쪽으로 정렬하여 div의 시작 위치에서 거의 시작되도록하고 싶습니다.css 또는 jquery로 수평 메뉴 맞춤

두 번째로 상위 메뉴 바로 아래에 하위 메뉴가 표시됩니다. 하위 메뉴가 meus의 가장 왼쪽부터 표시되기를 원합니다.

예를 들어 상위 메뉴 래퍼 div #nav-wrapper의 너비는 1000px이고 1000px를 클래스 #mainnav li ul에 주면 주요 영역 밖으로 메뉴가 표시됩니다. 부모 메뉴의 첫 번째 요소의 시작 위치에서 시작하도록 자식 메뉴를 정렬하려면 어떻게해야합니까?

세 번째로 부모 메뉴 위에 마우스를 올리거나 다른 부모 메뉴가있는 경우 다른 색상의 상위 메뉴가 필요합니다. 유효한.

enter image description here

나는 그것이 작동되도록하려고하지만, 지금까지 내가 원하는 결과가 없습니다.

<html> 
<head> 
<title></title> 
<style> 
#nav-wrapper 
{ 
position: relative; 
background-color:white; 
height:30px; 
width:1000px; 
background-color:#f5f5f5; 
} 
#nav-wrapper ul { 
    color: #242320; 
    list-style-type: none; 
    font-size: .8em; 
    line-height: 30px; 
    font-weight: bold; 
    font-family:Tahoma; 
} 
#mainnav li { 
    float: left; 
    position: relative; 
} 
#mainnav li a:link, #mainnav li a:visited { 
    line-height: 30px; 
    font-weight: bold; 
    font-size: 1.2em; 
    text-decoration: none; 
    color: #242320; 
    padding: 5px 0px; 
    margin: 0px 0px 0px 0px; 
} 
#mainnav li a:active { 
    line-height: 30px; 
    font-weight: bold; 
    font-size: 1.2em; 
    text-decoration: none; 
    color: #242320; 
    background-color:red; 
    padding: 5px 0px; 
    margin: 0px 0px 0px 0px; 
} 
#mainnav li ul { 
    left: 0px; 
    min-height: 30px; 
} 
#mainnav li a:hover { 
color: #3b541e; 
border-bottom: solid 0px #3b541e; 
} 
#mainnav li ul { 
    position: absolute; 
    display: none; 
    left: 0px; 
    top: 30px; 
    padding: 0px 0px 0px 5px; 
    margin: 0px; 
    background-color: gray; 
    min-height: 30px; 
    width: 1000px; 
    float: left; 
} 

#mainnav li a:link, #mainnav li a:visited { 
    line-height: 30px; 
    font-weight: bold; 
    font-size: 1.2em; 
    text-decoration: none; 
    color: #242320; 
    padding: 1px 0px; 
    margin: 0px 0px 0px 35px; 
} 

#mainnav ul li ul li a:link, #mainnav ul li ul li a:visited { 
font-size: 1.2em; 
color: #b1bba5; 
margin: 0px 25px; 
padding: 12px 0px 12px 0px; 
line-height: 30px; 
font-weight: bold; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
$('#nav-wrapper').on('hover', 'li', function() { 
    $(this).closest('ul').find('li').removeClass('active'); 
    $(this).addClass('active'); 
    return false; 
}); 

$('#nav-wrapper ul li').hover(function() { 
    $('ul', this).show(); 
}, function() { 
    $('#nav-wrapper ul', this).hide(); 
}); 
    }); 

</script> 
</head> 
<body> 
    <div id="nav-wrapper"> 
     <ul id="mainnav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#About</a></li> 
     <li><a href="#">Services</a> 
      <ul> 
       <li><a href="#">Graphic Design</a></li> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">Multimedia</a></li> 
       <li><a href="#">Exhibitions</a></li> 
       <li><a href="#">Trade Marketing</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</body>

출처

2012-12-31 Learning

이것은 귀하가 가지고있는 것입니다.

http://jsfiddle.net/ZvW9T/1/

jsFiddle 자신이 다음에 확인, 당신이 대답하는 것이 더 쉬울 수 있습니다.

닫히지 않은 앵커에 오류가 있습니다. <li><a href="#About</a></li>은 <li><a href="#About"></a></li>이어야합니다.

첫 번째 질문을받을 수 없습니다. 이미 왼쪽에 상위 메뉴가 표시되어 있습니다. 단지 #mainnav li 규칙에서 position: relative를 제거 두 번째 질문에 대한

것은 :

#mainnav li { 
    float: left; 
    /* position: relative; */ 
}

(데모 참조 : http://jsfiddle.net/ZvW9T/2/), 당신은 이미 jQuery를 사용하는 세 번째 질문에 대한

을 쉽게 자바 스크립트와 그것을 달성 할 수 그렇다면, 그것은 당신이 가고 싶은 방식입니다.

CSS를 생성하기 위해 CSS와 자바 스크립트를 혼합하면 코드에 약간의 혼동이 생길 수 있습니다. 순수한 CSS로 페이지를 재검토하고 웹 둘러보기 중 하나 인 google CSS Drop Down Menu을 따르고 싶을 수도 있습니다.

일반적으로 하위 메뉴는 세로가 아니고 가로 (세로 값이 두 열처럼 혼합되어있는 경우도 있음)이며 페이지의 시작이 아니라 부모 메뉴 탭에서 시작한다는 점에 유의하십시오. ...

출처

2012-12-31 08:45:45

감사를 시도 할 수 있습니다. 나는 CSS 개발자가 아니다. 개발자가 더 많다. 당신의 솔루션은 작동하는 것처럼 보입니다. 그러나 홈 (home)을위한 여분의 공간을 추가한다는 것을 알게되면 분명히 알 수 있습니다. jsFiddle에서 볼 수 있으며 내 컴퓨터에서 같은 문제가 발생하는지 확실하지 않습니다. 나는 또한 순수한 CSS 솔루션으로 그것을 향상시키기 위해 보일 것이다.현재이 문제를 해결할 수 있다면 감사하겠습니다. – Learning

두 개의 바이올린 사이에 집에 여분의 공백이 없으며 내부에 텍스트가없는 '

'때문입니다. http://jsfiddle.net/ZvW9T/3/와 같이 '

About

'으로 변경하십시오. –

당신은 당신은 좋은 포인트의 몇 만든이

http://jsfiddle.net/ZXVLb/

#mainnav li a:link, #mainnav li a:visited margin:0 35px 0 0; 

#mainnav li ul left position 

#nav-wrapper margin:0 0 0 35px;

출처

2012-12-31 09:10:21 midstack

답변

관련 문제