I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
Related
I'm trying to use PureCSS, and get menudrop downs using CSS (rather than via either YUI or Jquery for portability reasons).
This is what I have so far:
http://jsfiddle.net/ket262p3/3/
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li class="pure-menu-separator"></li>
<li>Test3</li>
</ul>
</li>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</li>
</ul>
</div>
and:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 58px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
}
I think the underlying problem may be some subtly in purecss that causes the second level menu not to display.
Ignore the extra classes - they represent earlier stages of getting this to work with YUI or JQuery.
You have to set the visibility of your subnavigation to visible.
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
Example:
http://jsfiddle.net/ket262p3/6/
On further investigation it appears that a lot of the infrastructure for doing this is already built into PureCSS, but not documented very well. I replicate the solution below so that other people can find it.
The main solution is documented here: https://gist.github.com/maxbeatty/7829915
I have replicated in a jsfiddle: http://jsfiddle.net/0562cqd8/1/
The html is as follows
<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
Heading
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
Cars
<ul>
<li>
Blue
</li>
<li>
Red
</li>
<li>
Green
</li>
</ul>
</li>
<li>
Trucks
</li>
</ul>
</div>
With CSS like this:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-can-have-children:hover {
background: #eee;
}
.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}
Please try this css
.pure-menu ul
{
margin:0;
padding:0;
float:left;
width:100%;
}
.pure-menu ul > li
{
margin:0;
padding:0;
float:left;
list-style:none;
position:relative;}
.pure-menu ul > li >a
{
margin:0;
padding:0;
float:left;
padding:8px 4px;
text-decoration:none;
color:red;}
.pure-menu ul > li > ul
{
position:absolute;
top:100%;
left:0;
display:none;
width:200px;
}
.pure-menu ul > li > ul >li
{
width:100%;
}
.pure-menu ul > li > ul >li >a
{
padding:8px 20px;
background:red;
color:#fff;}
li.pure-dropdown:hover ul {
display:block;
}
change the color as per your requirement
Nested list navigation is not displaying the second list as I'd expect (block listed down vertically). Instead all items are placed directly on top of one another.
http://jsfiddle.net/HL69H/3/
<div id="linksLeft">
<ul class="menu">
<li class="current">about</li>
<li class="current" id="active">portfolio
<ul class="subMenu" id="subNav">
<li>editorial</li>
<li>advertising</li>
<li>packaging</li>
<li>photography</li>
</ul>
</li>
</ul>
</div>
#nav {
width:48em;
margin:auto;
text-align:center;
padding-top:6em;
list-style-type:none;
}
#outerBox {
margin:0;
padding:0;
}
#linksLeft{
float:left;
border-top:2px solid #93b9bb;
border-bottom:2px solid #93b9bb;
margin-top:60px;
padding:5px 0px;
}
#linksLeft li {
display:inline-block;
padding:0 3em;
position:relative;
}
#linksLeft li ul li {
display:block;
}
#subNav li{
position:absolute;
padding:1em;
left:50%;
/*display:none;*/
}
#linksRight li{
display:inline-block;
padding:0 3em;
position:relative;
}
The position: absolute; was stacking them. Changing this to relative, and use absolute positioning on the parent container to position it where you want it.
#subNav li{
position:relative;
padding:1em;
left:50%;
/*display:none;*/
}
the problem is your css for '#subnav li'. The style you apply you want for the ul but not the li.
CSS
#subNav {
position:absolute;
padding:1em;
left:0;
/*display:none;*/
}
#menu li{
position:relative;
}
That gives you what you want
I trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/
it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/
I have a horizontal menu coded in html and css only, this menu has sub-menu and some sub-menu has sub-menu of their own.
It works fine with the first level sub-menu only, but when I insert some sub-menu for any individual sub-menu, they still show up. But I can not reach to click them, they vanishes as my cursor moves. A demo can be found here : http://example.bojroninad.net/pages/menu_demo1.html
However, I was able to watch some steady behavior of this menu sometimes, but most of the time they vanishes before I reach to them.
Here is my html code(pardon me for bad structured code):
`<html>
<link rel="stylesheet" href="menu1_css.css" media="screen" type="text/css">
<div id="menu1">
<ul>
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Team</li>
<li>Offices</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design </li>
<li>Internet Marketing</li>
<li>Hosting </li>
<li>Domain Names
<ul>
<li>.ORG</li>
<li>.COM</li>
<li>.NET</li>
</ul>
</li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France </li>
<li>USA </li>
<li>Australia </li>
</ul>
</li>
</ul>
</div>
</html>`
and my css code goes here:
#menu1 {
background-color:#ccc;
width:100%;
height:30px;
}
#menu1 ul{
padding:0px;
margin:0px;
}
#menu1 ul li
{
list-style:none;
display:inline;
margin-left:10px;
float:left;
height:30px;
position:relative;
}
#menu1 ul li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:green;
}
#menu1 li a:hover{
text-decoration:underline;
}
#menu1 li ul {
display:none;
margin:0px;
padding:0px;
position:absolute;
left:0px;
top:20px;
width:120px;
background-color:#999;
}
#menu1 li:hover ul{
display:block;
width:160px;
}
#menu1 li li {
display:list-item;
list-style:none;
}
/* second level sub menu */
#menu1 li li ul {
padding:0px;
margin-left:150px;
background-color:white;
top:0px;
position:relative;
}
#menu1 li li li{
display:none;
list-style:none;
position:absolute;
width:120px;
background-color:red;
}
#menu1 li li:hover li{
display:block;
width:100px;
position:relative;
margin-left:0px;
float:left;
height:30px;
}
#menu1 ul li li li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:yellow;
}
#menu1 li li li a:hover{
text-decoration:underline;
}
The problem is that your second and third level list elements are also floated left, making them smaller than the menu itself.
You can solve it by setting:
#menu1 li li {
float: none; /* line 50 */
}
#menu1 li li ul {
position: absolute; /* line 57, is now relative, to avoid growth of li li */
}
As far as I can see, the menu works fine - except that the second-level menu is positioned a bit too low
Usability would also be much better if you changed background color on li:hover + cursor:pointer - so you can see which button in the menu is active (and the user gets a visual feedback when he hovers out).
I'm trying to make a horizontal menu layout in CSS. I was using the guide listed here:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I've got a css file looking like this, called navigation.css:
.navigation{
width:100%;
height:30px;
background-color:lightgray;
}
.navigation ul {
margin:0px;
padding:0px;
}
.navigation ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
.navigation li a {
color:black;
text-decoration:none;
}
.navigation li a:hover {
color:black;
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
}
.navigation li:hover ul {
display:block;
width:160px;
}
.navigation li li{
list-style:none;
display:block;
}
and in my actual php page, I have this
<div class="navigation">
<ul>
<li>
something
<ul>
<li>Hello</li>
<li>hello2</li>
</ul>
</li>
<li>
Browse database
<ul>
<li>test</li>
<li>Test2</li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.
In case you're still having the problem, have you tried changing:
.navigation li li{
list-style:none;
display:block;
}
To:
.navigation li li{
list-style:none;
display:none;
}
.navigation li:hover li{
display:block;
}