Adding border around a menu box - css

Question

I have html and css that does the fly out menu. Is it possible to put a border around the fly out box.
#WebPartWPQ4 {
width: 1040px!important;
//height: 200px!important;
overflow: hidden!important;
}
/*edit */
#WebPartWPQ6_ChromeTitle {
//width:50px!important;
position: absolute;
top: -40px;
z-index: 0;
}
#MSOZoneCell_WebPartWPQ6 {
position: absolute;
top: 500px
}
#cssmenu {
padding: 0;
margin: 0;
border: 0;
position: relative;
z-index: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul,
#cssmenu ul ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
#cssmenu ul {
position: relative;
z-index: 397;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li:hover {
position: relative;
//z-index: 99;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
/* z-index: 398; */
width: 100%;
}
#cssmenu ul ul ul {
top: 0px;
left: 99%;
}
#cssmenu ul li:hover > ul {
visibility: visible;
width: 170px;
}
#cssmenu ul ul {
bottom: 0px;
left: 0;
}
/* Custom CSS Styles */
#cssmenu ul {
width: 100px;
}
#cssmenu ul ul {
width: 167px;
}
#cssmenu ul li {
padding: 7px 10px;
color: #000000;
//background-color: #F0F9FC;
background-color: #FFF;
//border: 1px solid red;
//border-bottom: 1px solid gray;
}
#cssmenu ul li:hover {
background: #cce5ff;
color: #000;
box-shadow: 1px 1px 10px 2px #888;
border-style: solid;
}
#cssmenu ul a:link,
#cssmenu ul a:visited {
color: #000;
text-decoration: none;
}
#cssmenu ul a:hover {
color: #000;
}
#cssmenu ul a:active {
color: #ffa500;
}
<div id='cssmenu'>
<ul>
<table cellpadding="1" cellspacing="1" style="width: 100%;">
<tbody>
<tr>
<td>
<li>
<img alt="Find" src="http://inside.colgate.in/_layouts/15/images/siteicons/Find.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionAll.aspx'><span>Policies/Forms</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionCompanyWide.aspx'><span> - Company-wide</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionCASpecial.aspx'><span> - CA Special</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSouthWestDeepWater.aspx'><span> - SouthWest Inboard</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSouthWestShelf.aspx'><span> - SouthWest Shelf</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionLABasin.aspx'><span> - Basin</span></a>
</li>
<li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSanJoaquinValley.aspx'><span> - Deep Valley</span></a>
</li>
<li><a href='http://www.google.com/world'><span>Safety Data Sheet (SDS)</span></a>
</li>
<li><a href='http://www.google.com/world'><span>Safety Alerts</span></a>
</li>
</ul>
</li>
</td>
<td>
<li>
<img alt="Report/Suggest" src="http://inside.colgate.in/_layouts/15/images/siteicons/ReportSuggest.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://www.google.com'><span>An Incident</span></a>
</li>
<li><a href='http://www.google.com'><span>An Emergency</span></a>
</li>
<li><a href='http://www.google.com'><span>An Observation</span></a>
</li>
<li><a href='http://www.google.com'><span>A Suggestion</span></a>
</li>
</ul>
</li>
</td>
<td>
<li>
<img alt="My Stuff" src="http://inside.colgate.in/_layouts/15/images/siteicons/MyStuff.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://www.google.com'><span>My Training</span></a>
</li>
<li><a href='http://www.google.com'><span>My PPE</span></a>
</li>
<li><a href='http://www.google.com'><span>My Safety Committee</span></a>
</li>
<li><a href='http://www.google.com'><span> - CA Special</span></a>
</li>
<li><a href='http://www.google.com'><span> - SouthWest Inboard</span></a>
</li>
<li><a href='http://www.google.com'><span> - LA Basin</span></a>
</li>
<li><a href='http://www.google.com'><span> - Valley</span></a>
</li>
<li><a href='http://www.google.com'><span>My Floor Wardens</span></a>
</li>
<li><a href='http://www.google.com'><span> - Cloverfield</span></a>
</li>
<li><a href='http://www.google.com'><span> - Oklahoma</span></a>
</li>
<li><a href='http://www.google.com'><span> - New York</span></a>
</li>
<li><a href='http://www.google.com'><span>Adjust My Workstation</span></a>
</li>
</ul>
</li>
</td>
<td>
<li>
<img alt="Emergency" src="http://inside.colgate.in/_layouts/15/images/siteicons/Emergency.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://www.google.com'><span>Emergency Numbers and Guides</span></a>
</li>
<li><a href='http://www.google.com'><span> - Cloverfield</span></a>
</li>
<li><a href='http://www.google.com'><span> - CA Special</span></a>
</li>
<li><a href='http://www.google.com'><span> - SouthWest Inboard</span></a>
</li>
<li><a href='http://www.google.com'><span> - SouthWest Shelf</span></a>
</li>
<li><a href='http://www.google.com'><span> - Oklahoma</span></a>
</li>
<li><a href='http://www.google.com'><span> - Orleans</span></a>
</li>
<li><a href='http://www.google.com'><span> - Basin</span></a>
</li>
<li><a href='http://www.google.com'><span> - New York</span></a>
</li>
<li><a href='http://www.google.com'><span> - Valley</span></a>
</li>
<li><a href='http://www.google.com'><span>Incident Management/ICS</span></a>
</li>
<li><a href='http://www.google.com'><span>Business Continuity</span></a>
</li>
<td>
<li>
<img alt="Contractors" src="http://inside.colgate.in/_layouts/15/images/siteicons/Contractors.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://www.google.com/world'><span>Contractor Portal</span></a>
</li>
<li><a href='http://www.google.com/world'><span>ISNetworld</span></a>
</li>
<li><a href='http://www.google.com/world'><span>Pocket Guidebook</span></a>
</li>
</ul>
</li>
</td>
<td>
<li>
<img alt="Get Info" src="http://inside.colgate.in/_layouts/15/images/siteicons/GetInfo.png" style="width: 150px; height: 150px;" />
<ul>
<li><a href='http://www.google.com'><span>Orientation Materials</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - Company-wide</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - CA Special</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - SouthWest Inboard</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - SouthWest Shelf</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - Basin</span></a>
</li>
<li><a href='http://www.google.com/world'><span> - Valley</span></a>
</li>
<li><a href='http://www.google.com/world'><span>External Links</span></a>
</li>
<li><a href='http://www.google.com/world'><span>User Guides</span></a>
</li>
</ul>
</li>
</td>
</ul>
</li>
</td>
</tr>
</tbody>
</table>
</ul>
</div>
I tried this but it didnt help at ul li
border-style: solid;

Answer 1

Try this remove bottom: 0 from line 88 in the JSFiddle and add border.
/* at line 88 in JSFiddle change this */
#cssmenu ul ul {
bottom: 0;
left: 0;
}
/* to this */
#cssmenu ul ul {
border: 1px solid #ccc;
left: 0;
}
By setting bottom: 0 you're effectively telling your dropdown menu's ul to have a height of 0 and therefore the border only looks like it's applied to the top of the dropdown.