I am hoping that someone could help me out with a css problem that has been driving me crazy all day. I know I'm missing something obvious here, I just don't see it. If you can help that would be greatly appreciated.
Here is the fiddle http://jsfiddle.net/taglegacy/HK7Hy/
And here is the css:
body
{
margin: 20;
padding: 20;
text-align: center;
font: 85% arial, helvetica, sans-serif;
background: #f1f1f1;
color: #444;
}
#container
{
text-align: left;
margin: 0 auto;
width: 700px;
height: 400px;
background: #FFF;
}
/*---NavigationBar---*/
ul
{
font-family: Arial, Verdana;
font-size: 14px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #9b1b19;
}
ul li
{
display: block;
position: relative;
float: left;
border-right: 1px solid #fff;
}
li ul
{
display: none;
position:absolute;
left:0;
}
ul li a
{
display: block;
text-decoration: none;
color: #fff;
padding: 5px 15px 5px 15px;
background: #9b1b19;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #af1f1c;
}
li:hover ul
{
display: block;
position: absolute;
background: #af1f1c;
}
li:hover li
{
float: none;
font-size: 11px;
background: #af1f1c;
border-top: 1px solid #fff;
}
li:hover a
{
background: #af1f1c;
}
li:hover li a:hover
{
background: #af1f1c;
}
Here is the HTML:
<body>
<div id="container">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
<li>Submenu 6</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Really Long Submenu 3 Really Long</li>
</ul>
</li>
</ul>
</div>
</body>
The "really long" list item is being cut off because your submenu ul is set to the width of it's parent li. Take out the width: 100% and it'll show the enter text.
Move it so that it only applies to the parent ul to retain the navbar width:
#topnav { width: 100% }
Fiddle
I think, a position:absolute is needed for the 2nd ul. Play around a bit with padding-top and/or top. In the example the padding-top is equal to height of main menu items.
ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}
should work, good luck!
Related
I'm trying to achieve the following result:
So far, I've written the following:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
padding-left: 1em;
line-height: 2em;
}
li li {
margin-left: -1em;
padding-left: 2em;
border-bottom: none;
}
li li li {
margin-left: -2em;
padding-left: 3em;
border-bottom: none;
}
Demo: https://jsfiddle.net/9h891a0s/1/
However, I am looking for a solution that would allow for infinite depth. Is there a clean solution for this?
Take a look of this by using the position:absolute tricks for the borders.
body {
margin: 0;
padding: 1em;
}
body > ul {
border-bottom: 1px solid black;
overflow: hidden;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
line-height: 2em;
position: relative;
}
li ul {
padding-left: 1em;
}
li:after {
content:"\00A0";
position: absolute;
width: 200%;
left: -100%;
top: 0;
border-top: 1px solid black;
z-index: -1;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
Fiddle Demo: http://jsfiddle.net/Lr5cmoo6/
You could fake the borders by applying a repeating linear-gradient as the background of the top level ul. Then you'd need to just need a single rule for your list items to set your padding.
Here's an example:
body{
font-family:arial;
font-size:14px;
margin:0;
}
body>ul{
background:linear-gradient(0deg,#000 3.333%,#fff 3.333%);
background-size:100% 30px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
line-height:30px;
padding:0 1em;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
There's no way to increase the margin/padding of an element by the nesting.
May this could help you:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
line-height: 2em;
}
li li {
border-bottom: none;
}
li li a {
margin-left: 1em;
}
li li li a {
margin-left: 2em;
}
li li li li a {
margin-left: 3em;
}
I'm trying to get my navbar centered on my page with the edges of navbar going for entire length of browser window. I cannot figure this out. I think it has something to do with the float:left of the individual nav items. I want this nav bar to be orange background across entire browser window, but the actual nav items to be centered on page. I've copied code below and working demo below that.
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
#nav-wrapper {
width:100%;
background: #ff6633;
margin 0 auto;
}
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
}
.nav li {
float: left;
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 220px;
z-index: 9999;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
}
.nav li:hover > ul {
display: block;
}
http://codepen.io/trevoray/pen/KwJPLO
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
text-align:center
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav li > ul > li {
width:100%;display:inline-block
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
width:100%;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
position: relative;
width: 32%;
}
.nav li {
display:inline-block
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 100%;
z-index: 9999;
list-style:none;
text-align: left !important;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
width:100%;
box-sizing: border-box;
}
.nav li:hover > ul {
display: block;
}
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
try this :http://jsfiddle.net/au07b2r3/3/
i remove float left from li ..and set display : inline-block
So I am struggling to make a show/hide button within my navigation to work. My goal is do this purely with CSS. It is supposed to activate when the browser screen is too small to display all the navigation items. I am successful in hiding the items I do not want seen at certain screen widths, however I cannot seem to get the link which activates the :target to display them when clicked.
Here is the css
nav {width:100%; min-width:287px;}
nav ul {padding:0;}
nav li {
list-style: none;
width:26%;
min-width:67px;
display:block;
line-height: 2.5em;
position: relative;
float: left;
border-bottom: 1px solid #fff;
background-color:#333;
box-shadow: 0px 5px 5px 1px #333;
text-align:center;}
nav li a {color:#fff; text-decoration:none; height:100%; font-size:1em; display:block; white-space:nowrap;}
nav li:hover {background-color:#BA7007;}
nav li a:hover {color:#FFF;}
nav li a:visited {color:#FFF; background-color:#333;}
.prio-alpha {}
.prio-gamma,
.prio-beta,
.show-nav-less {display: none;}
#prio:target + .prio-beta,
#prio:target + .prio-gamma,
#prio:target + .show-nav-less {display: block; }
#prio:target + .show-nav-more { display: none; }
.show-nav-more {width:20%;}
#media screen and (min-width: 41em) {
nav li {width:20%;}
nav li a {font-size:1.4em;}
.prio-beta { display: block; }
#prio:target + .prio-gamma, #prio:target + .show-nav-less {display: block;}
#prio:target + .show-nav-more { display: none; }}
#media screen and (min-width: 65em) {
nav li {width:16.5%;}
.prio-gamma { display: block; }
.show-nav-more,
#prio:target + .show-nav-less { display: none; } }
and html:
<nav>
<ul>
<li class="prio-beta">Home</li>
<li class="prio-alpha">Research</li>
<li class="prio-alpha">Publications</li>
<li class="prio-gamma">Space Flies</li>
<li class="prio-gamma">Aging PPG Project</li>
<li class="prio-alpha">Contact</li>
<li class="show-nav-more">+ more</li>
<li class="show-nav-less">- less</li>
</ul>
I have tried to switch up the order, placing the class in front of the :target and even removing #prior and just using .class:target to no apparent difference in the function of the code when live.
From what I understand you just want it so that you don't need JS for a submenu to open on click?
Here's a very quick/dirty version, it should get the idea across and hopefully you can edit it for your needs
Quick and Dirty
#nav {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav #show_more {
display: none;
}
#nav li:target {
display: block !important;
position: relative;
top: 100%;
left: 10px;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul class="submenu">
<li id="show_more">
There is more stuff here, woo.
</li>
</ul>
</li>
</ul>
One that uses Hovers
This should give a bit more responsiveness when hovering over a menu item. I'm not sure what you are going for, but hopefully one of these helps.
#nav,
#nav > li {
list-style-type: none;
position: relative;
}
#nav li {
display: inline-block;
width: 100px;
border: 1px solid grey;
border-radius: 2px;
box-sizing: padding-box;
padding: 3px;
}
#nav li > ul {
display: none;
}
#nav li:hover >ul {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
display: block;
}
#nav li:hover >ul li {
display: block;
}
<ul id="nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>
More
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
I'm quite new with CSS so any help greatly appreciated. I'm currently using the Suckerfish script for my CSS menu, only because IE still exists. However, I can't get the second level menu to align directly under the first level -- not just IE, but Chrome and Safari as well.
I looked up solutions on this website, but I can't get them to work for my code...
Here's my CSS code (I'm sorry if it's messy):
#navbar {
width: 900px;
color: #a26868;
font-size: 10px;
padding: 10px 10px 10px 10px;
float: left;
background: #fff ;
}
#nav, #nav ul {
padding: 0px 15px 0px 15px;
margin: 0;
list-style: none;
line-height: 18px;
}
#nav a {
display: block;
width: 140px;
}
#navbar li {
list-style: none;
float: left;
padding: 0px 15px 0px 15px;
display: block;
width: 140px;
text-align: center;
height: 18px;
background-image: url(line-nav.gif);
background-repeat: no-repeat;
background-position: center;
text-decoration: none;
}
#navbar li a {
text-decoration: none;
color: #a26868;
}
#navbar li ul {
list-style: none;
color: #5e0505;
background-image: url(line-nav.gif);
background-repeat: no-repeat;
background-position: center;
background: rgba(255,255,255,0.8);
border-bottom: solid 1px #88c657;
width: 140px;
display: block;
position: relative;
left:-999em;
}
#navbar li:hover ul, #navbar li.sfhover ul {
left: 0;
}
And this is the HTML code:
<ul id="navbar">
<li>ABOUT<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>SHOWCASE<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>PORTFOLIO<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>MEDIA<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
<li>CONTACT<ul>
<li>SUBITEM ONE</li>
<li>SUBITEM TWO</li>
<li>SUBITEM THREE</li></ul>
</li>
</ul>
Please, any help greatly appreciated. Thank you so much!
try this one,
#navbar li:hover ul, #navbar li.sfhover ul {
left:-50px;
}
http://jsfiddle.net/Yt66E/
your sub menu ul has padding and li too so you need to remove these paddings like this:
edit this CSS:
#navbar li:hover ul, #navbar li.sfhover ul {
left: 0;
padding:0; /* added */
}
and add this CSS:
#navbar li li{
padding:0;
}
jsFiddle is here
alt text http://www.pwiser.com/error.pnghi i want to make unorder list based menu unable to figure it out i attached the image for better understanding please help below is my css and xhtml
#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}
#verticalSubmenu li { margin: 0 0 3px 0; background:#dedede; border: 1px solid #f7f7f7; color:#666666; height:auto;
}
#verticalSubmenu li.parent { background:#6c6b6b; color:#fcfafa; height:auto;
}
#verticalSubmenu a
{
display: block;
padding: 4px 2px 2px 10px;
width: 138px;
}
#verticalSubmenu li a:link, #navlist a:visited{
color: #666666;
text-decoration: none;
}
#verticalSubmenu li.parent a:link, #navlist a:visited
{
color: #fcfafa;
}
#verticalSubmenu ul ul {
position:relative;
height:0;
top:10px;
left:0;
}
#verticalSubmenu ul ul li{
background:#f9f9f9;
border:1px solid #f9f9f9;
}
#verticalSubmenu ul ul a{
padding: 4px 2px 2px 20px;
height:auto;
}
<div id="verticalSubmenu">
<ul id="navlist">
<li class="parent">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>
Item five
<ul>
<li> Item six</li>
<li> Item six</li>
<li> Item six</li>
<li> Item six</li>
</ul>
</li>
<li>Item four</li>
</ul>
</div>
It looks like the above example may be a 3 levels menu - which isn't much harder than the 2 level menu you already have once you get it working.
My suggestion is build the whole thing so you have one massive expanded menu, rather than only putting in the li's and ul's appropriate to whatever section they are currently in, then do something like this:
ul ul {
display: none;
}
ul li.lit ul {
display: block;
}
Then give whatever menu item they happen to be in (on the li) the class of .lit and it will only show that menu as open. It's much easier than generating a custom menu for each and every page.
I think your...
#verticalSubmenu ul ul {
position:relative;
height:0;
top:10px;
left:0;
}
Is the likely culprit. position: relative; will remove it from the page, thus positioning the LI below underneath it. Replace that whole rule with this:
#verticalSubmenu ul ul {
display: block;
}
above question resolved solution posting if any one need menu like this
<div id="verticalSubmenu">
<ul id="navlist">
<li class="parent">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>
Item five
<ul>
<li> Third Level</li>
<li> Third Level</li>
</ul>
</li>
<li>Item six</li>
<li>Item seven</li>
<li>Item eight</li>
<li class="parent">Item one</li>
<li class="parent">Item one</li>
<li class="parent">Item one</li>
</ul>
</div>
#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}
#verticalSubmenu li {
float:left;
margin: 0 0 3px 0;
color:#666666;
height:auto;
display:block;
}
#verticalSubmenu li a
{
display: block;
padding: 5px 2px 2px 10px;
width: 138px;
height:16px;
border: 1px solid #f7f7f7;
background:#dedede;
color:#6e6e6e;
text-decoration:none;
}
#verticalSubmenu li.parent a
{
background:#6c6b6b;
color:#fcfafa;
}
#verticalSubmenu ul ul{
margin-top:10px;
position:relative;
}
#verticalSubmenu ul ul li a{
display: block;
padding: 4px 2px 2px 20px;
width: 128px;
background:#f9f9f9;
}
i will make some improvement but basic structure is complete cheers :)