Member Avatar for andi-dev 
<body>


    <div id="wrapper">
<ul id="level-one">
<li><a href="#"></a>Home</li>
<li>Home1
    <ul id="level-two">
        <li><a href="Reth Nesh.html">Home1</a></li>
    </ul>
</li>
<li>Home2
    <ul id="level-three">
        <li><a href="Produkte Speciale.html">Karburanti</a></li>
        <li><a href="Produkte Speciale.html">Produkte Speciale</a></li>
        <li><a href="Lubrifikues.html">Lubrifikante</a></li>
        <li><a href="index.html">Kerkimet e dokumentave</a></li>
    </ul>
</li>
<li>Home3
    <ul id="level-four">
        <li><a href="Pikat e shitjes.html">Pikat e shitjes</a></li>
        <li><a href="">IP Matic </a></li>
        <li><a href="Festival.html">Festival</a></li>
        <li><a href="Strategjite e Sherbimit.html">Strategjite e sherbimit</a></li>
    </ul>
</li>
<li>Home4
    <ul id="level-two">
        <li><a href="Kombetarja Italiane.html">Kombetaria Italiane</a></li>
    </ul>
</li>

<li>Home5
    <ul id="level-four">
        <li><a href="Bono Karburanti.html">Bono Karburanti</a></li>
        <li><a href="Karta Maxima.html">Karta Maxima</a></li>
        <li><a href="">Karta Agos</a></li>
        <li><a href="Sherbimi i Klienteve Netcar.html">Sherbimi i klienteve Nectar</a></li>
    </ul>
</li>
</div> <!-- #wrapper -->
<div id="Stage" class="EDGE-28762890"></div>    <!--LEVIZJA E IMG-SLIDER.-->
</body>
  • 3 Contributors
  • 5 Replies
  • 184 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by veera100

Dani AI

Generated

The root problem in 's markup is that the visible labels are outside the anchor tags (for example <a href="#"></a>Home). That makes the clickable/hover area hard to control and produces the tiny orange highlight seen on hover. Relying on floats plus fixed widths also makes spacing brittle. Moving the text inside the <a> and letting the anchor define the clickable box fixes both spacing and keyboard accessibility.

A minimal HTML fix (wrap the label in the link):

<li>
  <a href="Reth Nesh.html">Home1</a>
  <ul class="submenu"> … </ul>
</li>

Two simple CSS approaches that avoid fragile width hacks:

  • Modern: make the top-level list a flex container and use gap for consistent horizontal spacing.
  • Compatible: keep the flow but make the anchor a display:block element and use padding for the larger hover area; apply hover to the anchor (not the LI) so the background expands with padding and is focusable.

Example (flexbox + anchor hover):

#level-one { display: flex; gap: 12px; padding: 0; margin: 0; }
#level-one li { list-style: none; }
#level-one a { display: block; padding: 8px 14px; text-align: center; text-decoration: none; }
#level-one a:hover, #level-one a:focus { background: #ff9800; }

Troubleshooting notes: when using flexbox remove float/fixed widths on the LI to avoid conflicts; if keeping inline-block, remember HTML whitespace creates gaps; submenus should remain absolutely positioned inside a position: relative LI so dropdowns align correctly. ’s margin suggestion will add horizontal space, but padding on the anchor (plus gap) is more robust for enlarging the hover region and preserving accessibility. As suggested, a small jsFiddle/devtools experiment makes these changes obvious and easy to verify.

Recommended Answers

All 5 Replies

Member Avatar for andi-dev 
#wrapper{
    clear:both;
    margin:5px auto;
    border:0px solid #000;
    font-size:12px;
    font-family: verdana;

}


ul#level-one{
    width: 76%;/*gjatesia e Menuse kryesore*/
    height: 36px;/*gjeresi*/
    position: relative;
    list-style: none;
    line-height: 36px;
    z-index: 2;
    left: 132px;
    background-image: url(images/menu-li-blue.png); /* imazhi i linkut kryesor */



}




ul#level-one li{
    width:80px;/*hapesira midis linkeve te menuse*/
    float: left;
    font-weight: bold;
    font-family: Arial;
    padding-left: 12px;
}
ul#level-one li:hover{
    background: #FFA500;
}
ul#level-two{
    list-style: none;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 28px;
    border: 0px solid red;
    background-color: #FFF;/*Kur vendos mausin ke 1 menu KTU CAKTOHET BACKGROUND E TE GJITHA SUBMENUVE*/
}
ul#level-three{
    list-style: none;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: #FFF;/*Kur vendos mausin ke 1 menu KTU CAKTOHET BACKGROUND E TE GJITHA SUBMENUVE*/

}

ul#level-four{
    list-style: none;
    display: none;
    position: absolute;
    top: 36px;
    padding: 0;
    width: 200px;
    height: 120px;
    border: 0px solid red;
    background-color: #FFF;

}
ul#level-two li,ul#level-three li,ul#level-four li{
    width:196px;
    padding-left:4px ;
    line-height: 30px;
}



ul#level-two li:hover{

}


ul#level-three li:hover{

}
ul#level-four:hover{
}

ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
    display: block;
}

a{
    width:200px;
    text-align: center;
    text-decoration: none;
    color:#000000;
}

#Stage {
    position: absolute;/*Pozicionimi i Img-Slider*/
    left: 3.5cm;
    bottom: 11.6px
}
Member Avatar for andi-dev

I cant create the space between the Home1 Home2 Home3 ect.
When i put the mouse hover this menu the orage collor should be much bigger than now for example 10px

Member Avatar for pritaeas

Please do not bump your thread.

What exactly is the issue? Have you tried setting a margin? Putting your code in a jsfiddle would be helpful.

Edited by pritaeas
Member Avatar for andi-dev

sorry :( ok i will try that

Member Avatar for veera100

Give space for each link you can add this style code to your style sheet.

a{margin-left:10px;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.