Its hard to guess what that issue is, without seeing your code. (Given is not enough).
By the way you can check it out with this code snippet. I have slightly changed your HTML.
.dropdown{
padding-top: 0.7em;
}
<div class="dropdown">
<ul onclick="myFunction()" class="dropbtn">
<li>
<span>Solutions</span>
<div id="myDropdown" class="dropdown-content">
<a href="compsupport.html">Computer Support</a>
<a href="Printer_Solutions.html">Printer Solutions</a>
<a href="Email & Social Media Solutions.html">Email/Social Media Support</a>
</div>
</li>
</ul>
</div>
It’s damn simple man Just copy my code
dropbtn ul {
list-style: none;
}
Having the problem here in solutions link
here is the HTML code, normally if I use a button there is no such dot, however, if I use ul or li this occurs. Maybe it is because I am adding a simple HTML/CSS dropdown element in a bootstrap navigation bar?
<div class="dropdown">
<ul onclick="myFunction()" class="dropbtn">Solutions </ul>
<div id="myDropdown" class="dropdown-content">
<a href="compsupport.html">Computer Support</a>
<a href="Printer_Solutions.html">Printer Solutions</a>
<a href="Email & Social Media Solutions.html">Email/Social Media Support</a>
</div>
</div>
</div>
I have added the CSS code below, also the link contains the image depicting my problem.
.dropdown{
padding-top: 0.7em;
}
.dropbtn ul {
list-style: none;
}
.dropbtn li{
background-color: transparent;
color:grey;
font-size: 18px;
font-family:'Gill Sans', 'Gill Sans MT','Trebuchet MS', sans-serif;
border: none;
position:fixed;
line-height:50px;
padding-top: 5em;
padding-bottom: 20em;
}
.dropbtn:hover,.dropbtn:focus,.dropbtn:after {
background-color:transparent;
color:blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color:grey;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd
}
.dropdown-content a:hover {
color:black
}
.show {
display:block;
}
Add your code snippet, because I tried the code you have appended in the question and I cannot find any dot at the end of
Please could you put up a snippet which we can run as I cannot replicate the problem on the code you have given. However, watch usage of ampersand in filenames.
I can’t* replicate the issue using the markup you’ve provided; I’d suggest using your browser’s element inspector (F12, or Ctrl+Shift+C) to look at the element in question and tracing the problem. The only weird thing I see in your markup is the extra three spaces after the word “Solutions.” Hope this helps.
it does not have any effect, I think the problem is different.
