i'm trying to get a horizontal navigation bar, but I can't get it to work right.
http://jsfiddle.net/2fkxx/
nav {
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
display: block;
width: 80px;
}
Set your li to inline-block rather than inline.
nav ul li {
display: inline-block;
}
Fiddle
FIDDLE
nav ul li {
float: left;
}
Simple solution:
Set 'float:left' for the list element and also do 'display:inline-block'
nav ul li{
float:left;
display:inline-block;
}
Let me know if it worked. I have had the same problem recently. I can help you out more.
Or you could try using inline-block instead of block
nav ul{
display: block;
overflow: hidden;
margin: 0 auto;
}
nav ul li{
display: inline-block;
}
You need float:right on nav ul li visit link
nav ul li {
float:left;
display: inline;
}
Related
I have an existing responsive nav menu that I want to add a sub-menu to (actually it is just one link under one of the top menu items). Sounds like it should be very EASY, but I cannot figure it out. As soon as I add the link, it either ends up just below the top item (making the whole nav grow down with it) or displaying "none" makes it disappear and not come back on hover. Is there a simple way to do this with CSS only? I hope my question is clear enough. I will include my necessary code. If you give me code, please tell me where to put it. I am a Newbie. Thanks so much for any help.
HTML:
<nav><a href="index.html">
<div id="logo"><img src="images/logo-text.png" alt="CBS Stuctures, Inc."></div>
</a>
<label for="drop" class="toggle">MENU</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>HOME</li>
<li>COMPLETED PROJECTS</li>
<li>STRUCTURES
<ul>
<li>Video Presentation</li>
</ul>
</li>
<li>NEW PRODUCTS</li>
<li>CONTACT</li>
</ul>
</nav>
CSS:
nav {
height: auto;
margin: 0;
padding: 0;
background-color: #000;
}
#logo {
display: block;
float: left;
padding: 0;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
display: inline-block;
font-size: 1.5em;
list-style: none;
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.toggle, [id=drop] {
display: none;
}
nav a:hover {
color: #70E4FC;
}
nav ul li ul{
display: none;
}
nav ul li ul:hover{
display: block;
}
#media (max-width: 1024px) {
#logo {
display: block;
width: 100%;
text-align: center;
float: none;
padding: 0;
}
nav ul{
width: 100%;
padding:0;
margin:0;
float: none;
background-color: rgba(16,70,56,1.00);
}
nav ul li {
width: 100%;
box-sizing: border-box;
padding: 10px;
background-color:rgba(11,51,41,1.00);
}
nav ul li:hover{
background-color:#0F4739;
}
.toggle + a, .menu{
display: none;
}
.toggle{
display:block;
background-color: #333333;
padding: 14px;
font-size: 1.5em;
cursor: pointer;
}
.toggle:hover {
background-color:#515151;
}
[id^=drop]:checked + ul{
display: block;
}
}
You can simply add a hover selector on child ul inside li of a parent ul
ul li:hover ul {display: block;}
To apply it to specific element, you must add a class to your child ul:
ul li:hover ul.childul {display: block;}
check working example here
I've got a simple menu that should show a sub-menu vertically. However, i changed this menu to be in order to center it, and it now doesn't show vertically but horizontally.
Here is my codepen :
http://codepen.io/anon/pen/NGwmGq
.navitem{
height: 30px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
background-color:black;
display: inline-block;
padding: 0;
vertical-align: middle;
}
#menu li a {
display:block;
width:125px;
color:white;
text-decoration:none;
line-height:30px
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
margin-top: 30px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
margin: 0 30px;
}
/* Fin MENU */
As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned.
You seem to have deleted the positioning context on the li
#menu li {
background-color: black;
display: inline-block;
padding: 0;
vertical-align: middle;
position: relative; /* add this */
}
For li you have given display as inline-block that,s why they are coming in one line. so for portfolio submenu Write this css in your css file
#menu ul li ul li {
display: block;
}
In your css, you're making all main menu items inline using #menu li selector, which is also applied for lis in sub menu.
So you've to explicitly specify display: block for sub menu lis
Change your code as given below.
#menu li:hover ul li {
float:none;
display:block;
}
Just Add display:block to your sub menu li.
#menu li:hover ul li {
float:none;
display:block; /* Add This */
}
UPDATED : EXPLANATION
1) display:block; property is a block property in HTML. So every element with such property takes a new line(Elements views Vertically).
2) display:inline-block; property is a block but inline property. So elements which such property appears on same single line(Elements views Horizontally).
Working : Fiddle
I'm trying to set up a sample website and I'm running into an issue with the section between header and footer getting put into the same line as the header
removing margin and padding resets as a wild card fixes this but there has to be another way.
Fiddle http://jsfiddle.net/P8QmL/
header ul {
display: inline; }
header ul .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
*{ margin: 0; padding: 0; }
If I understood your question properly then this should help you
.nav-header li {
list-style: none;
margin: 0 auto;
display: inline;
}
.nav-footer li{
list-style:none;
}
Working Fiddle
I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.
My code is on fiddle here: http://jsfiddle.net/PLb5K/
To do a basic test I have done
#nav ul li ul {
display: none; }
#nav ul li:hover ul {
display: block;
position: absolute; }
UPDATE
#nav ul:hover .sub {
display: block;
position:absolute;
}
fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.
here is a basic html/css example for you:
the fiddle
css
ul {
margin: 0;
padding: 0px 100px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
ul li {
background-color:grey;
display: inline-block;
*display: inline;
padding:4px 8px;
margin:0;
zoom: 1;
}
ul li a{
color: white;
text-decoration:none;
}
ul li ul.sub{
display:none;
position:absolute;
margin-top:4px;
margin-left:-8px;
}
ul li:hover ul.sub{
display:block;
}
I am trying to create a simple sub menu which appears when u hover over the main menu.
Can anyone see where i am going wrong?
I have created this fiddle for example.
Try this: http://jsfiddle.net/KSeph/11/
It is not layouted but it works.
This css basically provides a very simple way to realize dropdowns:
.subMenu {
float: right;
}
.subMenu ul li {
float: left;
}
.subMenu ul ul {
display: none;
position: absolute;
}
.subMenu ul li:hover ul {
display: block;
}
.subMenu ul ul li {
float: none;
}
Hey now add two style in your css as like this
.subMenu li{
position:relative;}
.subsubmenu {
position:absolute;
top:22px;
left:0;
}
Live demo
on .subsubmenu add left: 0; top: 0; and remove float: right !important;
on .subMenu ul li add position: relative;