Without adjusting my padding for my 'nav ul li' because its used for spacing out navigation links, how can i fill the full width of the dropdown links background 'nav ul li ul li' as it only seems to fill half of the background color.
(HTML):
<nav>
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
<li>Num 4</li>
<li>Num 5</li>
<li>Num 6
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Num 7</li>
</ul>
</nav>
(css)
JSFIDDLE
Note: Choosing not to upload CSS as i have to use the Harvard referencing system and any similarities compared with online snippets returns as a higher plagiarism percentage even if this is my own work, so i'll choose to upload more precise code on JSFiddle as its not returned from the plagiarism test.
Here is a working demo
Change your padding from li to a:
nav ul li a {width:65px; display:inline-block; padding:0 30px}
and add the display and float proprieties to second-level li:
nav ul li ul li { padding:0; border:none;display: list-item;float: none }
well a quick way to fix this is instead of adding padding you just add the 30px on the right and left to the total width of the nav ul li which ends up being 125px
nav ul li {
border-right: 1px solid #355e7f;
display: inline-block;
float: left;
width: 125px;
}
Here is an updated JSFIDDLE
Hope that helps!
Related
I have code that dynamically generates <ul> lists each with two <li> in them. I want those to be displayed next to each other / broken into the next line if there isn't enough room anymore.
Currently I have this
ul.pictureBlocks{
display: table-cell;
}
This displays them next to each other with 0 space between them. I tried border-spacing and margin or padding but nothing worked. When I used display: table on the ul tag it got the spacing from border-spacing but displayed them beneath each other.
Got it
.pictureblocks{
display: inline-table;
border-spacing: 10px;
border-collapse: separate;
}
you can try this to give space between li and align them horizontally.
/--CSS Code---/
ul{list-style-type:none;}
ul li{display:inline-block; background-color:#ef8913; padding:5px;}
ul li a{ color:blue}
/--HTML Code --/
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Try this link. http://jsbin.com/kunavupa/1/edit
try display:inline-block and then padding or margin...
ul li{
display: inline-block;
background:red;
height:20px;
width:20px;
}
jsfiddle
I'm having a bit of difficulty trying to get my drop down (sub-menu) to appear above the content. I have tried z-index and still there is no fix.
Initially the sub-menu starts off with a height of 0 and overflow-hidden (so it isnt shown). I have added JQuery to add a class of open when the parent of the sub menu is clicked. Then I have put a height on. The menu appears fine along with the transition, however the drop down sits below the content and it cannot be clicked.
Can anyone please help?
CSS
.sub-menu{
height:0;
overflow:hidden;
}
.sub-menu li {
width: 100%;
display: block;
clear: both;
border-top:1px solid;
}
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
z-index: 5000;
}
li.sub-menu-parent:hover .sub-menu {
height: 204px;
}
HTML
<div class="col navigation">
<nav>
<ul>
<li class="sub-menu-parent">Menu Item 1
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li class="sub-menu-parent">Menu Item 5
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to give your element some position before the z-index will kick into action. I'd suggest also adding this to your .navigation divider instead of the li elements:
div.navigation {
position: relative;
z-index: 5000;
}
You should then give a lower z-index to your content just to be on the safe side:
{contentSelector} {
position: relative;
z-index: 1;
}
z-index is not working without position you need to set a position for your element.
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
position:relative;
z-index: 5000;
}
Reference
You won't see the transition, without the position,
you need it relative to affect the div.
..and I did it in a nice little rhyme for you too :)
Have a look at this FIDDLE
Also, because Im in a good mood, I've tweaked into a sample horizontal menu
You need to use:
ul ul{
position:absolute;
}
Without position set to absolute, the content is effectively being injected before the next list item. You dont necessarily need to use z-index for a vertical menu.
I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
<div id="sub-menu-items">
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
CSS:
#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808;
}
nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}
how is this not working?
The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:
nav ul li:first-child:hover #sub-menu-items ul li
CSS drop down menus are done like this:
HTML
<ul>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
CSS
ul ul {
display: none;
}
ul > li:hover ul {
display: block;
}
You will need to nest the sub-menus within parent 'li'
Your code will be something like this:
<nav>
<ul class="parent-menu">
<li>HOME</li>
<li>NEWS
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
Then you can style sub-menu ul & li (preferably position:absolute) and css can be:
.parent-menu li:hover .sub-menu { display:block}
The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.
The CSS in this line
nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}
is looking for "#sub-menu-items ul li" inside the first "li" of "nav".
Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.
I have a nested list for a navigation
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
</ul>
<li>item 3</li>
</ul>
Now i want to display the top level (item1, 2 & 3) at the top right of the page in a horizontal line. The submenu should be displayed as a list on the left side of the page.
I can not change the HTML aparently.
So how do i get the sublevel out of there?
Using position:absolute it will use the upper level for orientation wich will change depending on the width of the main level.
I need it to use the mother div for orientation so i can place it on the right side of the page.
Is this even possible?
Any ideas anyone?
Are you looking for this?
SEE DEMO
CSS:
ul { float: right; }
ul li { float: left; padding: 0 20px; }
ul li ul { position: absolute; left: 0px; top: 0px; display:none; }
ul li ul li { float: none; }
ul li:hover ul { display: block; }
Please take a look at the footer of http://www.animefushigi.com/, I am trying to make the affiliate list 2 columns, as 1 is too long.
The code is as follows
<ul class="none"><li><span>Affiliates<em> </em></span></li>
<li>link 1</li>
<li>link 2</li>
etc etc
you can try something like this using only css: http://jsfiddle.net/seler/ThvUJ/ (wont work in ie lte 8)
but i think the best way to do it will be making js script, which will count li elements and add </ul><ul> if necessary. (example: http://jsfiddle.net/seler/ThvUJ/3/)
If the order doesn't matter (and I'm assuming it doesn't because you're using an unordered list), you could achieve this effect with your current HTML. Just float your list elements in such a way that only two of them can fit per line. Below is a quick example of what I mean:
ul {
width: 200px;
list-style: none;
}
li {
float: left;
width: 90px; /* 100 - 5 - 5 */
margin: 3px 0;
padding: 0 5px;
}
li a {
width: 90px;
display: block;
}
maybe you can make nested ul like this:
<ul class="none">
<li><span>Affiliates<em> </em></span></li>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
<ul>
<li>link 3</li>
<li>link 4</li>
</ul>
</ul>
If you want your footer to be a specific height, you can do this: http://jsfiddle.net/NfMPX/
Basically, set the height of the ul and float and set a width for the lis and they will automatically wrap.