I am working on this code its a type of menu, which sticks to the bottom of the screen. i wanted drop up menu on hovering over various items. but my problem is the submenus are increasing towards downwards where they should be increasing upwards.... here is my code please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Dropdown menu
</title>
<style type="text/css">
body{
padding: 3em;
}
#menu ul {
font: 12px georgia;
list-style-type:none;
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background:#E3E4FA;
}
#menu ul li ul li {
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:#E3E4FA;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background:#E3E4FA;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
padding-bottom:13px;
}
#menu li{
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul{
display:none;
list-style-type:none;
padding-bottom:0px;
}
#menu:hover ul, #menu:hover ul li:hover ul{
display:block;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>
<a href="X">
Home
</a>
</center>
<ul>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Disclaimer
</a>
</li>
</ul>
</li>
<li>
<center>
<a href="#">
Practice Areas
</a>
</center>
<ul>
<li>
<a href="#">
Civil Law
</a>
</li>
<li>
<a href="#">
Criminal Law
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Family Law
</a>
<ul>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Updated : Demo
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
Related
I have tried to add drop-down options to my current fixed sidebar menu.
When I try adding new lists to add the extra menus, it just displays them below. When I hover over Three, I want Three One to be displayed to the right of Three and Three Two below Three One.
When I hover over Four, I want Four One" to be displayed to the right of Four and Four Two below Four One. With the same happening when I hover over Four One One
Below is my HTMl and CSS
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {
padding: 0;
}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
;
display: block;
}
span {
margin-right: 15px;
}
header ul li {
padding: 15px;
}
header ul li:hover {
background-color: #FA5858;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li>
<span class="far fa-newspaper"></span>One
</li>
<li>
<span class="far fa-list-alt"></span>Two
</li>
<li>
<span class="fas fa-user-secret"></span>Three
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Three One
</li>
<li>
<span class="fas fa-user-secret"></span>Three Two
</li>
</ul>
<li>
<span class="fas fa-shopping-basket"></span>Four
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Four One
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Four One One
</li>
<li>
<span class="fas fa-user-secret"></span>Four One Two
</li>
</ul>
<li>
<span class="fas fa-user-secret"></span>Four Two
</li>
</ul>
<li>
<span class="far fa-question-circle"></span>Five
</li>
</ul>
</div>
</header>
</body>
</html>
Try this and you have smile on your face :)
html
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li> <span class="far fa-newspaper"></span>One </li>
<li> <span class="far fa-list-alt"></span>Two </li>
<li> <span class="fas fa-user-secret"></span>Three
<ul>
<li> <span class="fas fa-user-secret"></span>Three One
<ul>
<li> <span class="fas fa-user-secret"></span>Three One One </li>
<li> <span class="fas fa-user-secret"></span>Three One Two </li>
</ul>
</li>
<li> <span class="fas fa-user-secret"></span>Three Two </li>
</ul>
</li>
</ul>
</div>
</header>
and improve css
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {padding: 0;}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
display: block;
position:relative;
}
span {
margin-right: 15px;
}
header ul li {
padding: 15px;
}
header ul li:hover {
background-color: #FA5858;
}
header ul li ul{display:none;}
header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
header ul li ul li a{color:#000; display:inline-block; width:100%;}
header ul li ul li{display:inline-block; width:100%; padding:0;}
header ul li ul li ul{display:none !important;}
header ul li ul li:hover ul{display:block !important;}
jsfiddle
Try this solution
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li> <span class="far fa-newspaper"></span>One </li>
<li> <span class="far fa-list-alt"></span>Two </li>
<li> <span class="fas fa-user-secret"></span>Three
<ul>
<li> <span class="fas fa-user-secret"></span>Three One </li>
<li> <span class="fas fa-user-secret"></span>Three Two </li>
</ul>
</li>
</ul>
and
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {
padding: 0;
}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
display: block;
position:relative;
}
span {margin-right: 15px;}
header ul li {padding: 15px;}
header ul li:hover {background-color: #FA5858;}
header ul li ul{display:none;}
header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
header ul li ul li a{color:#000; display:inline-block; width:100%;}
header ul li ul li{display:inline-block; width:100%; padding:0;}
jsfiddle
I have a hoverable drop down menu where sub links are supposed to be open to the right. This code has remained the same for couple of years now and it's been working. Now I added a new sub link and the code broke.
This is menu's code:
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
So I've added one more sub-link there and even if I remove it, the code won't work.
Screen cap: the sub links are shown all the time - not with hovering
You have missed the starting <ul> tag after <div id="divMenu"> . Adding <ul> after <div id="divMenu"> shall fix it for you.
#divMenu, ul, li, li li {
margin: 0;
padding: 0;
}
#divMenu {
width: 150px;
height: 27px;
}
#divMenu ul {
line-height: 50px;
}
#divMenu li {
list-style: none;
position: relative;
background: #cfcfcf;
font-size:20px;
}
#divMenu li li {
list-style: none;
position: relative;
background: #C0C0C0;
left: 148px;
top: -27px;
font-size:12px;
z-index: 999;
}
#divMenu ul li a {
width: 148px;
height: 40px;
display: block;
text-decoration: none;
text-align: center;
font-family: Georgia,'Times New Roman',serif;
color:#000000;
border:1px solid #2d2d2d;
}
#divMenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#divMenu ul li:hover ul {
visibility: visible;
}
#divMenu li:hover {
background-color: #C0C0C0;
}
#divMenu ul li:hover ul li a:hover {
background-color: #C0C0C0;
}
#divMenu a:hover {
font-weight: none;
}
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>Herrat
<ul>
<li><p style="font-size:10px;margin:0px"><a href="hermann.php">Macawi
Mosi Double E´s Xahir</a></p></li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li><a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a></li>
</ul>
</div>
you are just missing opening element ul at first. just change your html code to below :
<div id="divMenu">
<ul>
<li>Etusivu</li>
<li>Kissala</li>
<li>Maine Coon</li>
<li>
Herrat
<ul>
<li>
<p style="font-size:10px;margin:0px">
<a href="hermann.php">
Macawi
Mosi Double E´s Xahir
</a>
</p>
</li>
<li>Vuorensinen Baloo</li>
</ul>
</li>
<li>
Ladyt
<ul>
<li>Blackcurrant Sophia Loren</li>
<li>Bloomingtree QQ`Sweetest Taboo</li>
</ul>
</li>
<li>
Kastraatit
<ul>
<li>Artsycats Lucy In The Sky</li>
</ul>
</li>
<li>
Pennut
<ul>
<li>Varattavissa</li>
<li>Suunnitelmat</li>
<li>Pentuinfo</li>
</ul>
</li>
<li>
Pentueet
<ul>
<li>Vintage Star -pentue</li>
<li>Old West -pentue</li>
</ul>
</li>
<li>Linkit</li>
<li>Yhteystiedot</li>
<li>
<a href="http://users4.smartgb.com/g/g.php?a=s&i=g44-74607-
71">Vieraskirja</a>
</li>
</ul>
</div>
I am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}
* html .clearfix {
height: 1%;
overflow: visible;
}
* + html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
body {
margin: 0;
padding: 0;
}
.menu {
text-align: center;
background-color: #222;
}
.menu ul {
list-style: none;
height: auto;
padding: 40px;
width: 500px;
float: right;
}
.menu ul li {
float: left;
padding: 0 20px;
font-size: 20px;
font-family: Impact;
}
.menu ul ul {
display: none;
}
.menu ul li a {
color: white;
text-decoration: none;
transition: 350ms;
}
.menu ul li a:hover {
color: #ed702b
}
.title {
float: left;
font-size: 40px;
margin-left: -173px;
margin-top: 37px;
}
.title a {
text-decoration: none;
color: white;
}
.center {
width: 980px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="includes/site.css">
<title>Home</title>
</head>
<body>
<div class="menu">
<div class="center clearfix" style="height: 124px">
<h1 class="title">My first web</h1>
<ul class="clearfix">
<li>Home
</li>
<li>Our Collections
</li>
<ul>
<li>First Collection
</li>
<li>Second Collection
</li>
</ul>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
I got an old menu I made a long time ago.
I think you can work from this: Fiddle
Link 3 is the dropdown menu. Just look at the Fiddle
<div id="mainnav">
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</li>
<li>link4</li>
<li class="end">link5</li>
</ul>
</nav>
</div>
If you need more help just say so.
I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu
Link to the fiddle:
http://jsfiddle.net/Lgpapw2p/
<ul class='menu'>
<li>
Home
</li>
<li>
Our Collections
<ul>
<li>First Collection</li>
<li>Second Collection</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!
I have a CSS dropdown menu that works in most browsers, but not in some older versions of IE on XP. I wouldn't really care except many of my students still use this browser and therefore are limited in ability to use the site. On these older IE browsers, only the HOME link is displayed.
Here is the HTML followed by CSS. Can anyone figure out what is causing the problem?
Here are some Browser Stack screenshots: http://www.browserstack.com/screenshots/46848552eb08ea8bb0ca0b10c4843ed8cb6cfb3e
HTML
<div id="nav">
<ul id="menu">
<li class="medial">
HOME
</li>
<li class="medial">
ABOUT
</li>
<li class="medial">
PORTFOLIO
</li>
<li class="medial">COURSES
<ul class="sub-menu">
<li>
Low Intermediate Conversation
</li>
<li>
High Intermediate Conversation
</li>
<li>
ELT Practice
</li>
<li>
TESOL Practicum
</li>
<li>
Older Courses
</li>
</ul>
</li>
<li class="medial">STUDENT WORK
</li>
<li class="medial"><?php add_thickbox(); ?>
CALENDAR
</li>
<li>CONTACT
<ul class="sub-menu">
<li>
anthony.teacher#yahoo.com
</li>
<li>
<a class="smcf-link" href="http://www.anthonyteacher.com/email-me/">Contact Form</a>
</li>
</ul>
</li>
<li class="social"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Facebook.png" width="35px" alt="Facebook" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Twitter.png" width="35px" alt="Twitter" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Youtube.png" width="35px" alt="YouTube" /><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Linkedin.png" width="35px" alt="LinkedIn" />
</li>
</ul>
</div>
CSS
/* new menu */
#nav {
background-image:url('http://www.anthonyteacher.com/wp-content/themes/blank2L/menubar.jpg');
background-repeat:repeat-x;
font: bold 12px arial;
width:100%;
height: 29px;
}
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li.medial {
background: url('http://www.anthonyteacher.com/wp-content/themes/blank2L/orangeborder1.gif');
background-repeat:no-repeat;
background-position:right;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a {
text-decoration: none;
color: #fff;
padding: 5px;
display:inline-block;
margin-top: 2px;
margin-right: 5px;
margin-left: 5px;
}
ul#menu li a:hover {
background: #555555;
color: #fff
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
background-color: #fff;
border: 1px solid black;
position: absolute;
top: 28px;
margin-left: 10px;
margin-top: -10px;
width: auto;
padding: 5px;
}
ul#menu li ul.sub-menu li a {
color: #000;
font-weight:normal;
}
ul#menu li ul.sub-menu li a:hover {
color: #000;
font-weight:normal;
background-color: #ff0000;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li.social {
list-style: none;
float: right;
margin-top: 5px;
}
ul#menu li.social a {
margin: -11px -5px;
}
ul#menu li.social a:hover {
background: none;
}
Consider using something like selectivizr.com.
As #jeff has pointed out, early IE builds do not natively support :hover on anything other than <a>. Assuming your students have javascript turned on (unless they really are in the dark ages) Selectivizr should fix your problem without needing to change anything.