CSS調整到簡單的下拉菜單

我使用了一些simple dropdown menus我在網上找到了，我需要CSS/HTML調整幫助。CSS調整到簡單的下拉菜單

當前它們會在您添加菜單時展開。我在繼承的960px寬的舊內聯網上使用它們。如果他們與上面的960px寬橫幅齊平，他們會看起來更好。

這裏是我的CSS。

div.wrapper { 
width : 960px ; 
margin-left : auto ; 
margin-right : auto ; 
} 
ul#nav {margin: 0 0 0 0;} 
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;} 
ul.drop, ul.drop li, ul.drop ul { font-family: Verdana; font-size: 14px; list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #B0CD2C; color: #fff;} 
ul.drop { position: relative; z-index: 597; float: left; } 
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 7px 11px; } 
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #20413A; } 
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; } 
ul.drop ul li { float: none; } 
ul.drop ul ul { top: -2px; left: 100%; } 
ul.drop li:hover > ul { visibility: visible } 

<div align="center"> 
<div class="wrapper"><img alt="Banner Graphic" height="152" src="/Web_Changes/banner.jpg" width="960" /> 
</div> 
<!--Begin Menus--> 

<ul id="nav" class="drop"> 
    <li><a href="#">Home</a></li> 
    <li>About Us 
    <ul> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Testimonials</a></li> 
     <li><a href="#">Staff</a> 
    <ul> 
     <li><a href="#">George Orsmond</a> 
     <ul> 
      <li>Web Design</li> 
      <li>Graphic Design</li> 
      <li>HTML</li> 
      <li>CSS</li> 
     </ul> 
     </li> 
     <li><a href="#">Dave Macleod</a></li> 
     </ul> 
     </li> 
     <li><a href="#">FAQs</a></li> 
    </ul> 
    </li> 
    <li>Services 
    <ul> 
    <li><a href="#">Web Design</a></li> 
    <li><a href="#">Graphic Design</a></li> 
    <li><a href="#">Logo Design</a></li> 
    </ul> 
    </li> 
    <li>Products 
    <ul> 
     <li class="dir"><a href="#">Templates</a></li> 
     <li class="dir"><a href="#">Stock Images</a> 
    <ul> 
     <li><a href="#">Category 1</a></li> 
     <li><a href="#">Category 2</a></li> 
     <li><a href="#">Category 3</a></li> 
     <li><a href="#">Category 4</a></li> 
     <li><a href="#">Category 5</a></li> 
    </ul> 
     </li> 
     <li><a href="#">Featured</a></li> 
     <li><a href="#">Top Rated</a></li> 
     <li><a href="#">Resources</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Gallery</a></li> 
    <li>Contact Us 
    <ul> 
     <li><a href="#">Contact Form</a></li> 
     <li><a href="#">How to get here</a></li> 
     <li><a href="#">View the map</a></li> 
    </ul> 
    </li> 
</ul> 
</div>

有人能幫我調整這些在兩邊齊平到960px？

來源

2013-05-15 Dave Lalande

不可能將css應用於您發佈的圖像:)。請張貼標記，也可能是小提琴。 – PSL

我把鏈接放到我在上面第一句中使用的菜單中。對於那個很抱歉。我逐字使用這些東西，除了邊距和顏色。 –

你可以給我們一個鏈接到微軟本身，但這並不意味着我們可以看到/修復代碼。請提供橫幅和菜單的HTML，以及橫幅的CSS。 – PlantTheIdea

<html lang="en-US"> 
<head> 
<style> 
div.wrapper { 
    width : 960px; 
    margin-left : auto; 
    margin-right : auto; 
} 
ul#nav { 
    margin: 0 0 0 0; 
} 
ul.drop a { 
    display: block; 
    color: #fff; 
    font-family: Verdana; 
    font-size: 14px; 
    text-decoration: none; 
} 
ul.drop, ul.drop li, ul.drop ul { 
    font-family: Verdana; 
    font-size: 14px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 1px solid #fff; 
    background: #B0CD2C; 
    color: #fff; 
} 
ul.drop { 
    position: relative; 
    z-index: 597; 
    float: left; 

} 
ul.drop li { 
    float: left; 
    line-height: 1.3em; 
    vertical-align: middle; 
    zoom: 1; 
    padding: 7px 11px; 
} 
ul.drop li.hover, ul.drop li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
    background: #20413A; 
} 
ul.drop ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 195px; 
    background: #555; 
    border: 1px solid #fff; 
} 
ul.drop ul li { 
    float: none; 
} 
ul.drop ul ul { 
    top: -2px; 
    left: 100%; 
} 
ul.drop li:hover > ul { 
    visibility: visible 
} 
</style> 
</head> 
<body> 
<div align="center"> 

    <div class="wrapper"> 
    <ul class="drop" id="nav"> 
    <li><a href="#">Home</a></li> 
    <li>About Us 
     <ul> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Clients</a></li> 
     <li><a href="#">Testimonials</a></li> 
     <li><a href="#">Staff</a> 
      <ul> 
      <li><a href="#">George Orsmond</a> 
       <ul> 
       <li>Web Design</li> 
       <li>Graphic Design</li> 
       <li>HTML</li> 
       <li>CSS</li> 
       </ul> 
      </li> 
      <li><a href="#">Dave Macleod</a></li> 
      </ul> 
     </li> 
     <li><a href="#">FAQs</a></li> 
     </ul> 
    </li> 
    <li>Services 
     <ul> 
     <li><a href="#">Web Design</a></li> 
     <li><a href="#">Graphic Design</a></li> 
     <li><a href="#">Logo Design</a></li> 
     </ul> 
    </li> 
    <li>Products 
     <ul> 
     <li class="dir"><a href="#">Templates</a></li> 
     <li class="dir"><a href="#">Stock Images</a> 
      <ul> 
      <li><a href="#">Category 1</a></li> 
      <li><a href="#">Category 2</a></li> 
      <li><a href="#">Category 3</a></li> 
      <li><a href="#">Category 4</a></li> 
      <li><a href="#">Category 5</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Featured</a></li> 
     <li><a href="#">Top Rated</a></li> 
     <li><a href="#">Resources</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Gallery</a></li> 
    <li>Contact Us 
     <ul> 
     <li><a href="#">Contact Form</a></li> 
     <li><a href="#">How to get here</a></li> 
     <li><a href="#">View the map</a></li> 
     </ul> 
    </li> 
    </ul> 
    <img alt="Banner Graphic" height="152" src="/Web_Changes/banner.jpg" width="960" /> </div> 
    <!--Begin Menus--> 


</div> 
</body> 
</html>

來源

2013-06-14 10:59:42 falguni

CSS調整到簡單的下拉菜單

回答

相關問題