Is there a way to modify the code so that when hovering over a dropdown menu created with Twitter Bootstrap 3, the menu expands and users are able to click on the expanded links?
The HTML code I came up with is as follows:
<nav>
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown">Blog<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/1">1</a></li>
<li><a href="/2">2</a></li>
</ul>
</div>
</li>
</ul>
</nav>
And the CSS code is as follows:
ul#mainMenu li {
display: inline-block;
padding: 3px;
background-color: orange;
border-radius: 5px;
-webkit-transform: skewX(-6deg);
}
ul#mainMenu li:hover {
background-color: green;
}
However, the issue arises when hovering over the "Blog" menu in the dropdown, as it does not expand. Clicking on the menu does expand it, but the layout is not ideal with unnecessary white spaces and the menu appearing horizontally instead of vertically at a skewed angle of -6 degrees.
Is there a way to correct these issues and have the expanded menu display vertically instead of horizontally?
Thank you.
[Update]
It seems there are issues with displaying the HTML code correctly. I will work on resolving this and provide the correct information. The code snippets were enclosed in <pre><code> tags for reference.