I am working on designing my homepage using HTML, CSS, JSP, and JavaScript, focusing on the sale of musical instruments and facilitating communication among users.
Right now, I am in the process of creating a site-map for my menu configuration chart using div, ul, li, and h tags. My goal is to add bottom borders under the last submenu items (last li tags) as shown in the image below (refer to the blue markings). These borders should align with the lowermost li tag.
https://i.sstatic.net/XEpdN.jpg
Here is what I have developed so far:
#sitemap_menu_container {
width: 980px;
height: 200px;
border: 1px solid violet;
}
.sitemap_menu {
width: 150px;
height: 180px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #cbcbcb;
}
.sitemap_menu_header1 {
font-size: 15pt;
font-family: Arial;
padding-bottom: 7px;
border-bottom: 1px solid #cbcbcb;
}
.sitemap_menu_header2 {
font-size: 15pt;
font-family: Arial;
color: red;
padding-bottom: 7px;
border-bottom: 1px solid #cbcbcb;
}
.sitemap_menu ul li {
list-style: none;
font-size: 11pt;
font-family: Arial;
background: url(../images/bullet1.png) no-repeat 0px 50%;
padding-left: 10px;
margin-left: 10px;
cursor: pointer;
}<div id="sitemap_menu_container">
<div class="sitemap_menu">
<h2 class="sitemap_menu_header1">About</h2>
<ul>
<li>P&G introduce</li>
<li>P&G history</li>
<li>location</li>
</ul>
</div>
<div class="sitemap_menu">
<h2 class="sitemap_menu_header2">Piano goods</h2>
<ul>
<li>All kind of piano</li>
<li>Upright</li>
<li>Grand</li>
<li>Electronics</li>
<li>Synthesizer</li>
<li>Management Tools</li>
</ul>
</div>
<div class="sitemap_menu">
<h2 class="sitemap_menu_header1">Guitar goods</h2>
<ul>
<li>Acoustic</li>
<li>Classic</li>
<li>Electrics</li>
<li>Ukulele</li>
<li>Management Tools</li>
</ul>
</div>
<div class="sitemap_menu">
<h2 class="sitemap_menu_header2">Community</h2>
<ul>
<li>Free Board</li>
<li>Reviews</li>
<li>Gallery Board</li>
</ul>
</div>
<div class="sitemap_menu">
<h2 class="sitemap_menu_header1">Event</h2>
<ul>
<li>Ongoing Event</li>
<li>Announcement</li>
</ul>
</div>
<div class="sitemap_menu">
<h2 class="sitemap_menu_header2">Help you</h2>
<ul>
<li>Guide</li>
<li>Notice</li>
<li>FAQ</li>
<li>Q&A</li>
<li>Sitemap</li>
</ul>
</div>
</div>