越來越多的標籤和懸停與更高的高度

我有一個問題，試圖讓懸停高於導航選項卡中的標準黑暗背景。越來越多的標籤和懸停與更高的高度

這適用於「推拉門」技術+精靈。但這裏有必要重構代碼HTML 5和CSS 3

HTML：

<nav> 
    <ul class="reset"> 
     <li class="current"><a href="index.html">home page</a></li> 
     <li><a href="#">about us</a></li> 
     <li><a href="#">technology</a></li> 
     <li><a href="services.html">services</a></li> 
     <li><a href="#">network</a></li> 
     <li><a href="contacts.html">contacts</a></li> 
    </ul> 
    </nav>

CSS：

nav { 
    position: relative; 
    top: 38px; 
    right: 0px; 
    height: 38px; 
    padding-top: 10px; 
    float: right; 
} 

nav li { 
    height: 38px; 
    float: left; 
    list-style-type: none; 
    margin-left: 1px; 
    text-transform: uppercase; 
    text-align: center; 
    vertical-align: bottom; 
} 

nav a { 
    height: 22px; 
    padding: 16px 16px 0px 16px; 
    display: block; 
    text-decoration: none; 
    color: white; 
    background: #16222f; 
    border-radius: 4px 4px 0px 0px; 
} 

nav a:hover { 
    background: #ff4e00; 
    border-radius: 4px 4px 0px 0px; 
}

目前的結果：http://jsfiddle.net/acy5p/

我會對任何建議感到高興。

來源

2013-11-28 Alex

我不明白好你想實現什麼 – DaniP

我不知道你想知道什麼。你必須比'我有問題'更具體。 –

感謝您的關注。也許我的問題沒有很好地制定，但解決方案很簡單（通過Marinus）。這是我的錯 - 我讀了太多的信息，它混在我的腦海裏。 – Alex

您好我已經改變了你的CSS希望這是你在找什麼..

/*Menu*/ 
    nav { 
     position: relative; 
     top: 38px; 
     right: 0px; 
     height: 58px; 
     padding-top: 10px; 
     float: right; 
     vertical-align:bottom; 
    } 
    nav li { 
     height: 38px; 
     float: left; 
     list-style-type: none; 
     margin-left: 1px; 
     text-transform: uppercase; 
     text-align: center; 
     vertical-align: bottom; 
    } 
    nav a { 
     height: 22px; 
     padding: 16px 16px 0px 16px; 
     display: block; 
     text-decoration: none; 
     color: white; 
     background: #16222f; 
     border-radius: 4px 4px 0px 0px; 
    } 
    li a:hover { 
     background: #ff4e00; 
     border-radius: 4px 4px 0px 0px; 
     margin-top: -10px; 
     padding-bottom:10px; 
     top:-10px; 
    }

jsfiddle.net/acy5p/1看看這個小提琴...

來源

2013-11-28 22:16:47 Marinus

非常感謝Marinus！這正是我需要的。 – Alex

快樂......我們都需要一些幫助。 – Marinus

越來越多的標籤和懸停與更高的高度

回答

相關問題