I'm working on creating a vertical menu positioned on the left side of the screen. To achieve this, I utilized an online CSS button generator to style my <li> tags within the menu structure. However, I've encountered an issue where an extra "Button" element appears at the beginning of the list in both Firefox and Chrome, causing the first menu tag to be pushed to the right. Unfortunately, I can't provide a screenshot due to insufficient points.
Here's the snippet from the HTML file:
<div id="myButton">
<ul>
<li><a href="#" >Text</a></li>
<li><a href="#" >Text</a></li>
<li><a href="#" >Text</a></li>
<li><a href="#" >Text</a></li>
<li><a href="#" >Text</a></li>
<li><a href="#" >Text</a></li>
</ul>
</div>
In terms of CSS formatting:
- Initially, I moved the
<ul>to the left and removed the bulleting from the list items. - Subsequently, I defined styles for the
<li>when hovered over by the mouse or clicked on.
Below is the CSS code segment:
#myButton ul{
margin: 0;
padding: 0;
width:185px;
list-style-type: none;
}
#myButton li a{
-moz-box-shadow:inset 0px 0px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 0px 0px 0px #54a3f7;
box-shadow:inset 0px 0px 0px 0px #54a3f7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
/* Additional styling properties */
}
#myButton li a:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
/* Additional hover effect definitions */
}
#myButton li a:active {
/* Styling for active state */
}