css html mouseover hover

아래 코드는 내 코드입니다. 현재 "About Us"에 마우스를 올리면 드롭 다운 메뉴 아래의 모든 항목이 열립니다. 나는 어떻게하면 마우스 오버 때 마우스를 움직일 수 있도록 CSS를 바꿀 수 있습니까? 이것은 "팀"을 가리키면 그 아래의 메뉴가 보일 것입니다.css html mouseover hover

또한 왼쪽으로 더 쉬프트되도록 너비를 조정할 수 있습니다.

드롭 다운 메뉴가 열 번째에 더 길면 내 콘텐츠 아래에 숨겨 지므로 드롭 다운 메뉴가 숨기기가 아닌 페이지 본문 위에 표시되기를 원합니다.

미리 감사드립니다.

<style> 
ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 
</style> 

<body> 
<ul id="menu"> 
    <li><a href=""><b>Home</b></a></li> 
    <li><a href=""><b>About Us</b></a> 
    <ul> 
    <li><a href="">Team</a> 
    <ul> 
     <li><a href="">Profile</a></li> 
     <li><a href="">Board</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
<ul> 
</body>

JSFiddle : http://jsfiddle.net/LWEry/

출처

2013-03-01 NULL

는 :

ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover > ul { 
    display: block; 
    position: absolute; 
    width: 100%; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 

.sub-menu 
{ 
    position: absolute; 
    top: 0; 
    left: 100%; 
}

http://jsfiddle.net/3xWcu/2/

나는 하나의 선택을 변경했습니다.

li:hover > ul

li:hover ul

FROM

위 내 바이올린을 편집. 프로필 및 게시판 태그가 포함 된 ul에 하위 메뉴 클래스를 추가했습니다.

<ul class="sub-menu"> 
    <li><a href="">Profile</a></li> 
    <li><a href="">Board</a></li> 
</ul>

위의 CSS를 추가했습니다.

출처

2013-03-01 16:52:35 97ldave

멋지지만 "team"의 하위 메뉴의 너비는 오른쪽 "team"바로 아래가 아님 – NULL

위의 대답을 업데이트 할 수 있습니다. 프로필 및 게시판 항목이 포함 된 하위 메뉴에 수업을 추가했습니다. 몇 가지 CSS를 추가했습니다. – 97ldave

우수 !!! 많은 감사 – NULL

당신은이 같은 뜻? 이처럼 http://jsfiddle.net/3xWcu/

<style> 
ul { 
    font-family: Arial, Verdana; 
font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #000061; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
    width: 100%; 
} 
ul li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; } 
</style> 

<body> 
<ul id="menu"> 
    <li><a href=""><b>Home</b></a></li> 
    <li><a href=""><b>About Us</b></a> 
    <ul> 
    <li><a href="">Team</a> 
    <ul> 
     <li><a href="">Profile</a></li> 
     <li><a href="">Board</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
<ul> 
</body>

출처

2013-03-01 16:49:39 martriay

"팀"에는 고유 한 하위 메뉴가 있습니다. 폭 조정은 완벽합니다. – NULL

css html mouseover hover

답변

관련 문제