내비게이션 막대를 아래로 내림

-1

하위 메뉴가 올바르게 표시되지 않음 CSS 및 HTML에 넣기 하위 메뉴를 하위 목록처럼 표시해야합니다. 한 줄 아래에 있지만 한 줄에 다른 줄을 표시하고 있습니다. 하위 메뉴가 표시되어야합니다 메인 메뉴에 마우스 오버 후
는내비게이션 막대를 아래로 내림

<style> 
     #navbar { 
      position: absolute; 
      top: 0; 
      left: 0; 
      margin: 0; 
      padding:0;} 
     #navbar li 
     { 
      list-style: none; 
      float: left; 
     } 
     #navbar li a { 
      display: block; 
      padding: 3px 8px; 
      text-transform: uppercase; 
      text-decoration: none; 
      color: #999; 
      font-weight: bold; } 
     #navbar li a:hover { 
      color: #000; } 
      #navbar li ul { 
      display: none; } 
     #navbar li:hover ul, #navbar li.hover ul { 
      position: absolute; 
      display:list-item; 
      left: 0; 
      width: 100%; 
      margin: 0; 
      padding: 0; } 
     </style> 
     </head> 
     <body> 

     <ul id="navbar"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Us</a> 
      <ul> 
      <li><a href="#">Subitem One</a></li> 
       <li><a href="#">Second Subitem</a></li> 
       <li><a href="#">thrid subitem</a></li> 
     </ul> 
      </li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul>

출처

2012-11-07 Saurabh Kalyankar

당신의 CSS에서이 추가

여기

#navbar li 
{ 
list-style: none; 
float: left; 
position:relative; 
}

는 jsFiddle file

출처

2012-11-07 11:50:47

귀하의 하위 메뉴에 대한이 스타일을 추가

#navbar li ul li 
{ 
    float: none; 
}

출처

2012-11-07 11:41:47

감사 올라프 DIETSCHE의 작업 만 내 서브 메뉴입니다 우리가 우리에 대해 호버에 후 집 아래에 표시됩니다에 대한 , 제대로 배치되지 않았습니다. –

Live demo

HI 이제이 CSS를 사용하고

#navbar{ 
background:#0082c8; 
position:relative; 
margin-top:15px; 
} 
    #navbar > li{ 
     float:left; 
     margin:0 10px; 
     position:relative; 
     padding:14px 0; 
    } 

    #navbar li a, .subnavi li a{ 
     color:white; 
     text-decoration:none; 
     display:inline-block; 
     line-height:29px; 
     padding:0 13px; 
     font-size:16px; 
     font-family:arial; 
     text-shadow: 0px 2px 2px #034e9f; 
     filter: dropshadow(color=#034e9f, offx=0, offy=2); 
    } 

    #navbar > li:hover > a, li:hover > a , #navbar li a.active{ 
     background:#055c9f; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     -webkit-box-shadow: inset 0px 3px 3px 0px #042960; 
     -moz-box-shadow: inset 0px 3px 3px 0px #042960; 
     box-shadow: inset 0px 3px 3px 0px #042960; 
     border:1px solid #009ada; 
     color:#f7cf00; 
     line-height:27px; 
     padding:0 12px;    
    } 

    .subnavi{ 
     position:absolute; 
     display:none; 
     top:51px; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     -webkit-box-shadow: 0px 0px 3px 1px #979395; 
     -moz-box-shadow: 0px 0px 3px 1px #979395; 
     box-shadow: 0px 0px 3px 1px #979395; 
     background:#0082c8; 
     border:1px solid #005890; 
     padding:10px 0; 
     white-space:nowrap; 
    } 

    #navbar li:hover .subnavi{ 
     display:block; 

    } 
    #navbar .subnavi li{ 
     margin:0; 
    } 
    #navbar .subnavi li a{ 
     display:block; 
     font-size:13px; 
     padding:0 15px; 
     border-radius:0; 
     line-height:27px; 
    } 
    #navbar .subnavi li a:hover{ 
     padding:0 15px; 
     border-radius:0; 
     border-left:0; 
     border-right:0; 
     line-height:25px; 
    } 

    #navbar:after{ 
    content:''; 
     clear:both; 
     display:block; 
     overflow:hidden; 
    }

HTML

<ul id="navbar"> 
    <li><a href="" class="active">About</a></li> 
    <li><a href="">Demo</a> 
     <ul class="subnavi"> 
      <li><a href="">Demo</a></li> 
      <li><a href="">Demo</a></li> 
<li><a href="">Demo</a></li> 
<li><a href="">Demo</a></li> 
<li><a href="">Demo</a></li>    
     </ul> 

    </li> 
    <li><a href="">Demo</a></li> 


</ul>

CSS는 아래 NAVI 순수 CSS에서

드롭을 만들어 16,

Live demo

출처

2012-11-07 11:41:54

내비게이션 막대를 아래로 내림

답변

관련 문제