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%;
}
Related
I'm making a responsive navigation bar that has a dropdown that expands when you hover over it. My problem is that this hover feature is not suitable for mobile devices. As such, I am wanting to change my navigation bar to expand on click instead of on hover.
I have tried using the checkbox method but cannot get it to work. I am wanting to only use HTML and CSS if it is possible. Any help will be greatly appreciated!
See it here: JSFiddle
HTML:
<ul id="navigation">
<li>Product 1
<ul>
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<li>Product 2
<ul>
<li>e.com </li>
<li>Resources</li>
<li>Copay Cards</li>
<li>Informational Video</li>
</ul>
</li>
<li>INSOMNIA EDUCATION
<ul>
<li>Complete Night Sleep Resources</li>
<li>sleep.com </li>
</ul>
</li>
<li>PAIN MGMT EDUCATION
<ul>
<li>Safer Pain Management Resources</li>
<li>painmanagement.com </li>
</ul>
</li>
<li>MEDICAL AFFAIRS
<ul>
<li>Request Clinical Reprints</li>
<li>Schedule a Scientific Session </li>
</ul>
</li>
</ul>
CSS:
/* Main Navigation */
#nav {
position:relative;
width:620px;
margin:0 auto;
margin-top:50px;
padding:10px;
}
ul#navigation {
margin:0px auto;
position:relative;
float:left;
}
ul#navigation li {
display:inline;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
}
ul#navigation li a {
width: 234px;
padding:10px 25px;
color: black;
text-decoration:none;
display:inline-block;
background: #ebebeb;
}
ul#navigation li a:hover {
background:#ebebeb;
color:black;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#ebebeb;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
display: block; /* here change visiblity > display */
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
/*visibility:hidden;*/
opacity:0;
/*position: absolute; */
display: none; /* change visibility > display */
z-index: 99999;
width:234px;
background:#ebebeb;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:55px;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:black;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}
Add these lines at the bottom of your css file or tag.
.hidden{
display: none;
}
.shown{
display: block;
opacity: 1;
}
The html file:
<li>
<a id="prod1" href="#">Product 1</a>
<ul id="prod1list" class="hidden">
<li>rx.com </li>
<li>Resources</li>
<li>Copay Cards</li>
</ul>
</li>
<script>
document.getElementById('prod1').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('prod1list').classList.toggle('shown');
});
</script>
I tried it and it seems to work fine.
So, I have this list where only the first item in the list is visible. I want to be able to see other items when I hover on the first item. bellow is my code but it doesn't work. After hovering, nothing happens.
This is the list:
#manage {
float: right;
padding: 0px;
margin: 0px;
}
#manage li {
width: 100px;
height: 30px;
background-color: Aqua;
text-align: center;
list-style-type: none;
}
#header ul a {
font-size: 25px;
font-weight: normal;
padding: 0px;
margin: 0px;
text-decoration: none;
color: White;
}
.sub {
margin-top: 3px;
display: none;
}
li:hover .sub {
display: block;
}
<ul id="manage">
<li>managment
</li>
<li class="sub">Add
</li>
<li class="sub">Edit
</li>
<li class="sub">Account
</li>
</ul>
One minor adjustment to your CSS can get this to work.
If you target your first li for the hover, not only does the current CSS selector attempt to select child elements rather than sibling elements, but your elements are going to immediately disappear when you hover over any of the now visible li elements, so re-target your CSS selector to your parent ul#manage element.
#manage:hover .sub
{
display:block;
}
#manage
{
float:right;
padding:0px;
margin:0px;
}
#manage li
{
width:100px;
height:30px;
background-color:Aqua;
text-align:center;
list-style-type:none;
}
#header ul a
{
font-size:25px;
font-weight:normal;
padding:0px;
margin:0px;
text-decoration:none;
color:White;
}
.sub
{
margin-top:3px;
display:none;
}
#manage:hover > .sub
{
display:block;
}
<ul id="manage">
<li>managment</li>
<li class="sub">Add</li>
<li class="sub">Edit</li>
<li class="sub">Account</li>
</ul>
Try adding those list items in an unordered list inside the first list item
<ul id="manage">
<li>managment
<ul class="sub">
<li>Add</li>
<li>Edit</li>
<li>Account</li>
</ul>
</li>
</ul>
And in your css
.sub
{
margin-top:3px;
display:none;
}
li:hover .sub
{
display:block;
}
Your mistake is in the last rule:
li:hover .sub
Try instead:
ul:hover li.sub
I am trying to make a vertical menu, but everytime when i show the sub menu on hover, it expands the previous element, making a 'bigger box'. I have no idea how to style that.
Dont want to use some jquery plugin if there is an css solution. I have also bootstrap3, but there is no support for nested dropdowns, dropdowns inside dropdowns ... the nested ones did not open...
JSFiddle link: http://jsfiddle.net/WqW5j/
index.html
<div class="nav">
<ul class="main">
<li>1</li>
<li>2</li>
<li>
3
<ul class="sub">
<li>3-1</li>
<li>3-2
<ul class="sub">
<li>3-2-1</li>
<li>3-2-2
<ul class="sub">
<li>3-2-2-1</li>
<li>3-2-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
css
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
}
.sub > li > .sub{
display: none;
}
.main > li:hover > .sub:nth-of-type(1){
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
clear: both;
}
.sub > li:hover > .sub{
display: block;
position: relative;
left: 20px;
top:-30px;
list-style: none;
float:left;
width: 100px;
}
To get the nested menu work make all the li items position:relative and make the ul displayed on hover as position:absolute.
Check this fiddle
HTML:
<div class="nav">
<ul class="main">
<li>1
<ul class="sub">
<li>1-1
<ul class="sub">
<li>1-1-1</li>
<li>1-2-1</li>
</ul>
</li>
<li>1-2
<ul class="sub">
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li>2</li>
</ul>
</div>
CSS
.main{
list-style: none;
padding:0px;
margin: 0px;
}
.main li{
background-color:#f1f1f1;
padding: 10px;
margin: 5px;
float:left;
clear:both;
position:relative;
}
.main li:hover{
background-color:#d8d8d8;
}
.main .sub{
display: none;
list-style:none;
padding-left:0;
width:auto;
}
.main .sub li{
float:none;
}
.main > li:hover > .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
.sub li:hover .sub{
display:block;
position:absolute;
top:0;
left:100%;
}
I am trying to style my drop down menu so it would look like on my picture:
![drop down menu]()
So far I got this:
`<nav>
<ul id="home">
<li>HOME</li>
</ul>
<ul id="about">
<li>ABOUT</li>
</ul>
<ul id="business">
<li>BUSINESS GROWTH
<ul class="sub-menu">
<li>BUSINESS GROWTH </li>
<li>FAQs</li>
<li>FEES & SCHEDULING</li>
<li>QUESTIONNAIRE</li>
</ul>
</li>
</ul>
`
#business,
#home,
#about
{
list-style-type: none;
}
#business li{
position:relative;
background-color: #004473;
display:inline-block;
width: 180px;
}
#business li a {
color: #fff;
text-decoration: none;
display:inline-block;
}
#business li ul {
position: absolute;
left: -9999px;
background-color: grey;
margin:0;
padding:0;
list-style-type: none;
width: auto;
}
#business li:hover ul {
left: 0px;
display:inline-block;
}
#business li ul li {
background-color: #004473;
width: 180px;
display:inline-block;
margin:0;
padding:0;
}
#business li ul li a {
color:#fff;
text-decoration: none;
font-style: italic;
}
#business li ul li a:hover {
text-decoration:underline;
}
main issues:
display menu horizontally (home about business growth should be on the same horizontal line)
arrow shape of main menu item
a gap between main menu items and the sub-items
http://codepen.io/anon/pen/oDzbH
Could you please help? Very appreciated.
display menu horizontally (home about business growth should be on the same horizontal line)
add this in css
nav,nav ul{
display:inline-block;
}
arrow shape of main menu item
i assume you want it on hover
ul li > a:hover{
display:block;
background:#fff url(images/arrow.png) no-repeat center bottom;
}
a gap between main menu items and the sub-items
add this in css
ul.sub-menu{
margin-top:10px; /* or whatever suits your layout*/
}
I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
#navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;
position: relative;
text-align:center;
}
/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
}
ul#navmenu li {
width:125px;
text-align:center;
position:relative;
margin-right:4px;
margin-top:10px;
display: inline-block;
}
ul#navmenu a {
text-decoration:none;
display:block;
width:125px;
height 25px;
line-height:25px;
background-color:#FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li {
border: 1px solid green;
}
ul#navmenu .sub1 a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color:#CFC;
}
ul#navmenu li:hover a:hover {
background-color:#FF0;
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
/* end rules for nav menu */
Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css
You can add margin-top:10px; to the li.
Updated CSS
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu > li {
margin-top: 10px;
}
You can also combine both margins.. margin: 10px 4px 0px 0px;
Additionally, adding inline-block and removing float:left will give you this result:
Code is really, really broke on top but this should help you out a bit.
Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.
#myDiv {
top:50;
margin-top:-150px;
}