The following code generates a menu to the right of the page, I need that menu to be in a specific position from the bottom-right side of the page.
<html>
<head>
<title>Dropdown menu</title>
<style type="text/css">
body {
padding: 3em;
}
#menu * {
font: 10px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu {
float: right;
line-height: 5px;
margin-top: 585px;
}
#menu a {
color: #ffffff;
display: block;
text-decoration: none;
}
#menu a:hover {
background: #7A7A7A;
}
#menu ul li ul li a:hover {
background: #AAA7A7;
border-left: solid 1px #000;
padding-left: 9px;
}
#menu ul li ul li {
background: #7A7A7A;
border: none;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
width: 120px;
}
#menu ul li ul li a {
font: 11px arial;
font-variant: small-caps;
font-weight: normal;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
}
#menu ul li {
background: #383838;
font: 14px arial;
font-weight: bold;
width: 126px;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
float: left;
position: relative;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 120px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
border-bottom: transparent;
font: 10px;
margin-left: 145px;
margin-top: -22px;
position: absolute;
}
#menu:hover ul li:hover ul {
border-bottom: transparent;
bottom: 100%;
font: 10px;
margin-top: 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>ARCHITECTURE</center>
<ul>
<li>RESIDENTIAL</li>
<li>COMMERCIAL</li>
</ul>
</li>
<li>
<center>INTERIORS</center>
</li>
<li>
<center>FURNITURE</center>
<ul>
<li>SEATING</li>
<li>TABLES</li>
<li>CABINETS</li>
</ul>
</li>
<li>
<center>ABOUT</center>
</li>
<li>
<center>CONTACT</center>
</li>
</ul>
</div>
</body>
</html>
You can view it in action here: JSFiddle
In order to specify the position from the bottom right corner, you should use an absolute positioning :
#menu {
position: absolute;
bottom: 10px;
right: 10px;
}
Demo
Related
I've basically copy/pasted the code from Drop-down menu that opens up/upward with pure css
body {
padding: 3em;
}
#menu>li:hover ul {
display: block;
}
#menu * {
padding: 0;
margin: 0;
font: 12px georgia;
list-style-type: none;
}
#menu {
float: center;
text-align: center;
line-height: 10px;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background: #B0BD97;
}
#menu ul {}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left: 9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index: 1;
}
#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;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position: relative;
float: left;
}
#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 140px;
bottom: 0;
}
#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#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
}
<iframe style="width:100%">padding</iframe>
<div id="menu" style="text-align:center; float: center; width: 100%">
<ul>
<li>
<center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
No matter what I do, I cannot align the menu to sit in the center of the web page.
Your help would be highly appreciated.
Thanks in advance.
Like this? I added the following css:
#menu {
position: absolute;
left: 50%;
transform:translate(-50%, 0);
}
body {
padding: 3em;
}
#menu {
position: absolute;
left: 50%;
transform:translate(-50%, 0);
}
#menu>li:hover ul {
display: block;
}
#menu * {
padding: 0;
margin: 0;
font: 12px georgia;
list-style-type: none;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background: #B0BD97;
}
#menu ul {}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left: 9px;
border-left: solid 1px #000;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index: 1;
}
#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;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
}
#menu li {
position: relative;
float: left;
}
#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
display: none;
list-style-type: none;
width: 140px;
bottom: 0;
}
#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
display: block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
#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
}
<iframe style="width:100%">padding</iframe>
<div id="menu">
<ul>
<li>
<center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
You can horizontally center #menu by following CSS rules:
define #menu's display as inline-block
Add a container div outside of #menu and make its text-align as center.
I've made a fiddle for your code, please check.
Update your HTML code as below.
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel = "stylesheet" type = "text/css" href = "menu.css"/>
<title>Frames Test</title>
</head>
<body>
<iframe style="width:100%">padding</iframe>
<div class="container" style="text-align:center">
<div id="menu" style="text-align:center; float: center;display:inline-block">
<ul>
<li><center>item1</center>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
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 #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
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 #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
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 #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
I have a drop down menu I'm building for my HTML5 site and I've got the coding correct (or so I think) and the drop down is not appearing just the top level elements.
I have scanned through the Code and as far as I'm aware, the code seems ok. I place the code below and see if you can spot the error:
<navigation id="NavigationLink" style="" class="navigationStyle">
<section class="menu">
<ul>
<li><a class="left_nosub" href="default.html">Home</a></li>
<li><a class="center_hassub" href="products.html">Products</a>
<ul>
<li>Graphic Design</li>
<li>Web Design</li>
<li>Content Management Systems</li>
<li>Social Media Design</li>
</ul>
</li>
<li><a class="center_hassub" href="#">News</a>
<ul>
<li>Current Projects</li>
<li>Day-To-Day-Stuff</li>
</ul>
</li>
<li><a class="right_nosub" href="#">Contact Us</a></li>
</ul>
</section>
.menu {
font-family: Arial, Helvetica, sans-serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 80px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url(images/center.png);
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image: url(images/left.png);
padding-left: 1px;
margin-right: -1px;}
.menu .right_nosub {
background-image: url(images/right.png);
}
.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #000;
background: url(images/center_hassub.png);
}
.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover .left_nosub {
color: #000;
background: url(images/left_nosub.png);
}
.menu ul li:hover .right_hassub {
color:#000;
background: url(images/right_hassub.png);
}
.menu ul li:hover .right_nosub {
color: #000;
background: url(images/right_nosub.png);
}
.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal;
}
.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
}
.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url(images/sub_hover.png);
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left {
left: -105px;
}
.menu ul li:hover ul .sub_active {
background-image: url(images/sub_active.png);
margin-right: 1px;
}
Change the following class
.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
display:block;
}
My Current Menu navigation bar in html: -
You can see my blog Live by click this Link :- www.4time2fun.com
<div id="topmenu">
<div id="navigation">
<ul class="categories">
<li class="articles"> <img src="http://4.bp.blogspot.com/-9vOA-2QWrsA/UF7oc4Cgn5I/AAAAAAAAE1k/hVusG2XkwKU/s1600/home.png"></li>
<li class="tags mega">Category 4 Fun
<ul class="two">
<li class="tag-item"><a title="#Title" href="#Link">Accessories</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Automotive</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Beauty</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Clothing/Apparel</a></li>
</ul> </li>
<li class="about">Team 2 Hire
</li> <li class="about">Who We Are</li>
<li class="articles">2 Contact Us</li>
</ul> </div></div>
My Current Menu navigation bar in Css: -
#topmenu {
background: none repeat scroll 0 0 #FBFBFB;
display: block;
height: 70px;
padding-top: 15px;
text-transform: uppercase;
width: 990px;
}
#navigation {
padding: 0 0 5px;
}
#navigation ul li {
display: inline;
margin-left: 0;
}
#navigation ul li a {
padding: 8px 15px;
}
#header #navigation li.mega ul li a {
font-family: 'Cuprum',arial,serif;
font-weight: normal;
text-transform: lowercase;
}
li.mega ul {
background-color: rgba(255, 255, 255, 0.97);
border-top: 2px solid #22C3EB;
padding: 10px 0;
position: absolute;
top: 50px;
z-index: 2;
}
li.mega ul li {
display: block;
float: left;
width: 145px;
}
li.mega ul li a {
line-height: 30px;
}
#navigation ul li.tags a {
background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px 14px transparent;
padding-right: 25px;
}
#navigation ul li.tags a:hover {
background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px -10px transparent;
}
#navigation ul li.tags li a, #navigation ul li.tags li a:hover {
background: none repeat scroll 0 0 transparent;
}
#navigation ul li.tags li a {
display: block;
padding: 0 15px;
}
#navigation ul li.tags li a:active {
border: medium none;
}
#navigation ul li.tags li {
float: left;
width: 160px;
}
li.mega ul.two.second {
display: none !important;
}
li.mega ul {
left: -9999px;
position: absolute;
}
li.mega:hover ul, li.mega li ul:hover {
left: auto;
}
body.category-articles #navigation ul li.articles a, body.category-bestoftheweek #navigation ul li.bestoftheweek a, body.category-about #navigation ul li.about a, body.page-template-page-about-php #navigation ul li.about a, body.page-template-page-contact-php #navigation ul li.contact a {
background-color: #22C3EB;
color: #FFFFFF;
}
#topmenu #navigation a {
color: #616060;
font-family: 'Cuprum',arial,serif;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
}
#topmenu #navigation a:hover {
border-radius: 50px 50px 50px 50px;
color: #BBBBBB;
}
Right now my Sub-menu open in horizontal line and Now I want to create my Sub-menu (Category 4 Fun) in vertical By using ul class "two" and li class "tag-item".
add this style to your css code
.two{
width:100px;
margin-left:50px;
}
DEMO