ul and li layout problem

  • Resolved howardlie

    (@howardlie)


    8 years, 6 months ago

    I made a table-like ul and li for my website’s categories. When I use Tryit Editor. I use this code:
    html :

    <html>
<head>
<style>
ul.kateg {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: transparent;
    border: 1px solid #b7ac0f;
}

li.cat a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li.cat {
    text-align: left;
    border-bottom: 1px solid #b7ac0f;
}

li.cat:last-child {
    border-bottom: none;
}

li.cat a.active {
    background-color: #b7ac0f;
    color: white;
}

li.cat a:hover:not(.active) {
    background-color: transparent;
    color: green;
}
</style>
</head>
<body>

<ul class="kateg">
  <li class="cat"><a class="active">Home</a></li>
  <li class="cat"><a href="#news">News</a></li>
  <li class="cat"><a href="#contact">Contact</a></li>
  <li class="cat"><a href="#about">About</a></li>
</ul>

</body>
</html>

    output :
    On W3School

    and I wanted it to look that way but when I copy it to my WordPress site, it looks like this.
    On my site
    The problem is with the “home” background as you can see, the background is not full. Is there any mistakes in my code? Please help me ?? I am a beginner in CSS

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘ul and li layout problem’ is closed to new replies.

Tags