I need your help.
My sub sub menu appears to overlap the sub menu which is fine, but i'd like to push it out to the right just a few more so as to allow the sub menu text not be cut off.
Here is picture of what is happening:
Here is my HTML and CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>List of Frequently Used Templates for Road Safety</title>
<style type="text/css">
#navigation {
width: 150px;
font-size: 0.75em;
}
#navigation ul {
margin: 0px;
padding: 0px;
}
ul.top-level {
background: #666;
}
#navigation li {
list-style: none;
}
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
}
#navigation li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#navigation .sub-level {
background: #999;
}
#navigation .sub-level .sub-level {
background: #09C;
}
li:hover .sub-level .sub-level {
display:none;
}
.sub-level li:hover .sub-level {
display:block;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>
Sub Menu Item 2
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>
FAQ
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>
Sub Menu Item 3
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
</ul>
</li>
<li>
News
<ul class="sub-level">
<li>Sub Menu Item 1
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Adjust your code to match the below. Working sample: http://codepen.io/BJack/full/Cflem
The width of your < li >'s are 150px, so offset the left property by 150px when positioned absolutely.
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 150px;
top: 0px;
}
.sub-level li:hover .sub-level {
display:block;
position: absolute;
left: 150px;
}
You can try to add this
li:hover .sub-level li:hover .sub-level {
left: 175px;
}
Related
I'm making a wordpress theme and I have some problems with the menu codification. My menu has sub-menus but they are displaying in the wrong way, And I don't know what to do to make them look like a Drop-Down menu. Here's the link to my site.
Would you mind giving me a CSS code (only) for a really simple dropdown menu? In my website, the menu with sub-categories is 'TV Shows' and the Subcategories are 'Pretty Little Liars', 'Resurrection', and 'Chasing Life'. I need a CSS to make them drop-down from 'Tv Shows'.
This is my CSS Code for the links
#menu {
height:55px;
background-color: #000;
width:100%;
top:0px;
left:0px;
z-index:101;
text-align:center;
text-transform:uppercase;
position:relative;
}
.menulinks {
float:right;
}
#menucontainer {
margin: 0 auto;
width:900px;
font-family: 'Open Sans', sans-serif;
}
#menucontainer a {
color:#fff;
}
#menucontainer a:hover {
color:#fff;
}
#menucontainer ul {
list-style: none;
padding:7px;
color:#A4A4A4;
}
#menucontainer ul a {
color:#848484;
}
#menucontainer li a {
color:#848484;
}
#menucontainer li {
display: inline;
margin-right:3px;
margin-left:3px;
padding:3px;
color:#848484;
}
Try This. fiddle here
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: 1px solid;
}
ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #262222;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #262222;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #a1a1a1;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2
<ul>
<li>Sub Menu</li>
<li>Another Sub Menu</li>
<li>And Anthor Sub Menu</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
The answer is more than just CSS. You have to make sure the HTMl is built to accept both. You have to have a ul tag within a ul tag to cause the secondary drop down.
Here is a codepen link for exactly what your looking for I think:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
Good luck!
I have an ugly website with a vertical navigation bar. http://jsfiddle.net/ZuC2W/ Please help me edit the code so the nav bar looks like on this website: http://cssmenumaker.com/menu/slabbed-accordion-menu I mean, submenus appear under the buttons so the whole menu is one-lined and set in that red rectangle.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="window">
<nav id="nav_wrap">
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li> FAQ
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>Sub Menu Item 3
</li>
</ul>
</li>
<li> News
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
CSS:
html, body {
background:#78C2A9;
margin: 0 0 0 0;
}
#window {
height:630px;
width: 1200px;
margin: 20px auto 0 auto;
padding: 0;
background: orange;
}
#nav_wrap {
width: 150px;
height: 630px;
margin: 0;
position: absolute;
background-color: #E95644;
}
#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level { background:#666; }
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{ text-decoration:underline; }
#navigation li:hover {
background: #f90;
position: relative;
}
ul.sub-level { display: none; }
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
A quick way would be to remove some CSS from your existing code. The last declaration and all references to position: absolute, in this instance.
DEMO http://jsfiddle.net/ZuC2W/1/
I am a dropdown menu noob, and I can't seem to figure out how to keep my dropdown menu from blowing out and moving the main buttons. I'm sure its some kind of positioning adjustment, but I can't figure out where and what it is. Here is the jfiddle link: http://jsfiddle.net/F4WvT/
Here is the html:
<div id="global-nav">
<ul>
<li>HOME
</li>
<li>ABOUT
<div id="global-subnav">
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
<li>Sub Category 4</li>
<li>Sub Category 5</li>
<li>Sub Category 6</li> </ul>
</div>
</li>
<li>CONTENT
<div id="global-subnav">
<ul>
<li>Sub Category 1</li>
<li>Sub Category 2</li>
<li>Sub Category 3</li>
<li>Sub Category 4</li>
<li>Sub Category 5</li>
<li>Sub Category 6</li> </ul>
</div>
</li>
<li>CONTACT
</li>
</ul>
</div>
And the CSS:
<style type="text/css">
#global-nav {
width: 180px;
height: 40px;
background-image: none;
float: left;
position: static;
margin-left:0px;
}
#global-nav a {
color:#000;
font-size:12px;
cursor:pointer;
display:block;
width: 200px;
height: 40px;
text-align:center;
vertical-align: central;
text-decoration:none;
font-weight:bold;
}
#global-nav ul {
background: whitesmoke;
padding: 0;
margin: 0;
}
#global-subnav ul{
background: #D3171A;
position: relative;
width: 250px;
text-align:center;
left: 180px;
top: -55px;
}
#global-nav li {
list-style: none;
border-bottom: none;
border-width: 0px;
}
#global-nav ul ul li {
display:none;
}
#global-nav li:hover {
background: none;
}
#global-nav li:hover ul li {
display:block;
}
</style>
How do I get this my main nav buttons to stay still? Good karma for quick advice!
#global-subnav ul {
background: #D3171A;
position: relative;
width: 250px;
text-align: center;
left: 0px;
top: 0;
}
You need to make your sub navigation positioned absolute to it's relative parent, which in your case has to be the <li> element. Setting a top: 0 of your sub navigation element, will position it at the top of its parent, which is exactly what you want.
Edited example of your code: this JSFiddle
I need your help.
How can the CSS markup below be modified such that the color white is present thoughout the users selection? As it is now, when a section has been hovered, the text remains blue except for the last part selected. Notice that the blue color is not white throughout the user's selection.
See a picture below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#navigation {
width: 150px;
font-size: 0.75em;
}
#navigation ul {
margin: 0px;
padding: 0px;
}
ul.top-level {
background: rgb(238,238,238);
}
#navigation li {
list-style: none;
}
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: rgb(41,83,118);
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
color: #fff;
}
#navigation li:hover {
background: rgb(85,85,85);
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 150px;
top: 0px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#navigation .sub-level {
background: rgb(238,238,238);
}
#navigation .sub-level .sub-level {
background: rgb(238,238,238);
}
li:hover .sub-level .sub-level {
display:none;
}
.sub-level li:hover .sub-level {
display:block;
position: absolute;
left: 150px;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>
Sub Menu Item 2
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>FAQ
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>
Sub Menu Item 3
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
</ul>
</li>
<li>
News
<ul class="sub-level">
<li>Sub Menu Item 1
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Change #navigation a:hover to #navigation li:hover > a. The <a> is not parents of the sublist. You will remain hovered over the list while hovered over the sublist. The child selector (>) is necessary or else all a descendants will be white in the sublists which is undesirable.
http://jsfiddle.net/nvEza/
Add the following at the end of your css: (Working jsFiddle)
#navigation li:hover > a{ /* Thanks #ExplosionPills */
color:white;
}
I have seen it where the anchor wraps the entire sub-menu, like so:
<a href="#">
News
<ul class="sub-level">
...
</ul>
</a>
This way, when you are hovering over a sub-menu, the parent anchor is still active, as well.
Use the hover on the parent to set the child colors in that state.
#navigation .top-level:hover li a{color:#fff;}
I did my research and was able to replicate what I'm looking for, well kind of--I just need help with a more specific vertical, pure CSS, menu.
I want my sub-menu popup to appear 10px to the left of the a not the li attribute like most example found on the internet. I'm also looking for the most simple, pure CSS, type of menu--Nothing fancy.
Here's what I've done so far:
<div id="nav">
<ul class="top-level">
<li>This is a long text
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact me here</li>
<li>Help
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
my css:
#nav {border:1px solid cyan;}
/* top level menu */
#nav ul.top-level {border:1px solid red;}
#nav ul.top-level li {position:relative;}
/* sub level menu */
#nav ul.sub-level {border:1px solid yellow;}
#nav ul.sub-level {display:none;} /* hide */
/* hover the sub menu*/
#nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}
How do I make it so the sub level menu pops up when I hover the a HTML anchor, not the li, and 10px to the left of the clicked a anchor?
Thanks.
Try this one and I think it will help
HTML
<div id="nav">
<ul class="top-level">
<li>This is a long text
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact me here</li>
<li>Help
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
CSS
#nav {font-size:0.75em; width:150px;}
#nav ul {margin:0px; padding:0px;}
#nav li {list-style: none;}
ul.top-level {background:#FFFFFF;}
ul.top-level li {
border: #FF0000 solid;
border-width: 1px;
}
#nav ul.sub-level {border:1px solid yellow;}
#nav a {
color: #000000;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#nav a:hover{
text-decoration:underline;
}
#nav li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#nav .sub-level {
background: #FFFFFF;
}