如何在菜單欄中顯示幾個選項

我想要做一個像這個網站上的菜單：http://www.accenture.com/us-en/pages/index.aspx前。外包。可以使用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

如何在菜單欄中顯示幾個選項

回答

相關問題