html - Blogger 下拉菜单尝试 2

Question

因此，经过数小时的 Google 搜索和更多的编辑，并试图理解 Blogger 中下拉菜单的 CSS 代码(为什么 Google 不为这些菜单提供一个小部件？？？)，我现在有一个示例是我想要的方式的 98%。附上 HTML 和 CSS。我真的想做出 2 个我无法弄清楚的改变。

1. 我希望顶级菜单位于页面的中央。听起来很容易，但我没有找到它
2. 在 PORTFOLIO 菜单 WILDLIFE/NATURE 子菜单下，我想将子子菜单的框完全移出其父菜单，即 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

我已经修改了您的代码以实现您正在寻找的内容。我将 width: 100% 放在主导航 div 上，并使用了 text-align: center 和 display: inline-block 使菜单居中。

设置子导航的格式有点复杂。我将 position: relative 添加到 li 元素中，这样我们就可以将子导航定位在它们的父元素周围。为了让三级子导航脱离其父级，我对其应用了 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>