HTML和CSS下拉菜單

我在我們公司的網站上工作，我對HTML和CSS非常陌生。我正在嘗試爲導航欄製作一個下拉菜單，我有它的要點，但它需要一些幫助。下拉菜單排列不正確，文字太大，我擁有的邊框橫跨列表的整個長度。HTML和CSS下拉菜單

CSS：

.menu{ 
    padding:0; 
    margin:25px 0 0 0; 
} 
.menu, .menu li{ 
    list-style: none; 
    display: block; 
    float:right; 
    padding:12px; 
    border-right: 1px solid #d8d8d8; 
} 
.menu li{ 
    float:left; 
    display: block; 
    width: 100px; 
} 
.menu ul{ 
    opacity: 0; 
} 
.menu ul li{ 
    background-color: white; 
} 
.menu li:hover > ul{ 
    opacity: 1; 
} 
.menu li.last-menu-item{ 
    border: none; 
    padding-right:0; 
} 
.menu a{ 
    color:#132d3c; 
    font-size:15px; 
    font-family: 'sansationbold'; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight:lighter; 
} 
.current-menu-item a{ 
    color:#f15c22; 
} 
.menu a:hover{ 
    color:#f15c22; 
}

HTML：

<ul class="menu alignright"> 
      <li class="current-menu-item"><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a> 
       <ul> 
        <li><a href="about.html">Who We Ar</a></li> 
        <li><a href="about.html">Values</a></li> 
        <li><a href="about.html">Owners Message</a></li> 
        <li><a href="#">Infotek Blog</a></li> 
        <li><a href="stories.html">Success Stories</a></li> 
        <li><a href="partners.html">Partners</a></li> 
       </ul> 
      </li> 
      <li><a href="products.html">Products &amp; Solutions</a> 
       <ul> 
        <li><a href="p&s.html">Security Solutions</a></li> 
        <li><a href="p&s.html">Data Solutions</a></li> 
        <li><a href="p&s.html">Communication Solutions</a></li> 
        <li><a href="p&s.html">Connectivity Solutions</a></li> 
        <li><a href="p&s.html">Infrastructure Solutions</a></li> 
        <li><a href="resources.html">Resources</a></li> 
       </ul> 
      </li> 
      <li class="last-menu-item"><a href="contact.html">Contact</a></li> 
     </ul>

我能得到一些幫助？

http://jsfiddle.net/pQhpu/191/

來源

2013-10-24 Joshua Mathews

嗨，你在這裏犯了一些錯誤。

不要使用不透明度隱藏的子菜單，與物業display:none
設置與position:relative貴麗和裏面他們與UL position:absolute

查看這個演示設置請提出任何問題http://jsfiddle.net/pQhpu/214/

編輯

爲了解決你的關於他的父母的子菜單中心的請求，你可以使用Jquery。我創造了這個功能對你：查看這裏的演示http://jsfiddle.net/pQhpu/264/

$(document).ready (function() { 

$('.menu li').mouseenter(function(){ 
    var $this = $(this), 
     $sub =$(this).children('ul'), 
     pad = parseInt($this.css('padding-left'),10)+parseInt($this.css('padding-right'),10), 
     move=($this.width()+pad-$sub.width())/2; 
    $sub.css ('left',move+'px'); 
}); 

})

所有你必須在這裏改變的是貴麗的名字路線顯示的子菜單;在我的情況下是'.menu li'。該函數獲取子菜單及其父項的寬度並進行操作以使其居中。

來源

2013-10-24 22:27:35 DaniP

感謝您的反饋意見。這幾乎是我想要的。還有一些問題。懸停後顯示下拉菜單時，會有相當大的左側空白空間。另外我不確定是否需要z-index，但是當我將鼠標懸停在菜單上並向下移動鼠標時，一旦到達網站的下一個元素，下拉菜單就消失。如果沒問題，我可以在明天回到工作崗位時發送屏幕截圖。 –

好吧只是發表評論來查看屏幕截圖 – DaniP

http://i.imgur.com/0cY1C6n.png此鏈接顯示HTML和CSS文件以及鼠標指針位於未對齊菜單上的網站的屏幕截圖。我設法讓關於菜單居中並在CSS文件中註釋。我想我需要爲產品和解決方案子菜單創建一個班級，以便控制他們的位置。這是http://i.imgur.com/VWTaJF8.jpg是我希望看到的菜單。集中在主要的導航標題下。請幫忙 –

爲邊界，把它們放在a而不是實際li。然後把你的填充物放在a上，並將邊界向右推。如果您不想將浮動邊框向右移動，通常必須將「.last」類添加到最後一個項目。必須使寬度更大以容納一行上的所有文本，或者減小整體大小。這應該讓你開始。

來源

2013-10-24 22:16:19

首先，您的設計太可怕了。我想你可能從某個地方複製了它，但是有這麼多的交叉/覆蓋元素。分別定義每個不同的部分（菜單選項，下拉選項等），而不是將所有東西應用於所有li s，而不是。

這裏是對寬度的修復。我讓div變大了。這很難。接下來，您必須爲所有下拉項目定義一個類，然後縮小它們的字體大小，並將相同的寬度應用於菜單項，以便它們不會比菜單項略大。 http://jsfiddle.net/pQhpu/200/

來源

2013-10-24 22:18:12

要糾正對齊問題補充：

.menu, .menu li 
    { 
    padding: 12px 0 12px 0; 
    }

這顯示在螢火，但不是在上面

.menu, .menu li 
    { 
    padding: 12px; 
    }

來源

2013-10-24 22:19:26 Gavin

你的代碼，以防止邊境從跨越列表的整個長度，請使用display屬性來改變不透明度。

.menu ul{ 
    display: none; 
} 

.menu li:hover > ul{ 
    display: inline; 
}

來源

2013-10-24 22:25:37 justyn

HTML和CSS下拉菜單

回答

相關問題