In the following example - Is it possible to retain the border on the top level navigation when hovering on the sub elements? I would like to retain the black border on 'About Us' when hovering on its sub items. Example: http://jsfiddle.net/6zKRC/2/
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li a:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
}
.navigation li:hover li {
float: none;
font-size: 11px;
}
.navigation li:hover a {
background: #CCC;
}
.navigation li:hover li a:hover {
background: #CCC;
border:0;
}
Hi i have made some changes in your css please check your updated css :-
CSS
.navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul li {
display: block;
position: relative;
float: left;
}
.navigation li ul {
display: none;
}
.navigation ul li a {
display: block;
text-decoration: none;
color: #000;
font-weight:bold;
padding: 5px 15px 5px 15px;
white-space: nowrap;
}
.navigation ul li:hover {
background: #CCC;
color:black;
border:solid 1px black;
border-bottom:0;
}
.navigation li:hover ul {
display: block;
position: absolute;
border:solid 1px black;
border-top:0;
left:-1px;
}
.navigation li:hover ul li {
float: none;
font-size: 11px;
background: #CCC;
}
.navigation li:hover li:hover {
background:#e6e6e6;
border:0;
}
HTML
<div class="navigation">
<ul class="navigation fc">
<li>
Home
</li>
<li class="">
About
<ul>
<li>
Sub Navigation 1
</li>
<li>
Sub Navigation 2
</li>
</ul>
</li>
</ul>
</div>
I hope you looking this one:- http://jsbin.com/uwemuy/5/edit
change in css as follow
.navigation li:hover a {
background: #CCC;
border:solid 1px black;
}
see http://jsfiddle.net/6zKRC/2/
Related
This should be vertical menu with 2nd level sub menu as you can see 2 2.1 2.2
I tried many tutorials but just couldn't make it work i know lot of code for sub-menu is missing but honestly i have no idea what to do with it to fix it .
.menu ul li a {
margin: 2px;
padding: 2px;
font-family: comic sans ms;
border-bottom: 1px solid #ccc;
height: 25px;
width: 160px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border-color: red;
cursor: pointer;
cursor: url(link.cur), auto;
text-decoration: none;
color: white;
padding: 9px 11px;
background-color: grey;
display: block;
}
.menu ul li a:visited {
color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
color: white;
background-color: #0099CC;
/* green #5FD367 */
}
.menu ul li ul {
position: absolute;
display: none;
}
.menu ul li:hover ul {
left: 150px;
top: 0px;
display: block;
}
.menu ul li ul li a {
color: #454444;
display: inline-block;
width: 120px;
}
<div class="menu">
<ul>
<li>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>
Here you go.. why did you use absolute to .menu ul li ul this code was causing problem !!
.menu ul li a {
margin: 2px;
padding: 2px;
font-family: comic sans ms;
border-bottom: 1px solid #ccc;
height: 25px;
width: 160px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
border-color: red;
cursor: pointer;
cursor: url(link.cur), auto;
text-decoration: none;
color: white;
padding: 9px 11px;
background-color: grey;
display: block;
}
.menu ul li a:visited {
color: white;
}
.menu ul li a:hover,
.menu_simple ul li .current {
color: white;
background-color: #0099CC;
/* green #5FD367 */
}
.menu ul li ul {
display: none;
}
.menu ul li:hover ul {
left: 150px;
top: 0px;
display: block;
}
.menu ul li ul li a {
color: #454444;
display: inline-block;
width: 120px;
}
<div class="menu">
<ul>
<li>1
</li>
<li>2
<ul>
<li>2.1
</li>
<li>2.2
</li>
</ul>
<li>3
</li>
<li>4
</li>
</ul>
</div>
I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
Q:
How to make them equal (same width as parent) and no text wrap ?
How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu
Thank you in advance.
Try this - this works great on Chrome:
* { white-space: nowrap; box-sizing: border-box; }
.menu {
margin: 100px auto;
text-align: center;
}
/* ULs */
.menu ul {
padding: 0;
position: absolute;
display: none;
background: green;
top: 0;
position: absolute;
list-style: none;
}
.menu > ul {
background: #efefef;
position: relative;
display: inline-table;
}
.menu > ul > li > ul {
top: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
left: 100%;
border-left: 1px solid white;
top: -1px;
}
/*LIs*/
.menu li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu > ul > li {
float: left !important;
border: none;
}
.menu ul li:hover {
background: blue;
}
/* As */
.menu a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu li:hover a {
color: #fff;
}
.menu ul ul a:hover {
background: red;
}
Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.
I've created a css menu and submenu using style sheet.
the code and style sheet is as follows
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#navdiv
{
border: 1px solid black;
text-align:center;
background:#FF0000;
border-radius: 10px;
width: 50%;
margin: 10px;
}
nav ul ul
{
display:none;
width:auto;
}
nav ul li:hover >ul
{
display:block;
}
nav ul
{
background: #ff0000;
padding: 0px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform:uppercase;
}
nav ul li
{
float:left;
background: #ff0000;
border: 0px solid black;
}
nav ul li:hover
{
background: #DDDDDD;
}
nav ul li a
{
display:block;
padding: 10px 25px;
text-decoration: none;
color:#FFFFFF;
}
nav ul li:hover a
{
color:#000000;
}
nav ul ul
{
background: #ff0000;
position: absolute; top: 100%;
}
nav ul ul li
{
float: none;
border: 1px solid #000000;
position: relative;
color:#FFFFFF;
}
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
nav ul ul li a:hover
{
background: #000000;
color:#FFFFFF;
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
</style>
<div id="navdiv">
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
</div>
I want to change the color of submenu (i.e Photoshop, illustrator, web design in my example)
I'm able to change the background color using
css
nav ul ul li a
{
background-color: #FFFFFF;
color: #FFFFFF;
}
But i'm not getting why the font color is not getting change?
Please help me with the problem
try to Add a:visited instead of just a to the CSS selector.
nav ul ul li a, nav ul ul li a:visited
Just add a:visited instead of anchor tag
eg:nav ul ul li a, nav ul ul li a:visited
The easiest way to get this is as below:
nav ul ul ul li,
nav ul ul li
{
background-color: #FFFFFF;
color: #FFFFFF;
}
Try this it will resolve your issue, please share I can help you with more options.
I am using the CSS :before pseudo-selector to create a block above the first item in a drop down list. I've been having trouble getting this block created with the pseudo-selector to be the same width as the <li> above it.
For example when you hover over "About" the pseudo block that appears beneath it should be the same width as the block that contains the word "About" and so on for the other 3 blocks.
Here's a fiddle to what I have got so far: http://jsfiddle.net/jh67P/
Here's my HTML:
<nav>
<ul class="main">
<li>About
<ul class="secondary">
<li>Learn About Us</li>
<li>Nice things to know</li>
</ul>
</li>
<li>Products
<ul class="secondary">
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Features
<ul class="secondary">
<li>Something Nice</li>
<li>Another nice thing</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main li:hover ul:before {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
}
Edit: Using absolute positioning I was able to achieve the effect. Here's the updated CSS.
nav .main {
font-size: 1em;
margin: 0;
padding: 0;
list-style: none;
}
.main > li {
display: block;
position: relative;
float: left;
}
.main > li a {
display: block;
text-decoration: none;
color:#FFF;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
.main > li a:hover {
background: #3b3b3b;
color:#FFF;
}
.secondary {
display:none;
list-style: none;
margin: 0;
padding: 0;
}
.main li:hover .secondary {
display: block;
position: absolute;
top:40px;
}
.main li:hover ul li {
float: none;
font-size: 1em;
}
.main > li:hover a { background: #3b3b3b; }
.main > li:hover li a:hover {
background: #1e7c9a;
}
.main > li:hover:after {
content:'';
display:block;
width:100%;
height:10px;
border-bottom:10px solid #1e7c9a;
border-right: 10px solid transparent;
position:absolute;
top:20px;
margin-left:1px;
}
How about changing:
.main li:hover ul:before {
To:
.main > li:hover > a:after {
Is that what you are after?
jsFiddle
I have tried moving the position:relative; setting around, but to my understanding it is where it is supposed to be... Please correct me, because my understanding is clearly wrong!
<ul id="menu">
<li>All Products
<ul>
<li>Stock Lanyards</li>
<li>Screen Printed Lanyards</li>
<li>Full Color Lanyards</li>
<li>Custom Cord Lanyards</li>
<li>Specialty Lanyards</li>
</ul>
</li>
<li>Reorders</li>
<li>Resources
<ul>
<li>FAQ</li>
<li>Art Requirements</li>
<li>Production Times</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Request A Sample</li>
</ul>
</li>
<li>Blog</li>
</ul>
css....
ul#menu {
margin:0px;
padding-top:20px;
position:absolute;
right:0px;
font-weight:bold;
font-size:14px;
}
ul#menu li {
display:inline;
padding-left:8px;
}
ul#menu a{
color:#8ba693;
text-decoration:none;
padding:5px;
}
ul#menu a:hover, a:active{
/* text-shadow: 0 0 0.9em #ccc;
text-decoration:underline; */
background-color:#000;
}
/* -- DROPDOWN MENU STYLES -- */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
position: relative;
left:0;
top:100%;
}
#menu li ul { display: none;
position: absolute;
z-index:1000;
margin:5px 0 0 0px;
top:100%;
left:0;
}
#menu ul li a {
display: block;
text-decoration: none;
padding: 7px 15px 6px 10px;
margin: 0px 0 0 0;
white-space: nowrap;
border-top: 1px solid #8ba693;
border-left: 1px solid #8ba693;
border-right: 1px solid #8ba693;
}
#menu ul li a:hover { background: #000; }
#menu li:hover > ul {
display: block;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #fff; }
#menu li:hover li a:hover { background: #8ba693; color: #fff; }
ul#menu li {
display: inline;
padding-left: 8px;
position: relative;
}
http://jsfiddle.net/HFp6K/2/
position:relative needs to be in position:absolute's parent.