Blogger Drop Down Menus Try 2 - html

Question

So after many hours of Google searches and many more editing and trying to understand CSS code for drop down menus in Blogger (Why doesn't Google just provide a widget for these anyway???), I now have an example that is 98% of the way to what I want. The HTML and CSS are attached. I'd really to make 2 changes which I couldn't figure out.
I'd like the top level menu to be centered on the page. Sounds easy but I didn't find it so
Under the PORTFOLIO menu, WILDLIFE/NATURE submenu, I'd like to shift the box of the the subsubmenu to be completely off of its parent menu, i.e. so no menu items in the PORTFOLIO menu are hidden.
I can live with this the way it is but if I can get these last 2 things done, I'd be golden. Thanks.
#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>HOME</li>
<li>PORTFOLIO
<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>CONTACT ME</li>
<li>ABOUT ME</li>
</li></ul>
</div>

Answer 1

I've modified your code to achieve what you're looking for. I put width: 100% on your main navigation div, and used text-align: center and display: inline-block to center the menu.
Formatting the subnavs was a little more complicated. I added position: relative to the li elements so we could position the sub navs around their parents. In order to get the third-level subnav off of its parent, I applied left: 100% to it to move it all the way to the side. I also removed the margin style on the sub nav under Wildlife.
I also added some drop-shadow and additional :hover styling to make the experience a little better for the user.
Hope this helps! More comments in the 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>HOME</li>
<li>PORTFOLIO
<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>CONTACT ME</li>
<li>ABOUT ME</li>
</li></ul>
</div>