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>