我正在编辑我公司的网站，但遇到了一些问题。主题是定制的，是由专业人士创建的，但我们不喜欢他所做的一切，所以我们想纠正它。我设法编辑了很多东西，但其他一些东西需要通过编码来编辑。如果有人可以帮助我，我将不胜感激...
![下拉菜单示例][1]
首先，上图中的下拉菜单链接到“医疗产品”按钮，即menu-item-207。问题是下拉菜单没有出现在此按钮下方，而是出现在页面右侧。我该如何纠正？
其次，我希望下拉菜单垂直显示，而不是像当前情况那样水平显示。所以，当鼠标悬停在“医疗产品”上时，我基本上会喜欢这样的子菜单显示。我该怎么做？
div.sub_products > ul:hover > li:hover {
width: 33.3333%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
background-color: #ccc;
text-align: center;
border-right: 1px solid #fff;
color: white; }
div.sub_products > ul > li > ul {
position: absolute;
left: 0px;
top: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
width: 100%;
background-color: white;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all ease-in 300ms;
-moz-transition: all ease-in 300ms;
-o-transition: all ease-in 300ms;
transition: all ease-in 300ms; }
div.sub_products > ul > li > ul li {
display: block;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 10px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
-webkit-transition: all ease-in 300ms;
-moz-transition: all ease-in 300ms;
-o-transition: all ease-in 300ms;
transition: all ease-in 300ms; }
div.sub_products > ul > li > ul li a {
display: block;
text-align: left;
text-decoration: none;
color: inherit; }
div.sub_products > ul > li > ul li a img {
display: block;
float: left;
width: 40px;
margin-right: 10px;
height: auto; }
div.sub_products > ul > li > ul li a span {
text-transform: uppercase;
font-weight: 700;
display: block;
line-height: 30px; }
div.sub_products > ul > li > ul li {
background-color: #eee; }
div.sub_products > ul > li {
background-color: #009ee0;
display: block}
div.sub_products > ul > li > ul {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible; } <div class="sub_products">
<ul>
<li class="categorie">
Absorbable sutures
<ul>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practicryl-910/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practicryl-910-300x249.png" alt="Practicryl 910">
<span style="color:#a6a3d1;">Practicryl 910</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practicryl-rapid/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practicryl-rapid-300x249.png" alt="Practicryl Rapid">
<span style="color:#ead1ab;">Practicryl Rapid</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practicryl/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practicryl-1-300x249.png" alt="Practicryl">
<span style="color:#e5388d;">Practicryl</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practimono/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practimono-300x249.png" alt="Practimono">
<span style="color:#c6c6c6;">Practimono</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practisorb/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practisorb-1-300x249.png" alt="Practisorb">
<span style="color:#ead1ab;">Practisorb</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practigut-plain/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practigut-plain-1-300x249.png" alt="Practigut plain">
<span style="color:#edc297;">Practigut plain</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practigut-chrome/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practigut-chrom-300x249.png" alt="Practigut Chrome">
<span style="color:#9c574a;">Practigut Chrome</span>
</a>
</li>
</ul>
</li>
<li class="categorie">
Non-Absorbable sutures
<ul>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/monopractilon/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practilon-300x249.png" alt="Monopractilon">
<span style="color:#c7e3d3;">Monopractilon</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practicron/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practicron-1-300x249.png" alt="Practicron">
<span style="color:#fcc24e;">Practicron</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/practisilk/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/practisilk-300x249.png" alt="Practisilk">
<span style="color:#c8dff5;">Practisilk</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/supramono/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/supramono-1-300x249.png" alt="Supramono">
<span style="color:#6c93cd;">Supramono</span>
</a>
</li>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/polypractilon/">
<img src="https://aipsutures.com/wp-content/uploads/2018/02/polypractilon-1-300x249.png" alt="Polypractilon">
<span style="color:#cb0538;">Polypractilon</span>
</a>
</li>
</ul>
</li>
<li class="categorie">
Medical devices
<ul>
<li>
<a class="link_menu" href="https://aipsutures.com/en/product/disposable-face-mask/">
<span style="color:#1a52a5;">Disposable Face Mask</span>
</a>
</li>
</ul>
</li>
</ul>
</div>