CSS 수평 탐색 메뉴 목록 맞춤

Question

this과 같은 메뉴와 하위 메뉴를 디자인하려고합니다.

내가 이미 가지고있는 메뉴에서 개선을 시도했지만 메뉴의 시작 부분부터 시작하지 않습니다. CSS 편집을 시도했지만이 문제를 해결할 위치를 파악할 수 없습니다.

다음은 수정하려는 메뉴의 스크린 샷입니다.

은 메뉴에 대한 HTML :

<div style="width:100%; border:1px solid black" align="center"> 
<ul id="nav-one" class="dropmenu" style="width:1024px; border:1px solid black;"> 
      <li> 
       <a href="#">Home</a> 
      </li> 
      <li> 
       <a href="#">ABOUT BOST</a> 
       <ul> 
        <li><a href="#">Support</a></li> 
        <li><a href="#">Help</a></li> 
        <li><a href="#">Examples</a></li> 
        <li><a href="#">Your work</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#item3">Downloadsfdsfsd</a> 
       <ul> 
        <li><a href="#">Tools</a></li> 
        <li><a href="#">Office</a></li> 
        <li><a href="#">Custom projects</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Productsfsdfsdfsd</a> 
       <div class="products" align="left"> 
        <ul> 
         <li><img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li> 
         <li><img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li> 
        </ul> 
        <div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div> 
       </div> 
      </li> 
      <li> 
       <a href="#">Tutorials</a> 
       <div class="tutorials"> 
        <ul class="left"> 
         <li><a href="#">Javascript</a></li> 
         <li><a href="#">Python</a></li> 
         <li><a href="#">PHP</a></li> 
        </ul> 
        <ul class="right"> 
         <li><a href="#">HTML/CSS</a></li> 
         <li><a href="#">ASP.NET</a></li> 
         <li><a href="#">Actionscript</a></li> 
        </ul> 
        <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div> 
       </div> 
      </li> 
      <li> 
       <a href="#">Links</a> 
       <ul> 
        <li><a href="#">Programming</a></li> 
        <li><a href="#">Inspiration</a></li> 
        <li><a href="#">My websites</a></li> 
        <li><a href="#">Clients</a></li> 
        <li><a href="#">Cool stuff</a></li> 
        <li><a href="#">Sitebase</a></li> 
        <li><a href="#">Other</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Login</a> 
       <div class="login"> 
        <label for="txtuser">Username: </label> 
        <input type="text" name="txtuser" id="txtuser" /> 
        <label for="txtuser">Password: </label> 
        <input type="password" name="txtpass" id="txtpass" /> 
        <button>Login</button> 
       </div> 
      </li>   
     </ul> 
     </div> 

와 CSS :

ul, li{ 
    padding: 0px; 
    margin: 0px; 
} 
ul.dropmenu{ 
    position: relative; 
    margin: 0px; 
    padding: 1px 0px 0px 0px; 
    background:transparent url(images/navigation.png) repeat-x scroll 0 0; 
    display:block; 
    height: 35px; 
    font-family:Verdana,Arial,Helvetica,sans-serif; 
    font-size: 12px; 
} 
.dropmenu li{ 
    position: relative; 
    list-style: none; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
} 
.dropmenu li a{ 
    height: 22px; 
    padding: 9px 30px 0px 15px; 
    display: block; 
    cursor: point; 
    border-right: solid 1px #4a779d; 
    color: #FFFFFF; 
    text-transform: uppercase; 
    text-decoration: none; 
} 
.dropmenu li span{ 
    display: block; 
    float: right; 
    height: 10px; 
    width: 10px; 
    background:transparent url(images/arrow_up.png) repeat-x scroll 0 0; 
    position: absolute; 
    top: 12px; 
    right: 10px; 
} 
.dropmenu li a:hover span{ 
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0; 
} 
.dropmenu li:hover ul, .dropmenu li:hover div{ 
    display: block; 
} 
.dropmenu ul{ 
    position: absolute; 
    display: none; 
    width: 140px; 
    padding: 0px; 
    margin: 0px; 
    border-bottom: 1px solid #ccc; 
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0; 
} 
.dropmenu ul li{ 
    border: 0; 
    float: none; 
} 
.dropmenu ul a { 
    border: 1px solid #ccc; 
    border-bottom: 0; 
    white-space: nowrap; 
    display:block; 
    color: #0657AD; 
    text-decoration: underline; 
    text-transform: none; 
} 
a.selected, a:hover{ 
    color: #0657AD !important; 
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0; 
} 
a.selected span{ 
    background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0; 
} 
.dropmenu ul a:hover { 
    color:#F67A00 !important; 
    text-decoration: none; 
    background-color: #F0F0F0; 
    background-image: none; 
} 
.dropmenu div ul{ 
    position: relative; 
    display: block; 
} 
.dropmenu li div{ 
    background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0; 
    border: 1px solid #ccc; 
    padding: 5px; 
    display: none; 
    position: absolute; 
} 
.dropmenu li div ul{ 
    border: none; 
    background: none; 
    position: relative !important; 
} 
.dropmenu li div a{ 
    border: none; 
    border-bottom: 1px solid #ccc; 
} 
.dropmenu li div div{ 
    display: block; 
    position: relative; 
    background: none; 
    border: none; 
} 
.dropmenu li div div a{ 
    display: inline; 
    border: none; 
    color: #666; 
    text-decoration: underline; 
    padding: 0px; 
    margin: 0px; 
    text-transform: none; 
} 
.dropmenu li div div a:hover{ 
    color: #000; 
    text-decoration: none; 
} 
ul.left{ 
    float:left; 
    width: 145px; 
} 
ul.right{ 
    float:right; 
    width: 145px; 
} 
.small{ 
    color: #666; 
    font-size: 10px; 
    padding: 10px 5px 8px 5px !important; 
    display: block; 
    clear: both; 
} 
.products{ 
    width: 1024px; 
    padding: 0px !important; 
} 
.products ul{ 
    width: 100%; 
} 
.products ul li{ 
    border-bottom: 1px solid #ccc; 
    height: 40px; 
    padding: 10px 0px; 
} 
.products h2{ 
    font-size: 16px; 
    padding: 2px 0px 3px 0px; 
    margin: 0px; 
} 
.products p{ 
    color: #666; 
    font-size: 10px; 
    padding: 0px; 
    margin: 0px; 
} 
.products img{ 
    float: left; 
    padding-right: 10px; 
} 
.products ul li a{ 
    display: inline; 
    border: none; 
    color: #666; 
    text-decoration: underline; 
    padding: 0px; 
    margin: 0px; 
    text-transform: none; 
} 
.products ul li a:hover{ 
    color: #000 !important; 
    text-decoration: none; 
    background: none !important; 
} 

.tutorials{ 
    width: 300px; 
} 

.login{ 
    padding: 15px !important; 
    width: 180px; 
} 
input{ 
    border:1px solid #4A779D; 
    padding: 3px 8px; 
    margin-bottom: 8px; 
    width: 164px; 
} 
label{ 
    padding: 0px 0px 4px 0px; 
    display:block; 
} 
button{ 
    background: #4A779D url(images/navigation.png) repeat-x scroll 0 0; 
    color: #FFF; 
    border:1px solid #4A779D; 
    padding: 4px 10px; 
    width: 180px; 
} 

가 어떻게이 문제를 해결합니까?

Answer 1

수정에게 당신이이 두 클래스 시도 :

.dropmenu li{ 
    list-style: none; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
} 

을이

.products{ 
    left:0; 
    width: 1024px; 
    padding: 0px !important; 
} 

은 당신이 추가 할 수 있습니다 시작을 위해 그것을

Answer 2

이

.products{ 
    width: 960px; 
    margin-left:auto; 
    margin-right:auto; 
    float:left; 
}