I've made an horizontal menu that all menu items take 100% of the nav. To do this, I use display:table in 'lu', and display:table-cell in 'li'. In this way the menu is horizontal and extends all manu items to 100% width. The problem is the submenu is also horizontally but I want the submenu items vertically.
<script type="text/javascript">
$('body').ready(function() {
$('.dropdown').hover(function() {
$(this).find('.sub_navigation').slideToggle();
});
});
</script>
ul#navigation {
float:left;
display:table;
margin:0;
padding:0;
width:100%;
font-size:15px;
background-color:#FFF;
}
ul#navigation li {
display: table-cell;
margin:0;
padding:14px 3px 14px 3px;
text-align:center;
}
ul.sub_navigation {
position:absolute;
display:none;
margin:0;
padding:0;
background-color:#FFF;
opacity:0.8;
list-style-type:none;
}
ul.sub_navigation li {
clear:both;
}
ul#navigation li a,
ul#navigation li a:active,
ul#navigation li a:visited {
color:#000000;
text-decoration:none;
display:block;
}
ul#navigation li a:hover {
color:#478961;
}
<ul id="navigation">
<li class="dropdown">
Item 1
<ul class="sub_navigation">
<li>Sub item 1</li>
<li>Sub item 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
What can I add to sub_navigation styles to show subenu items vertically?
Thanks
Victor
Since the elements are set to clear:both, simply add float:left to the li elements in the subnavigation.
ul.sub_navigation li {
float:left;
clear:both;
}
Doing so without floats if that's what you want:
ul.sub_navigation li a {
display: inline-block;
}
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
When a user hovers over my horizontal menu, how can I keep the sub-menu open until another menu item is hovered over? Here is the source code:
HTML
<ul id="nav">
<li>Home</li>
<li>my Links
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
CSS
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
If this is not possible with CSS, how can it be done with jQuery? Thanks.
Based on your updated question, modified answer below.
You'll need to add a small amount of JS as mentioned in my comment, please see here for demo
JSFiddle (updated)
Updated HTML:
<ul id="nav">
<li>Home</li>
<li><a id="hover1" href="#">my Links</a>
<ul id="visible1">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li><a id="hover2" href="#">Our Links</a>
<ul id="visible2">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
</ul>
Updated CSS:
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
.result_hover {
display:block !important;
}
Updated JQuery:
$("#hover1").hover(
function () {
$("#visible1").addClass("result_hover");
$("#visible2").removeClass("result_hover");
}
);
$("#hover2").hover(
function () {
$("#visible2").addClass("result_hover");
$("#visible1").removeClass("result_hover");
}
);
I don't think you could achieve that only with CSS.
The solution that I thing about from the top of my head is to add class 'hover-class' to the li item via jQuery, and while hovering on new menu item adding 'hover-class' to the new item and removing it from the old one. You should keep track in JS what's the last item that has been hovered and manipulat view based on this data.
But maybe someone will suprise me and give solution only in CSS :) Hope it helps.
I've been working on a CSS based dropdown menu and I want it to evenly spread the top buttons across its container. I've found a few different solutions for evenly spreading items horizontally, but the ones I've tried are broken by the float I need to put on the top items to make the dropdown work in Firefox.
So my questions are:
Is there a method of spreading horizontal items that works even if those items are floated?
or
Is there a solution for making dropdown menus work in Firefox that doesn't involve floating?
Here's a link to a (somewhat) simplified JSFiddle of the navbar: http://jsfiddle.net/erynamrod/wPJ23/3/
HTML:
<ul class="topper">
<li class="top">Top 1</li>
<li class="top">Top 2
<ul class="hidden">
<li>Dropdown 2.1
<ul class="hidden2">
<li>Dropdown 2.1.1</li>
<li>Dropdown 2.1.2</li>
<li>Dropdown 2.1.3</li>
</ul>
</li>
<li>Dropdown 2.2</li>
</ul>
</li>
<li class="top">Top 3
<ul class="hidden">
<li>Dropdown 3.1</li>
<li>Dropdown 3.2</li>
</ul>
</li>
</ul>
CSS:
.topper {
font-family: Verdana, sans-serif;
width: 100%;
padding: 0%;
display:table;
text-align:center;
z-index:5;
}
.top {
display: table-cell;
margin-left: 10px;
padding:1%;
position:relative;
/* float:left;
This float is necessary for the dropdowns to work in Firefox,
but it breaks the table/table-cell display that spreads the .top */
}
/* Everything below here is, I think, relatively unrelated to my current problem */
.topper > li:hover {
background-color:#6dcff6;
}
.hidden > li:hover {
background-color:#6dcff6;
padding-right:0;
margin:0;
}
.hidden2 > li:hover {
background-color:#6dcff6;
}
.topper > li:hover > a:link {
color:#fff;
}
.dir {
text-decoration:none;
color:#fff;
margin-right: 15px;
}
.tlink {
text-decoration:none;
color:#6dcff6;
display:block;
}
li {
white-space: nowrap;
}
.hidden, .hidden2 {
position:absolute;
display:none;
list-style: none;
margin:0;
padding:0;
text-align:left;
background-color:#333;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
left:0px;
}
.hidden > li {
padding:5% 0% 5% 5%;
width: 100%;
}
.hidden2 > li {
padding:5%;
size: 1em;
}
.hidden {
top:100%;
left:0%;
}
.hidden2 {
left: 100%;
top: 0%;
}
ul > li:hover > ul {
display: list-item;
}
Try this
.top {
display: table-cell;
margin-left: 10px;
padding:1%;
position:relative;
float:left;
width:25%;
}
I made a responsive menu:
http://jsfiddle.net/7vmCZ/2/
<ul id="nav">
<li>Menu 1
<ul>
<li>Menu 111</li>
<li>Menu 22</li>
<li>Menu 3333</li>
<li>Menu 44
<ul>
<li>Menu 111111</li>
<li>Menu 22</li>
<li>Menu 3333</li>
<li>Menu 44</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2222</li>
<li>Menu 33<ul><li>This submenu should be under Menu33</li></ul></li>
<li>Menu 4444444</li>
</ul>
a
{
background-color: red;
}
#nav {
display:table;
}
#nav > li {
list-style:none;
padding:0px 10px 0px 10px;
border:1px #000 solid;
position:relative;
display:table-cell;
width:1%;
}
#nav ul li {
width: 100%;
display:block;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#fff;
position:relative;
white-space:nowrap;
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #000 solid;
}
ul#nav > li:hover > ul {
margin-left: -10px;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
color:#fff;
background:#000;
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
the problem is, the menus are clickable, and the tag wont fit all its container (thats why I highlighted with red color). How to dodge it?
a {
display: block;
}
Possibly add width: 100%; also,
<a> elements are display: inline by default, so the width will only be as wide as the text and any padding added to the element. display: block will make it take up the available width.
In case you still have problems, don't forget about the parent element's padding. The child can only take up as much space as is available to it. The parent padding may prevent it from stretching all the way to the edge of the parent. This will also be the case with the element's margin. If the a tag here has a margin, this will put space around it.
Here you go
http://jsfiddle.net/SinisterSystems/7vmCZ/3/
li {
text-align:center;
}
a
{
background-color: red;
display:block;
}
For the filled BG, use display:block;
For the alignment, target your li items.
If you just want your top level list items centered, use a basic text-align on all li items, then a psuedo class to direct descendants of your ul#nav.
ul#nav li {
text-align:left;
}
ul#nav > li {
text-align:center;
}
I am trying to create a sub menu that floats out to the right. However, I have hit a brick wall and can only get it to float inline.
http://jsfiddle.net/jspring/yD9N4/
You can see here (although it is a bit wider than normal) that the sub menu just displays inside the parent list item. If someone could help me to get it floating out to the right that would be great!
<ul class="cl-menu">
<li>Link 1
<ul>
<li>Sub Link 1
</li>
<li>Sub Link 2
</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Sub Link 1
</li>
<li>Sub Link 2
</li>
</ul>
</li>
</ul>
.cl-menu{
list-style:none outside none;
display:inline-table;
position:relative;
width:100%;
}
.cl-menu li{
list-style:none outside none;
border-bottom:1px solid #cccccc;
padding:5px 1px;
text-align:center;
}
.cl-menu > li:hover{
/*background-color:#303030;*/
background-color:#66819C;
color:#FFF;
font-weight:bold;
text-decoration:underline;
opacity:1;
}
.cl-menu li ul{
display:none;
}
.cl-menu li:hover ul{
display:block;
opacity:0.8;
background-color:#FFF;
margin-top:4px;
font-weight:normal !important;
}
.cl-menu li ul li{
border-bottom:1px solid #cccccc !important;
border-top:none !important;
border-left:none !important;
border-right:none !important;
}
.cl-menu li ul li a{
color:#000;
text-decoration:none;
}
.cl-menu li ul li a:hover{
color:#390;
text-decoration:underline;
}
.cl-menu ul:after{
content:"";
clear:both;
display:block;
}
Use position:absolute property for submenu. Use right css property for positioning the submenu properly.
.cl-menu li ul
{
display:none;
position:absolute;
right:20%;
}