I am trying to create a sub menu that floats out to the right. However, I have hit a brick wall and can only get it to float inline.
http://jsfiddle.net/jspring/yD9N4/
You can see here (although it is a bit wider than normal) that the sub menu just displays inside the parent list item. If someone could help me to get it floating out to the right that would be great!
<ul class="cl-menu">
<li>Link 1
<ul>
<li>Sub Link 1
</li>
<li>Sub Link 2
</li>
</ul>
</li>
<li>Link 2
<ul>
<li>Sub Link 1
</li>
<li>Sub Link 2
</li>
</ul>
</li>
</ul>
.cl-menu{
list-style:none outside none;
display:inline-table;
position:relative;
width:100%;
}
.cl-menu li{
list-style:none outside none;
border-bottom:1px solid #cccccc;
padding:5px 1px;
text-align:center;
}
.cl-menu > li:hover{
/*background-color:#303030;*/
background-color:#66819C;
color:#FFF;
font-weight:bold;
text-decoration:underline;
opacity:1;
}
.cl-menu li ul{
display:none;
}
.cl-menu li:hover ul{
display:block;
opacity:0.8;
background-color:#FFF;
margin-top:4px;
font-weight:normal !important;
}
.cl-menu li ul li{
border-bottom:1px solid #cccccc !important;
border-top:none !important;
border-left:none !important;
border-right:none !important;
}
.cl-menu li ul li a{
color:#000;
text-decoration:none;
}
.cl-menu li ul li a:hover{
color:#390;
text-decoration:underline;
}
.cl-menu ul:after{
content:"";
clear:both;
display:block;
}
Use position:absolute property for submenu. Use right css property for positioning the submenu properly.
.cl-menu li ul
{
display:none;
position:absolute;
right:20%;
}
Related
Background color (red) misses out after I am hovering drop down items.
What should I do to keep the background color of the menu item I am in?
<style>
nav ul
{
list-style-type:none;
padding:0px;
text-align:center;
background-color:grey;
}
nav ul li
{
display:inline-block;
}
nav ul a
{
display:block;
padding:20px;
padding-left:50px;
padding-right:50px;
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:arial;
font-size:20px;
}
nav ul a:hover
{
background:red;
}
nav ul ul {
display: none;
}
nav ul li:hover ul{
display:block;
position:absolute;
}
nav ul ul li
{
display:block;
border-bottom:solid 1px black;
}
</style>
</head>
<body>
<nav>
<ul>
<li>one</li>
<li>two
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design</li>
</ul>
</li>
<li>three
<ul>
<li>ay</li>
<li>bee</li>
</ul>
</li>
<li>four</li>
</ul>
</nav>
</body>
This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.
Change:
nav ul a:hover {
background:red;
}
To:
nav ul li:hover {
background:red;
}
Demo Fiddle
I have been working all night - just to fix a submenu. Here is my CSS:
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif
}
#navigation ul {
margin:0;
padding:0
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block
}
#navigation li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff
}
#navigation li a:hover {
text-decoration:underline;
background-color:#06C
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-style:none
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3
}
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="submenu.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="navigation">
<ul>
<li>
News
<ul>
<li>
National
</li>
<li>
International
</li>
<li>
Sport
</li>
<li>
Hollybood
</li>
</ul>
</li>
<li>
Technology
<ul>
<li>
IT/Software
</li>
<li>
Hardware
</li>
<li>
Iphone
</li>
<li>
Neuro Science
</li>
</ul>
</li>
<li>
Sports
<ul>
<li>
Cricket
</li>
<li>
Tenis
</li>
<li>
Badminton
</li>
<li>
Hockey
</li>
</ul>
</li>
<li>
Country
<ul>
<li>
India
</li>
<li>
America
</li>
<li>
France
</li>
<li>
Pakistaan
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1st problem: My Submenu block doesn't show properly. If the menu contain with more than one word, the next word go to the next line. How can I make it inline? Refer to this image: http://i.stack.imgur.com/9SqWf.jpg
2nd Problem: When I hover to the submenu, how can I make them standardized? Please refer to this image: http://i.stack.imgur.com/DULg6.jpg
One of it left empty space on the right - it suppose to show full blue background, following the longest menu.
Can somebody help me to explain and solve this issue? I just want to make them tidy.
There are some problems in the code.
1. You mentioned the element as position: absolute, but you didn't mention the perfect width for them.
2. Selector defining was the main problem in the code.
3. Padding Measurement
You can copy the whole css & Most Importantly Use Indentation Always
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif;
}
#navigation ul {
margin:0;
padding:0;
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block;
}
#navigation>ul>li>a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff;
}
#navigation li a:hover {
text-decoration:underline;
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute;
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3;
width: 250px;
}
#navigation li ul li{
position: relative;
min-width: 100%;
padding: 5px 0px 5px 0px;
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding: 5px 0px 5px 0px;
border-style:none;
display: inline-block;
min-width: 100%;
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3;
background-color:#06C;
}
Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
When a user hovers over my horizontal menu, how can I keep the sub-menu open until another menu item is hovered over? Here is the source code:
HTML
<ul id="nav">
<li>Home</li>
<li>my Links
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
</ul>
CSS
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
If this is not possible with CSS, how can it be done with jQuery? Thanks.
Based on your updated question, modified answer below.
You'll need to add a small amount of JS as mentioned in my comment, please see here for demo
JSFiddle (updated)
Updated HTML:
<ul id="nav">
<li>Home</li>
<li><a id="hover1" href="#">my Links</a>
<ul id="visible1">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li><a id="hover2" href="#">Our Links</a>
<ul id="visible2">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
</ul>
Updated CSS:
#nav {
width:100%;
margin:0;
padding:12px 0 4px 0;
height:30px;
position:relative;
}
#nav li {
float:left;
list-style:none;
display:inline
}
#nav a {
text-decoration:none;
}
#nav li ul li a {
margin:0
}
#nav .active a, #nav li:hover>a {
background:#ac2024;
color:#fff;
}
#nav li a:hover, #nav ul a:hover {
background:#ac2024;
color:#fff
}
#nav ul {
position:absolute;
left:0;
height:27px;
width:100%;
display:none;
}
#nav li:hover>ul {
display: inline;
}
#nav ul a {
width:100%
}
#nav:after {
content:".";
display:inline;
clear:both;
visibility:hidden;
height:0
}
#nav {
display:inline-block
}
.result_hover {
display:block !important;
}
Updated JQuery:
$("#hover1").hover(
function () {
$("#visible1").addClass("result_hover");
$("#visible2").removeClass("result_hover");
}
);
$("#hover2").hover(
function () {
$("#visible2").addClass("result_hover");
$("#visible1").removeClass("result_hover");
}
);
I don't think you could achieve that only with CSS.
The solution that I thing about from the top of my head is to add class 'hover-class' to the li item via jQuery, and while hovering on new menu item adding 'hover-class' to the new item and removing it from the old one. You should keep track in JS what's the last item that has been hovered and manipulat view based on this data.
But maybe someone will suprise me and give solution only in CSS :) Hope it helps.
I have made a drop down menu for a website I'm creating, it looks nice I think, though there is this one px space between the horizontal nav bar and the vertical drop down bars. When you hover your mouse on the space the vertical menu disappears again and since you sometimes put your mouse on the one px space it's very confusing for the users.
This is my html;
<div class="nav">
<div class="links">
<ul id="dropdown">
<li class="currentpage">
Tetterode
<ul>
<li>Project</li>
<li>Promenade</li>
<li>Brochure</li>
<li>Impressies</li>
</ul>
</li>
<li>
Woningen
<ul>
<li>Oplevering</li>
<li>Impressies</li>
<li>Kavelkaart</li>
</ul>
</li>
<li>
Locatie
<ul>
<li>Ligging</li>
<li>Routplanner</li>
<li>Situatie</li>
</ul>
</li>
<li>
Financiering
<ul>
<li>Hypotheken</li>
<li>Fiscale mogelijkheden</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Makelaars</li>
<li>Gegevens</li>
</ul>
</li>
</ul>
</div>
</div>
And this is my css;
.nav{
width: 100%;
height:50px;
background-image:url("bg.jpg");
background-repeat:repeat;
text-align:center;
padding-bottom:0px;
margin-bottom:0px;
}
.links ul li {
list-style-type: none;
padding-right: 17px;
height:50px;
position:relative;
display:inline-block;
padding-top:0px;
line-height:50px;
padding-left:17px;
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
margin-top:0px;
}
.links ul li:hover {
height:50px;
background-color:#b2071a;
display:inline-block;
margin:0px;
}
.links a {
text-transform:uppercase;
font-family:helvetica;
font-size:18px;
color:#fff;
display:inline-block;
font-size:20px;
text-decoration:none;
}
.links a:hover {
background-color:transparent;
}
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:0px;
}
#dropdown ul li{
float:none;
}
#dropdown ul a{
white-space:nowrap;
font-size:16px;
}
#dropdown li:hover ul{
left:0;
}
#dropdown li:hover a{
text-decoration:underline;
}
#dropdown li:hover ul a{
text-decoration:none;
}
#dropdown li:hover ul li a:hover{
color:#000;
}
.currentpage{
height:50px;
background-color:#b2071a;
display:inline-block;
}
I don't see any margin/padding that causes the 1 px space and I don't know how to solve this. I hope someone can help me, thank you.
Your code and style sheet are pretty good, easy to read and follow.
A solution is to tweak the top margin of #dropdown ul to -2px as follows:
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:-2px;
}
Negative margins are allowed and can be quite useful. The problem you encountered is quite common in pull-down menus and this fix is a typical one.
For reference, see the fiddle: http://jsfiddle.net/audetwebdesign/Ygn6X/