CSS 메뉴

내가이 메뉴의 모양을 모방하지만 오류를 : 수정하기 위해 노력하고있어 http://349ghgg83g.weebly.com/CSS 메뉴

는 "홈"위로 마우스를 이동하면 다음 밑줄은 "포트폴리오"아래에 나타납니다 "포트폴리오"로 이동 그것이해야합니다. 그러나 "접촉"에서 "포트폴리오"로 갈 때 밑줄이 나타나지 않습니다. 또한 내 버전에서는 하위 항목이 사라지기 때문에 "portfoilo"에서 하위 항목으로 이동할 수 없습니다. 나는 위 블리 때문에 페이지의 코드가없는,하지만 난 여기가 재현 시도했다 : http://jsfiddle.net/247t1aW3b/DnRfR/

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <link rel="stylesheet" href="home.css" type="text/css"/> 
</head> 

<body id="body1"> 
<div id="nav-wrap"> 
    <ul id="nav"> 
      <li><a href="/">Home</a></li> 
      <li> 
       <a href="#">Portfolio</a> 
       <ul> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Contact</a></li> 
    </ul><!-- END nav --> 
</div><!-- END nav-wrap -->  

<div id="content"> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
<p>Home content</p> 
</div> 

<div id="footer"></div> 

</body> 
</html>

CSS의 :

/* a[href="http://www.google.com"] {color: green;} */ 

html { 
    min-height: 100%; 
} 

body { 
    width: 100%; /*960px;*/ 
    /* padding:100px 0; */ 
    margin:0 auto; 
    font-family:Calibri, sans-serif; 
} 

#body1 { 
background-image:url('speckle.jpg'); 
background-repeat:repeat; 
} 

#content { 
    width: 90%; 
    margin-left: 3%; 
    margin-top: 90px; 
    margin-bottom: 45px; 
} 

#nav-wrap { 
    position: fixed; 
    top: 10px; 
    width: 100%; 
    height: 55px; 
    /*background: #336699;*/ 
}  

#nav { 
    /*border:1px solid #ccc;*/ 
    /*border-width:1px 0;*/ 
    list-style:none; 
    margin: 0 auto 0 auto; 
    padding:0; 
    width: 400px; 
    text-align:center; 
} 

#nav li { 
    position:relative; 
    display:inline; 
} 

#nav a { 
    display:inline-block; 
    /*padding:10px;*/ 
    padding: 8px; /* 8 pixel padding all the way around the anchors */ 
} 

#nav ul { 
    position:absolute; 
    /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */ 
    left:-9999px; /* hide the unordered list by moving it off-screen. */ 
    margin:0; 
    padding:0; 
    text-align:left; 
} 

#nav ul li { 
    display:block; 
} 

#nav li:hover ul { 
    left:0px; /* show the sub-items in the unordered list by moving it back under the list */ 
} 

#nav li:hover a { /* highlight the sub-items when you move over them */ 
    /*border-bottom:1px solid grey;*/ 
    /*text-decoration:underline;*/ 
    /*border-bottom-width: thick;*/ 
    /*background:#f1f1f1;*/ 
} 

#nav li:hover ul a { 
    text-decoration:none; 
    background:#EEE; 
    border-bottom:1px solid #aaa; 
} 

#nav li:hover ul a:hover { 
    /*text-decoration:underline;*/ 
    border-bottom:1px solid #aaa; 
    /*background:#f1f1f1;*/ 
    background: #BEBEBE; 
} 

#nav ul a { 
    white-space:nowrap; 
    display:block; 
    /*border-bottom:3px solid red;*/ 
} 

a { 
    /*color:#c00;*/ 
    color: black; 
    text-decoration:none; 
    /*font-weight:bold;*/ 
    font-weight: normal; 
} 

a:hover { 
    /*text-decoration:underline;*/ 
    border-bottom: 3px solid #002EB8; 
/*background:#f1f1f1;*/ 
} 

#footer { 
    visibility: none;  
}

출처

2013-01-03 mike

당신은 방화범 또는 크롬을 사용할 수 있습니다 Javascript 콘솔을 사용하여 페이지를 검사합니다. 포트폴리오를 마우스로 가리키면 드롭 다운에 문제가 있습니다. 공중 선회하지 않는 드롭 다운 메뉴는 다음과 같습니다 당신이에서 마우스를 가져 가면

<div id="wsite-menus"> 
    <div style="position: absolute; left: 203.35px; display: none; top: 166px;" class="wsite-menu-wrap"> 
    </div> 
</div>

당신이 '최고'CSS 속성이 '168px'로 설정 '포트폴리오'에서 '홈'에서 가져하지만 때 '연락처' '포트폴리오', '최고의'속성은 166px에서 유지됩니다. 드롭 다운 메뉴가 실제로 밑줄을 덮고 있으므로 밑줄은 문제가 아닙니다.

출처

2013-01-03 02:03:31 SeanLi

감사합니다. 사라지는 포트폴리오 하위 항목을 어떻게 수정 할 수 있는지 생각해보십시오. – mike

답변

관련 문제