CODEWITHSUNDEEP
htmlcss
Albance
Albance

Reputation: 167

HTML/CSS need disable margin

I spent almost half hour by searching where to disable margin for submenu. Here is an examples. enter image description here

I did margin for menu links, and submenu have been affected too. BUT i dont need that. SO i cant find where to change submenu margin to be zero. You can find website in

Upvotes: 0

Views: 77

Answers (5)

Aaron
Aaron

Reputation: 10440

Remove the margin from the .sub-menu li's

#menu ul.sub-menu li {
    margin:0;
}

Then change your ul ul's position with this to center the dropdown navigation. Replace your current ul style with this (line: 182 of your css).

#menu ul ul {
    background-color: #4d4d4d;
    display: none;
    left: 50%; /* CHANGE THE POSITION TO 50% */
    padding: 0;
    position: absolute;
    top: 119%;
    transform: translateX(-50%); /* THEN MOVE IT LEFT -50% OF ITS NATURAL WIDTH */
}

Upvotes: 2

Kishan
Kishan

Reputation: 1190

change in your css 

#menu ul li a{
width:99%;
}

output

enter image description here

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

try like this(style.css) :

#menu ul ul li {
    float: none;
    width: 100%; /* dont give fixed value instead give 100% */
}

This will remove blank space which is on hover the link

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now try to this way

remove margin-right and define width auto as like this 

#menu ul ul li {
  float: none;
  margin-right: 0;
  width: auto;
}

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

Reason: If you are using unordered list then make margin and padding for it to be zero. As there exists a default padding and margin for ul and li.

Solution:

#mainMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainMenu li {
    float: left;
    margin: 0;
    padding: 0;
}

mainmenu is the id associated with the unordered list in this example. You canremove it if you want to and apply it globally to all ul and li.

Upvotes: 0

Related Questions