How do i get this dropdown to work?

HTML & CSS
1

Trying to make a CSS only drop down menu, im using display: none on the nestled UL and display: block; on hover… but it wont show up…
If someone could take a look at the CSS i would appreciate it=)

HTML something like this


<ul>
   <li><a>text</a></li>
   <li><a>text</a>

       <ul>
           <li><a>text</a></li>
           <li><a>text</a></li>
       </ul>

    <li><a>text</a></li>
</ul>

CSS

ul{
            position: relative;
            li{
                display: block;
                float: left;
                a{
                    display: block;
                    padding: 20px 25px 20px 25px;
                    text-decoration: none;
                    color: #fff;
                    text-align: center;
                    text-transform: uppercase;
                    font-size: 14px;
                    font-weight: 400;
                    border-right: 1px solid rgba(0, 0, 0, 0.1);
                    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);
                    &:hover{
                        background: #fff;
                        color: @color-blue;
                    }
                }
                ul{
                    display: none;
                    position: absolute; top: 100%;
                    background: #fff;
                    li{
                        position: relative;
                        float: none;
                        a{
                            color: @color-blue;
                            padding: 10px 60px 10px 25px;
                            text-align: left;
                            border: none;
                        }
                    }
                    &:hover{
                        display: block;
                    }
                }
            }

If u think the CSS looks weird its because i use LESS.

2

It would be better to post the CSS that is served up to the browser, because otherwise it’s not real CSS.

3

I used an online converter and this is what i got:

nav { background:#446cb3; }
nav section ul { position:relative; }
nav section ul li {
  display:block;
  float:left;
}
nav section ul li a {
  display:block;
  padding:20px 25px 20px 25px;
  text-decoration:none;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  font-size:14px;
  font-weight:400;
  border-right:1px solid rgba(0,0,0,0.1);
  box-shadow:1px 0 0 rgba(255,255,255,0.11);
}
nav section ul li a:hover {
  background:#fff;
  color:#446cb3;
}
nav section ul li ul {
  display:none;
  position:absolute;
  top:100%;
  background:#fff;
}
nav section ul li ul li {
  position:relative;
  float:none;
}
nav section ul li ul li a {
  color:#446cb3;
  padding:10px 60px 10px 25px;
  text-align:left;
  border:none;
}
nav section ul li ul:hover { display:block; }
4

Hm, OK, a few things are messed up there. For a start, your last line should read

nav section ul li[COLOR="#FF0000"]:hover[/COLOR] ul { display:block; }

You can’t hover over the hidden ul until it’s visible, so the :hover needs to be on its parent.

You have some redundant elements in there, though. Leaving <nav> aside, there’s no reason to have a <section> element inside there. (Hopefully it’s not even valid to do so, but I’m not up on HTML5 rules.)

5

thx once again, youre on a helping spree i see=) And yeah didnt look to pretty when i converted the less, so i have cleaned it up a bit now from redundant elements etc.

Now the drop down is working, just one more thing to make it “complete”, if u go by the ugly css up there + your hover correction, how should i do to make the “hover this item for dropdownmenu -item” stay white even when i start moving down on the dropdown menu? ATM it goes back to the “non-hover” color.

Hope u understand what i mean, Im not the best at putting my problems to words:P

6

Sure, the problem is clear. Rather than reinvent the wheel, though, let me point you to this simple dropdown example, which shows all the bits you need to do it properly:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

Of course, there are other ways to hide the dropdown, like display: none, but this example probably shows a better way. All the code is there to see if you view source. :slight_smile: