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 category
clients
contact
`
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.
http://jsfiddle.net/PfChj/4/
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.
http://jsfiddle.net/FYnS4/2/
Related
So I'm making a minor button and navigation kit in terms of learning more HTML and CSS responsiveness. Navigation is my weak point and I've come to my first problem that I can't get my head around.
https://jsfiddle.net/ku0wezws/3
If you scroll to the bottom of the CSS, you'll find the subnav implementation and what I'm trying to achieve is to align all the content in the center when you hover over About. You'll notice that it has just aligned one after the other side by side. My aim is to center all of that normally, going all the way down. Like this: http://www.w3schools.com/howto/howto_js_dropdown.asp
Am I being really stupid? I think I am. What should I adjust in the CSS to make this happen?
Thank you.
Edit:
Edited the JSFiddle
Add this to prevent the li items of that submenu to float next to each other:
.jkit-subnav li {
float:none;
}
https://jsfiddle.net/yhkuv138/
Just clear the float from .jkit-nav-inverse ul li ul li.
Add below code to the end of your CSS.
.jkit-nav-inverse ul li ul li{
clear: both;
}
Updated fiddle
I have vertical drop down menu, and I want that the sub menu will be vertical too.
Seemingly, if you set float:left for the sub menu li it should be fine, but the problem is, that the sub menu ul which is nested in li has a width that depends on it's parent (li) width and don't expands enough, so that the lines (li) of sub menu are presented vertically.
You can see an example: http://jsfiddle.net/r6qNJ/
I thought about two solutions:
Solution 1:
Expanding a width of a nested ul to a very big one
ul.sub{width:999px;}
The problem is, that by this way I have to dissable a background and border of a sub menu ul, as it has a non nature width.
An example: http://jsfiddle.net/r6qNJ/1/
Solution 2
Using display:flex property, so that the width of a child element will not depend on it's parent width.
An example: http://jsfiddle.net/r6qNJ/2/
The problem is, that it's not supported in old browsers.
So, what is more elegant and efficient CSS solution you can offer?
(I am looking for a pure CSS solution, without changing HTML, since I am talking about changing in wordpress theme and prefer to make changes only in css files)
You can have this option with white-space:
ul.sub{
position:absolute;
left:0px;
top:100%;
padding:0;
display:inline-block;
white-space:nowrap;
}
ul.sub li{
display:inline-block;
margin-right:-4px;
width:80px;
float:none;
}
The demo http://jsfiddle.net/r6qNJ/23/
I want to make my top level navigation stay on the hover state while I'm hovering on the submenu items. I read that I should apply the hover effect to the li, but there are some transitions that are confusing the situation for me. I can't figure it out. Can someone tell me where I need to adjust this?
my jsfiddle
You're going to want to apply the :hover effect to the li and apply the CSS to the direct a child. Applying the hover to the a won't work because the submenus of the top-level links aren't in the a element.
ul#navigation .topNav:hover > a {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
http://jsfiddle.net/zwVwh/12/
<ul>
<li>Brantford Grandview</li>
<li>Brantford Vintage</li>
<li>Kingston <br/>River Park</li>
<li>Paris</li>
</ul>
It's a pretty basically drop down menu Im building. Right now, I'm just adding a top border to every li giving it a grey line. However, what I want is a 1or 2px gap between the links so the user can see the bg behind. I tried add a div tab in between the li with a height of 1px, but it does not work.
Thanks
A padding inside the li would work.
li{
padding-top:2px;
}
would leave a 2px space inside the li and show the background.
It's hard to tell without seeing the CSS, but I would try fooling around with margin-top or something. It mainly depends on what element the background is being applied to, in your case you would need to apply it to the <li>. Let me know if I need to elaborate.
I have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;