Blogger下拉菜單嘗試2

Question

因此，經過數小時的谷歌搜索和更多編輯，並試圖瞭解Blogger中下拉菜單的CSS代碼（爲什麼Google不提供這些小工具呢？），我現在有一個例子，是我想要的98％。 HTML和CSS已附加。我真的會做出2個我無法弄清楚的改變。

1. 我想頂層菜單居中在頁面上。聽起來很容易，但我沒有找到它
2. 在PORTFOLIO菜單，WILDLIFE/NATURE子菜單下，我想將subsubmenu的框完全移出它的父菜單，即沒有菜單項PORTFOLIO菜單被隱藏。

我可以以這樣的方式生活，但如果我能完成最後兩件事情，我會變得金黃。謝謝。

#cssnav { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
#cssnav ul { 
 
width: 100%; 
 
margin: 0; 
 
padding: 0px; 
 
list-style:none; 
 
} 
 

 
#cssnav ul li { 
 
float:left; 
 
} 
 

 
#cssnav ul li a { 
 
    float: left; 
 
    font: 16px Verdana, Helvetica, Sans-serif; 
 
    color:black; 
 
    padding: 10px 40px; /*1st number is top & bottom. 2nd is left & rght. */ 
 
    text-decoration:none; 
 
} 
 

 
#cssnav ul li a:hover, 
 
#cssnav ul li:hover > a { 
 
    color: black; /* main menu hover color */ 
 
} 
 

 
#cssnav li ul a:hover, 
 
#cssnav ul li li:hover > a { 
 
    color: black; /*submenu text color */ 
 
    text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
 
} 
 

 
#cssnav li ul { 
 
    left: -999em; 
 
    margin: 35px 0 0; 
 
    position: absolute; 
 
    width: 340px; /* width of submenu box */ 
 
    z-index: 9999; 
 
} 
 

 
#cssnav li:hover ul { 
 
    left: auto; /* where the left edge of the drop down box aligns */ 
 
} 
 

 
/* Drop down box formatting */ 
 
#cssnav li ul a { 
 
    margin-right: 0; 
 
    width: 260px; 
 
    border-bottom: 1px solid transparent; 
 
    border-top: 1px solid transparent; 
 
} 
 

 
#cssnav li li ul { 
 
    margin: -1px 0 0 160px; 
 
    visibility:hidden; 
 
} 
 

 
/* no idea what this does */ 
 
#cssnav li li:hover ul { 
 
    visibility:visible; 
 
}

<div id="cssnav"> 
 
<ul> 
 
<li><a href="http://www.adahighlanderphotography.com">HOME</a></li> 
 
<li><a href="#">PORTFOLIO</a> 
 
<ul> 
 
<li><a ref='http://www.adahighlanderphotography.com/Products/Landscapes'> 
 
LANDSCAPES</a></li> 
 
<li><a href=' '>WILDLIFE/NATURE</a> 
 
<ul> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Birds/'> 
 
BIRDS</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Butterflies/'>BUTTERFLIES</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Flowers/'>FLOWERS</a></li> 
 
</ul> 
 
</li> 
 

 
<li><a href='http://www.adahighlanderphotography.com/Products/2017-Photo-of-the-Week/'>PHOTO OF THE WEEK</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/Landscapes-1/2017-Michigan-Calendar-Photos/'>2017 CALENDAR PHOTOS</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/Notecards'> 
 
NOTECARDS</a></li> 
 
</ul> 
 

 
<li><a href="http://www.adahighlanderphotography.com/Contact">CONTACT ME</a></li> 
 
<li><a href="http://www.adahighlanderphotography.com/About-Me2">ABOUT ME</a></li> 
 
</li></ul> 
 
</div>

Answer 1

我修改代碼來實現你在找什麼。我在您的主導航div上放置width: 100%，並使用text-align: center和display: inline-block來居中菜單。

格式化subnavs有點複雜。我將position: relative添加到了li元素，因此我們可以將子導航放在他們的父母身邊。爲了從父母那裏獲得第三級subnav，我申請了left: 100%將它一直移到旁邊。我還刪除了Wildlife下的子導航上的margin樣式。

我還添加了一些drop-shadow和其他:hover樣式，使用戶的體驗更好一些。

希望這會有所幫助！更多評論在CSS中。

#cssnav { 
 
    width: 100%; /* Spanned div across page */ 
 
    text-align: center; /* Centered <ul> inside */ 
 
} 
 

 
#cssnav ul { 
 
display: inline-block; /* Allows text-align:center to affect Menu */ 
 
margin: 0; 
 
padding: 0px; 
 
list-style:none; 
 
} 
 

 
#cssnav ul li { 
 
float:left; 
 
text-align: left; /* Keeps menus left aligned */ 
 
position: relative; /* Allows us to position sub menus relative to their parent */ 
 
} 
 

 
#cssnav ul li a { 
 
    float: left; 
 
    font: 16px Verdana, Helvetica, Sans-serif; 
 
    color:black; 
 
    padding: 10px 40px; /*1st number is top & bottom. 2nd is left & rght. */ 
 
    text-decoration:none; 
 
} 
 

 
#cssnav ul li a:hover, 
 
#cssnav ul li:hover > a { 
 
    color: black; /* main menu hover color */ 
 
    background: rgba(0,0,0,0.1); 
 
} 
 

 
#cssnav li ul a:hover, 
 
#cssnav ul li li:hover > a { 
 
    color: black; /*submenu text color */ 
 
    text-shadow: 0 1px rgba(255, 255, 255, 0.3); 
 
} 
 

 
#cssnav li ul { 
 
    left: 0; 
 
    display: none; 
 
    margin: 35px 0 0; 
 
    position: absolute; 
 
    width: 340px; /* width of submenu box */ 
 
    z-index: 9999; 
 
    background: white; 
 
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.25); 
 
    -webkit-padding-start:0px !important; 
 
} 
 

 
#cssnav li:hover ul { 
 
    display: block; 
 
} 
 

 
/* Drop down box formatting */ 
 
#cssnav li ul a { 
 
    margin-right: 0; 
 
    width: 260px; 
 
    border-bottom: 1px solid transparent; 
 
    border-top: 1px solid transparent; 
 
} 
 

 
#cssnav li li ul { 
 
    visibility:hidden; 
 
} 
 

 
/* no idea what this does */ 
 
#cssnav li li:hover ul { 
 
    visibility:visible; 
 
    left: 100%; /* Puts sub nav next to parent, not over it */ 
 
}

<div id="cssnav"> 
 
<ul> 
 
<li><a href="http://www.adahighlanderphotography.com">HOME</a></li> 
 
<li><a href="#">PORTFOLIO</a> 
 
<ul> 
 
<li><a ref='http://www.adahighlanderphotography.com/Products/Landscapes'> 
 
LANDSCAPES</a></li> 
 
<li><a href=' '>WILDLIFE/NATURE</a> 
 
<ul> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Birds/'> 
 
BIRDS</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Butterflies/'>BUTTERFLIES</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/WildlifeFlowers-1/Flowers/'>FLOWERS</a></li> 
 
</ul> 
 
</li> 
 

 
<li><a href='http://www.adahighlanderphotography.com/Products/2017-Photo-of-the-Week/'>PHOTO OF THE WEEK</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/Landscapes-1/2017-Michigan-Calendar-Photos/'>2017 CALENDAR PHOTOS</a></li> 
 
<li><a href='http://www.adahighlanderphotography.com/Products/Notecards'> 
 
NOTECARDS</a></li> 
 
</ul> 
 

 
<li><a href="http://www.adahighlanderphotography.com/Contact">CONTACT ME</a></li> 
 
<li><a href="http://www.adahighlanderphotography.com/About-Me2">ABOUT ME</a></li> 
 
</li></ul> 
 
</div>