I have written the code below to help me understand CSS stacking order but I am stuck.
In the page below when I hover over the link "Three" (id=link_three), I want the sub-menu to appear.
The sub-menu appears but the menubar gets distorted because the sub-menu is not stacked above the rest of the menubar. What are the stacking contexts and stacking orders here? And what is the proper way to make the sub-menu appear one level above?
<html>
<head>
<style>
<!--
* {
padding: 0;
border: 0;
margin: 0;
}
.menubar_ul {
list-style: none;
}
.menubar_ul_li,.menubar_ul_li_menu {
float: left;
padding: 0 10px 0 10px;
}
.menu_ul {
list-style: none;
display: none;
}
.menu_ul_li {
}
#link_three:hover>#menu_three {
display: block;
}
-->
</style>
</head>
<body>
<ul id="top_menubar" class="menubar_ul">
<li class="menubar_ul_li" id="link_one">One</li>
<li class="menubar_ul_li" id="link_two">Two</li>
<li class="menubar_ul_li_menu" id="link_three">Three
<ul class="menu_ul" id="menu_three">
<li class="menu_ul_li" id="menuitem_one">One</li>
<li class="menu_ul_li" id="menuitem_two">Two</li>
<li class="menu_ul_li" id="menuitem_three">
<!-- This is intentional: -->
Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li>
<li class="menu_ul_li" id="menuitem_four">Four</li>
<li class="menu_ul_li" id="menuitem_five">Five</li>
<li class="menu_ul_li" id="menuitem_six">Six</li>
</ul></li>
<li class="menubar_ul_li" id="link_four">Four</li>
<li class="menubar_ul_li" id="link_five">Five</li>
<li class="menubar_ul_li" id="link_six">Six</li>
</ul>
</body>
</html>
<!-- Just add "position:absolute;" to your css, this is going to be then -->
#link_three:hover>#menu_three {
display: block;
position:absolute;
}
Related
I have been tasked with styling a website, where I have encountered a hurdle regarding the horizontal alignment of elements inside list items.
I have replicated the structure of the menu in question with this JSFiddle.
I want to know how I can keep the position of the green divs (as shown from the start) when I expand the menu, using the button in the fiddle. I need them to keep horizontal alignment with the first <a> element in their respective <li> element, when the submenus are displayed.
you can do it like this for example:
<html>
<script>
function clickFunction(){
var elements = document.getElementsByClassName("submenu");
for(var i = 0; i < elements.length; i++){
elements[i].classList.toggle("display-sublist");
}
}
</script>
<style>
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul li{
width: 100%;
background-color: blue;
}
.submenu{
display: none;
}
.display-sublist{
display: block;
}
ul li a{
width: 95%;
background-color: red;
}
.main-test {
display: inline-block;
float: left;
width: 90%;
}
.cancel-test{
display: inline-block;
background-color: green;
float: right;
width: 10%;
}
.expand-button{
clear: both;
display: block;
}
</style>
<body>
<ul>
<li>
<a class="main-test" href="#">Something</a>
<a class="cancel-test">x</div>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
<a class="main-test"href="#">Something</a>
<a class="cancel-test">x</a>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
Something
</li>
<li>
Something
</li>
</ul>
<button onclick="clickFunction()" class="expand-button">Expand</button>
</body>
</html>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I have a vertical UL list on a html page, with a sublist inside of it. At the end of the sublist, it has an unwanted gap, like a linebreak, though I can't seem to find anything in my css or html that would cause it (and my attempts at trying to get it to go away aren't working very well).
Here's what it looks like;
1. Item
2. Item
1. Sub Item
2. Sub Item
3. Item
4. Item
My html code:
<ul class="fic">
<li class="fic"><a href="">item</li>
<li class="fic"><a href="">item
<ul class="fic">
<li class="fic">item</li>
<li class="fic">item</li>
</ul>
</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item</li>
<li class="fic">item
<ul class="fic">
<li class="fic">item</li>
</ul></li>
</ul>
And my css code that I was trying to use;
.fic ul {
padding: 0px;
margin: 0px;
}
And since my template came with menu code for the ul used in the navigation bar, here's that;
#menu ul {
display: block;
width: 778px;
margin: 0em auto;
list-style: none;
padding-left: 2.5em;
}
#menu li {
display: inline;
}
#menu li a {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
padding: 0.25em 0.75em 0.25em 0.75em;
}
#menu li a:hover {
background: #342117 url('images/hover.gif') top left repeat-x;
color: #fffdc6;
}
html code for navigation menu;
<div id="menu">
<ul>
<li class="first">Home</li>
<li>Fan Art</li>
<li>Fan Fiction</li>
<li>Fan Videos</li>
<li>Other</li>
<li>Forum</li>
</ul>
</div>
Help would be appreciated, thank you.
The menu styles are the culprit, need full code
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.
I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}
Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?
I am creating an email client, I want the inbox to resemble that of Mac Mail
I am pulling the emails themselves from a database using ajax (outputting to XML) and then looping through the entries and pulling the relevant elements.
What I have never been confident with is the css. I want to create the elements using <ul> and <li>. My understanding is that I will need to nest these. For example:
<ul>
<li>
<ul>
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul>
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
.from {
}
.subject {
}
.date {
}
.preview {
}
What I don't know is whether I need to reference the <ul> and <li> items within the CSS, does that make a difference? Also, what are the things that I need to create this look?
PLEASE DO NOT ANSWER THIS. I THINK I HAVE WORKED IT OUT. WHEN I AM HAPPY WITH THE OUTCOME I WILL POST HERE FOR OTHERS TO WORK FROM IN THE FUTURE...
Ok, I give up, this is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.inboxPanel {
width: 420px;
}
ul.inbox {
width: 100%;
list-style-type: none;
}
ul.message {
list-style-type: none;
display: block;
}
.from {
width: 50%;
border: 1px solid #ccc;
font-weight: 700;
float: left;
display: inline-block;
}
.subject {
border: 1px solid #ccc;
}
.date {
width: 50%;
border: 1px solid #ccc;
float: right;
display: inline-block;
}
.preview {
border: 1px solid #ccc;
}
</style>
<title></title>
</head>
<body>
<div class="inboxPanel">
<ul class="inbox">
<li>
<ul class="message">
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
<li>
<ul class="message">
<li class="from">Jame # Gmail</li>
<li class="subject">Out Of Office</li>
<li class="date">12/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Ok, first of all
<ul>
<li class="from">Mike # Hotmail</li>
<li class="subject">Hello</li>
<li class="date">13/01/2013</li>
<li class="preview">Lorem Ipsum....</li>
</ul>
makes no sense semantically. From, subject, date and preview are not a list. Your email messages ARE a list, but the email components are not.
What you should do is something like this:
<ul>
<li>
<span class="from"></span>
<span class="date"></span>
<p class="subject></p>
<p class="preview"></p>
</li>
<ul>
CSS:
li { overflow: hidden; }
li span.from { float: left; font-weight: bold; }
li span.date { float: right; }
li p.subject { clear: both; font-weight: bold; }
li p.preview { color: #ccc; }
This is just rough styling to make the layout look the way you want. You'll have to tweak it for proper padding, colors, etc.