EDITED So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout work
by client by categoryclients contact `
1 Answer
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
5 Comments
user1740297
actually I edited my question because its not working when I try and implement your jsfiddle css, can you help me out?
Throttlehead
I'd be happy to take a look if you paste your html and css into a fiddle so I can look around. It's likely your positioning isn't working because of some child or parent element.
Throttlehead
Edited the answer with the updated fiddle. Hope this is enough to help you finish.
user1740297
I cant see what you have done? Its still showing the content I put into the fiddle
user1740297
is there anyway to keep the drop down menu to stay in position when on the "by client" or "by catagory" page. So in other words the drop down doesn't disappear when on those pages?