CSS의 서식 문제

저는 웹 개발에 착수하고 있습니다. 특히 CSS를 사용하려고합니다. 간단한 메뉴 모음 인 실용적인 것을하고 싶었습니다. 그러나, 하나의 행 대신 두 개의 행을 취할 때 하위 메뉴의 앵커를 올바르게 포맷하는 데 문제가 있습니다.CSS의 서식 문제

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="test.css" /> 
    </head> 
    <body> 
     <ul id="menu"> 
      <li><a href="#">Menu 1</a> 
       <ul> 
        <li><a href="#">Submenu 1</a></li> 
        <li><a href="#">Submenu 2</a></li> 
        <li><a href="#">Submenu 3</a></li> 
        <li><a href="#">Submenu 4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Menu 2</a></li> 
      <li><a href="#">Menu 3</a></li> 
      <li><a href="#">Menu 4</a></li> 
      <li><a href="#">Menu 5</a></li> 
     </ul> 
    </body> 
</html>

그리고 CSS 코드 :

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
    position: relative; 
} 
#menu li ul{ 
    position: absolute; 
    list-style: none; 
    right: 0; 
    display: none; 
} 
#menu li li{ 
    float: none; 
} 
#menu li:hover ul{ 
    display: block; 
}

출처

2012-07-26 Cristi

Welcome to StackOverflow. 답변으로 문제가 해결되면 [이 대답을 수락 할 수 있습니다] (http://meta.stackexchange.com/a/5235/170863). 그런 다음 회색 위쪽 화살표로 하나 또는 여러 개의 대답을 upvote 할 수 있습니다. –

여기

가 당신의 CSS를 변경 ... 몇 가지 옵션 년대 다른 메인 메뉴 항목 아래의 전체 하위 메뉴를 제공 다음

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
} 
#menu li ul{ 
    list-style: none; 
    right: 0; 
    display: none; 
    width: 100%; 
    position: absolute; 
} 
#menu li li{ 
    float: none; 
    width: 100%; 
    display: block; 
} 
#menu li:hover ul{ 
    display: block; 
}

을 통해 상단 메뉴 항목을 밀어이 옵션은, 5 월 이상적이지는 않겠지 만, 선택의 여지가 ...

#menu{ 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
    } 
#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
} 
#menu li ul{ 
    list-style: none; 
    right: 0; 
    display: none; 
    position: relative; 
    width: 100%; 
} 
#menu li li{ 
    float: none; 
    width: 100%; 
    display: block; 
} 
#menu li:hover ul{ 
    display: block; 
}

출처

2012-07-26 23:34:36

고정 폭을 원하지 않으면이 옵션은 하위 메뉴 항목의 너비에 따라 커집니다. –

그래서 텍스트가 들어갈 수 있음을 li의 폭을 증가

다음은 HTML 코드입니다.

출처

2012-07-26 23:32:25

width을 #menu li으로 설정하기 만하면됩니다.

#menu li{ 
    float:left; 
    padding: 0px 8px 0px 8px; 
    position: relative; 
    width: 80px; 
}

Try a demo.

출처

2012-07-26 23:33:43

CSS의 서식 문제

답변

관련 문제