CODEWITHSUNDEEP
htmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to style a UL/LI drop down

I have a unordered list which I am trying to customize during runtime that is invoked by DropKick CSS styling.

Here is an image of what I see:

enter image description here

I tried to style it like this which didn't do anything to the style:

  .dk_options ul li a {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .dk_options_inner ul li a {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

When the style originally had the following, it worked like a charm but interfered with my other HTML tags:

* {
     margin: 0;
     padding: 0;
}

I am trying to apply that JUST to the dropdown only. How come my style isn't working? How can I resolve it?

Upvotes: 2

Views: 1514

Answers (1)

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

You have to clear margin and padding from your list elements (ul).

.dk_options ul{
    margin:0;
    padding:0;
    list-style:none;
}

if you want to clear margin and padding only for first level menu, you have to select it like this:

.dk_options > ul{
    margin:0;
    padding:0;
    list-style:none;
}

or if you want to clear margin and padding from sub-level elements, you can select like this:

.dk_options > ul > li ul{
    margin:0;
    padding:0;
    list-style:none;
}

Upvotes: 2

Related Questions