메뉴에서 열에 몇 가지 옵션을 표시하는 방법

나는이 사이트에서와 같은 메뉴를 원한다 : http://www.accenture.com/us-en/pages/index.aspx ex. 아웃소싱. css 및 html을 사용하여이 작업을 수행 할 수 있습니다. 나는 열로 "li"이나 "ul"을 만들 수 없습니다.메뉴에서 열에 몇 가지 옵션을 표시하는 방법

내 코드 나 웹에서 검색 물론

<body> 

<style type="text/css">#cssmenu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font-family:verdana,geneva,arial,helvetica,sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    color:8e8e8e; 
    } 
#cssmenu ul{ 
    background:url(menu_assets/images/menu-bg.gif) top left repeat-x; 
    height:43px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 
    #cssmenu li{ 
     float:left; 
     padding:0px 8px 0px 8px; 
     } 
    #cssmenu li a{ 
     color:#666666; 
     display:block; 
     font-weight:bold; 
     line-height:43px; 
     padding:0px 25px; 
     text-align:center; 
     text-decoration:none; 
     } 
     #cssmenu li a:hover{ 
      color:#000000; 
      text-decoration:underline; 
      } 
    #cssmenu li ul{ 
     background:#e0e0e0; 
     border-left:1px solid #0079b2; 
     border-right:1px solid #0079b2; 
     border-bottom:1px solid #0079b2; 
     display:none; 
     height:auto; 
     filter:alpha(opacity=95); 
     opacity:0.95; 
     position:absolute; 
     width:600px; 
     /*top:1em; 
     /*left:0;*/ 
     } 
    #cssmenu li:hover ul{ 
     display:block; 
     } 
    #cssmenu li li { 
     display:block; 
     float:none; 
     padding:0px; 
     width:225px; 
     } 
    #cssmenu li ul a{ 
     display:block; 
     font-size:12px; 
     font-style:normal; 
     padding:0px 10px 0px 15px; 
     text-align:left; 
     } 
     #cssmenu li ul a:hover{ 
      background:#949494; 
      color:#000000; 
      opacity:1.0; 
      filter:alpha(opacity=100); 
      } 
    #cssmenu p{ 
     clear:left; 
     } 
    #cssmenu .active > a{ 
     background:url(menu_assets/images/current-bg.gif) top left repeat-x; 
     color:#ffffff; 
     } 
    #cssmenu .active > a:hover { 
     color:#ffffff; 
     } 
     </style> 
<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a></li> 
     <li><a href='#'><span>Product 2</span></a></li> 
     <li><a href='#'><span>Product 3</span></a></li> 
     <li><a href='#'><span>Product 3</span></a></li> 
     <li class='last'><a href='#'><span>Product 4</span></a></li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div> 

</body>

그러나 나는 해결책을 찾을 수 없습니다.

출처

2013-03-31 Przemysław Suszek

특정 선택기

우선, 당신은 #cssmenu ul 또는 #cssmenu li 같은 CSS 규칙을 사용하는 경우, 그 CSS 규칙이 메인 메뉴와 하위 메뉴 모두 HTML 태그에 적용 얻을 것이다. 일부 스타일은 적용 할 필요가없는 요소에 적용될 수 있습니다. 이러한 혼란을 피하기 위해 더 많은 CSS 선택기에서 > 자식 조합자를 사용하십시오. 예를 들어 :

#cssmenu > ul {...}   // Only applied to main menu 
#cssmenu > ul > li {...}  // Only applied to main menu li tags 
#cssmenu > ul > li > a {...} // Only applied to main menu links 

#cssmenu ul ul {...}  // No confusion here, since menu isn't 3 levels deep 
#cssmenu ul ul li {...} // No confusion here, only applied to submenu li tags 
#cssmenu ul ul li a {...} // No confusion here, only applied to submenu links

당신이 Accenture menu을 모방하는 경우, 가장 빠른 방법은 페이지의 오른쪽에 가변 폭 메뉴 항목을 표시하려면 메뉴 항목을

둘째 부동 떠있다 메뉴 항목은 왼쪽으로 이동하면서 메뉴는 전체적으로 오른쪽으로 이동합니다.

#cssmenu > ul  { float: right; ... } 
#cssmenu > ul > li { float: left; ... } 
... 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> ... </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul>

때때로 반대 방향으로 부모와 자식을 뜨는 것은 문제가 될 수 있습니다. 그렇게하는 데 문제가 있으면 가장 안전한 옵션은 메뉴 항목을 오른쪽으로 이동하는 것입니다. 이 경우 올바른 순서로 표시되게하려면 HTML 소스 코드의 메뉴 항목 순서를 반대로해야합니다.

#cssmenu > ul > li { float: right; ... } 
... 
<ul> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> ... </li> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
</ul>

출처

2013-04-01 00:16:44

메뉴에서 열에 몇 가지 옵션을 표시하는 방법

답변

관련 문제