子菜單對齊使用HTML css

首先，我只是一個初學者與web開發。正在嘗試使用水平主菜單和垂直子菜單的網站。子菜單對齊使用HTML css

當我將鼠標懸停在主菜單中的列表項上時，子菜單下降&替代了主菜單中的其他元素。另一個問題是子菜單沒有與主菜單列表項目對齊。

一直在努力做到這一點，因爲一段時間&一直在尋找一些解決方案。但目前無法解決這個問題。

代碼：

<div id="menu"> 
    <ul> 
     <li> <a href="#">SERVICES</a> 

      <div class="subnavi"> 
       <ul> 
        <li><a href="#">service1</a> 
        </li> 
        <li><a href="#">service2</a> 
        </li> 
        <li><a href="#">service3</a> 
        </li> 
       </ul> 
      </div> 
      <!-- end of subnavi --> 
     </li> 
     <li> <a href="contact.php">CONTACT US</a> 
     </li> 
     <li> <a href="#">HOME</a> 
     </li> 
     <li> <a href="#">ABOUT US</a> 
     </li> 
    </ul> 
</div> 
<!-- end of menu --> 

    ul { 
     overflow:hidden; 
     vertical-align:middle; 
    } 
    ul li { 
     list-style:none; 
    } 
    ul li a { 
     width:16.2%; 
     /*164.6px;*/ 
     font-size:1em; 
     line-height:1.8em; 
     float:left; 
     display:inline; 
     text-align:center; 
    } 
    #menu ul li .subnavi { 
     display:none; 
     clear:both; 
    } 
    #menu ul li .subnavi ul { 
     width:20em; 
     background:#a0a0a0; 
     list-style:none; 
     margin:auto; 
     line-height:2em; 
     border:1px solid #a60000; 
    } 
    #menu ul li .subnavi ul li a { 
     width:24em; 
     line-height:1.8em; 
     float:none; 
     display:inline; 
    } 
    #menu ul li:hover .subnavi { 
     display:block; 
    }

來源

2013-06-05 ambit

位置相對於外部li和絕對位置在.subnavi？這樣它就不會改變其他元素的定位。 – bwoebi

既然你提到你是初學者，@ karthikr已經提出了一個解決方案，這裏有一個更廣泛的提示;你的CSS選擇器過於具體。例如。 '#menu ul li li.subnavi'可以寫成'.subnavi'。當你需要重寫樣式時，這會讓你頭疼，並且瀏覽器讀取效率不高。有關更多信息，請參閱：http：//css-tricks.com/efficiently-rendering-css/。這與您的原始問題沒有直接關係，但我認爲這是一個有用的提示。 – Dre

您需要在.subnav和position: absolute刪除clear:both上.subnav ul

#menu ul li .subnavi { 
    display:none; 
} 
#menu ul li .subnavi ul { 
    width:20em; 
    background:#a0a0a0; 
    list-style:none; 
    margin:auto; 
    line-height:2em; 
    border:1px solid #a60000; 
    position:absolute; 
    top: 40px; 
}

入住這fiddle

來源

2013-06-05 15:45:29 karthikr

謝謝。你的回答幫了我很多。但是，還有一個小問題。我必須再做一個子菜單。這是在中間的某個地方，子菜單低於第一個李。看看這個：http://jsfiddle.net/mCvct/10/ 請儘可能幫助。 – ambit

選中此項：http://jsfiddle.net/mCvct/11/這是由css屬性'left'驅動的：'您可以使用寬度爲 – karthikr

的px'或'％'而不是另一個嵌套級別..它只是子菜單的父李在中間的某處。如果我使用你的方法，那麼子菜單會落在第一個父李的下面，而不是在它的實際父項下面。如果你看http://jsfiddle.net/mCvct/10/子菜單應該來'服務'，而不是'家' – ambit

試試這個

#menu ul li:hover .subnavi { 
    display:block; 
    position:absolute; 
    top:40px; 
    }

Demo

來源

2013-06-05 15:49:54 Arpit

你需要一個絕對位置添加到您的.subnavi和定位頂部ul相對：

#menu ul li:hover .subnavi { 
    position: absolute; 
    top: 35px; 
} 
ul { 
    position: relative; 
}

還加少許填充到你的鏈接將阻止subnavi從關閉你真正到達之前它與光標：

ul li a { 
    padding: 10px; 
}

http://jsfiddle.net/pulleasy/mCvct/4/

來源

2013-06-05 15:52:49 Daniel

子菜單對齊使用HTML css

回答

相關問題