導航菜單中的CSS編碼問題

我有兩個問題想解決我在編碼的CSS菜單，但我發現它無法處理它們。在我把代碼放在這裏之前，讓我描述一下我的兩個問題： 1）我想讓all li區域可以點擊而不是隻顯示文本.. 2）我認爲圖像和文本沒有被正確地垂直排列，解決這個問題。導航菜單中的CSS編碼問題

另外：

<nav> 
    <div class="drop-menu"> 
    <span class="plus">+</span><span class="droptexto">Navegação</span> 
    <ul class="sub-menu"> 
     <li><a href="http://www.google.pt"><img src="/images/icon_info.png" alt="rss"> Acerca</a></li> 
     <li><a href="http://www.google.pt"><img src="/images/icon_email.png" alt="rss"> Contactos</a></li> 
    </ul> 
    </div> 
</nav>

CSS：

nav { width: 640px; float: right; } 
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; } 
.drop-menu a, .drop-menu a:visited { color: #464530; text-decoration: none; } 
.drop-menu a:hover { color:#ff5400; } 
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; } 
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; } 
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } 
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; } 
.drop-menu:hover .sub-menu { display: inline-block; } 
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); } 
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; } 
.sub-menu li img { margin-right: .5em; margin-left: .5em; } 
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }

來源

2011-10-31 Afonso Gomes

如先前所建議做出完整的鏈接點擊使用display:block和定義寬度&高度或填充

.sub-menu li a {display:block; padding: 10px;}

，使圖像和文字對齊中心，最好的辦法是把圖像中的背景無論是李時珍或'a'標籤。不要忘記填充左邊的shd大於圖像的寬度。

.sub-menu li a.img1 { background-image:url(images/imagename.jpg); } 

.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }

即使你不想把圖像放在背景中，然後試試這個。它可能工作。根據圖像的高度設置高度，或使用填充。

.sub-menu li a { height: 20px; line-height:20px; display: block;}

希望這有助於！

來源

2011-10-31 12:52:22 Rishabh

確實有幫助！謝謝您的幫助！ –

1）

您可以在www.nfrases.com/modelo.php

HTML看到我在行動代碼

.drop-menu a { 
    display:block; 
    }

2）將左圖添加爲b <li>的背景圖像，然後您可以水平居中圖像和文本。

來源

2011-10-31 12:29:07

謝謝隊友！感謝幫助！ –

像這樣的事情會做的工作：http://jsfiddle.net/YGHNu/

使一個完整的鏈接設置爲「顯示：塊;」，然後設置高度和利潤率。要使圖像居中，請使用「vertical-align：middle」，然後使用margin-top稍高一點。

來源

2011-10-31 12:37:19

感謝您的幫助！另外，我不知道jsfiddle！也感謝fot！ –

導航菜單中的CSS編碼問題

回答

相關問題