nav {float:left;position: relative;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;}
nav ul li:hover {background:#E6E6E6;}
nav ul li a {display:block;padding:15px 25px;color:#444;}
nav ul li ul {display:block;position:absolute;width:110px;background:#FFF;}
nav ul li ul li {width:110px;}
nav ul li ul li a {display:block;padding:15px 10px;color:#444;}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}
<nav>
<ul>
<li>Link 1</li>
<li>
Link 2
<ul class="fallback">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
</ul>
</li>
<li>
Link 3
<ul class="fallback">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
http://jsfiddle.net/nkqC8/
So im trying to implement a dropdown nav bar on my new design, but there is this extra space on the left side. I need to remove that otherwise I can't use my fontawesome icons on the navigation menu. So any help with that? Thanks a bunch!
Update line 2 of css to this:
nav ul {text-align:center; padding: 0; }
ul elements have padding left on by default.
Related
I am trying to code this navbar but stuck at this issue where I am unable to extend the background/border of sub-menu as per its text length.
Check screenshot here!
*{margin:0;padding:0}
#navbar{max-width:900px;width:100%;clear:both}
#navbar ul{border-top:#e82424 dashed 1px;border-bottom:#e82424 dashed 1px;background:#eee;width:100%;list-style:none;position:relative;float:left}
#navbar ul a,#navbar ul ul a{display:block;color:#000;text-decoration:none;font-size:16px;padding:5px 10px}
#navbar ul li{position:relative;float:left}
#navbar ul li.current-menu-item{background:#ddd}
#navbar ul li:hover{background:#f6f6f6}
#navbar ul ul{white-space:nowrap;min-width:100%;border:#e82424 dashed 1px;display:none;position:absolute;top:100%;left:0}
#navbar ul ul li{float:none}
#navbar ul ul ul{top:0;left:100%}
#navbar ul li:hover > ul{display:block}
<div id="navbar">
<ul>
<li class="current-menu-item">Menu 1</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 (Making it little longer)
<ul>
<li>Deep Menu 1</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li class="last-menu-item">Menu 4</li>
</ul>
</div>
http://jsbin.com/xogebiv/edit?html,output
I would appreciate any suggestions. Thanks
Change this line:
#navbar ul{
border-top:#e82424 dashed 1px;
border-bottom:#e82424 dashed 1px;
background:#eee;
width:100%;
list-style:none;
position:relative;
float:left
}
to
#navbar > ul{
border-top:#e82424 dashed 1px;
border-bottom:#e82424 dashed 1px;
background:#eee;
width:100%;
list-style:none;
position:relative;
float:left
}
basically, do not apply the width: 100% to all ul's but only the first child.
Here's a working example: http://jsbin.com/suvizoqiwi/1/edit?html,output
Wanting to do a nested list. Where I can make the outer-list displayed as inline-block and the inner list and as a block. I must be targetting the classes of each list wrong because I'm not able to apply these preferences? thanks :)
.days ul li {
display: inline-block
}
.points ul li {
display: block;
}
<ul>
<li class="days">
<h2>Title</h2>
<ul class="points">
<li>Point 1</li>
<li>Point 2</li>
</li>
</ul>
</ul
The selector in your CSS is wrong. You're selecting the ul "inside" element with .days and .points class. What you need is a li inside your ul element, in this case .days and .points.
Another problem is your html synthax. Only li can be ul descendant, so you need to put the second ul inside the li.
.days li {
display: inline-block;
width: 150px;
}
.points li {
display: block;
}
<ul class="days">
<li>
<h2>Title</h2>
<ul class="points">
<li>Point 1</li>
<li>Point 2</li>
</ul>
</li>
<li>
<h2>Title 2</h2>
<ul class="points">
<li>Point 1</li>
<li>Point 2</li>
</ul>
</li>
</ul>
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!
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 an unordered list with 2 levels, and i would like to hide "first level submenus" and show them only when "first level" li is hover.
here,s the code :
<ul>
<li>first level</li>
<ul>
<li>first level submenuitem 1</li>
<li>first level submenuitem 2</li>
</ul>
<li>another list item</li>
</ul>
how can i do that with pure CSS selectors ?
Something like this:
ul ul {display: none;}
ul li:hover ul {display: block;}
If you might have more than two levels then you might wanna be more specific, for say:
ul li > ul {display: none;}
ul li:hover > ul {display: block;}
Code Example
I would use jQuery
<ul>
<li class="show">first level</li>
<ul class="child" style="display: none;">
<li>first level submenuitem 1</li>
<li>first level submenuitem 2</li>
</ul>
<li class="show">another list item</li>
</ul>
<script type="text/javascript" >
$(".show").hover(function() {
$(this).find('.child').show();
});
</script>
Try this,
ul li:first-child:hover ul li {
display: block;
}