css drop down menu - "hiding" nested menu items - html

I'm trying to create a drop down menu, however I'm having difficulty "hiding" the nested menu items. The links and styling work fine, it's just the drop-down effect that I've missed something on. Ideas?
jsfiddle
css-
#header .social {
float: right;
list-style: none;
padding-top: 20px;
}
#header .social ul li {
display: inline;
position: relative;
}
#header .social ul li ul {
display: none;
}
#header .social ul li a {
display: inline;
padding-left: 6px;
white-space: nowrap;
}
#header .social ul li:hover ul {
display: inline;
position: absolute;
}
#header .social ul li:hover li {
float: none;
}
html/php-
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="cait and shannon barker youtube" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="cait and shannon barker facebook" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="cait and shannon barker twitter" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
<li><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="cait and shannon barker lockerz" /></li>
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</ul>
</div><!-- end social -->

Is this what you are looking for ? http://jsfiddle.net/cScrD/3/
The HTML structure was not standard (ul should not be ideally put as a child of another ul. Rather open an li tag and put the ul inside the li). The structure should ideally be like this.
<div id="header">
<div class="social">
<ul>
<li><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="cait and shannon barker instagram" /><!-- li should not end here -->
<ul>
<li>cait</li>
<li>shannon</li>
</ul>
</li><!-- li should end here -->
</ul>
</div>
</div>

Related

How to move this horizontal? [duplicate]

This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 2 years ago.
i'm having trouble with this code.I need to move those images horizontal... I don't know why they are placed vertical.
Image
.almedio {
display: flex;
justify-content: center;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
Be sure you are styling the ul and li tags, not only the container.
.almedio {
width: 100%;
}
ul {
list-style: none;
}
li {
display: inline-block;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
you just need to add
.almedio>ul{
display: flex;
}
.almedio{
display: flex;
justify-content: center;
}
.almedio>ul{
display: flex;
}
.almedio>ul>li{
padding:5px;
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>
You can use css flex or grid -
/*.almedio {
display: flex;
justify-content: center;
}*/
.almedio ul{
padding:0;
margin:0;
display:flex;
overflow-X:scroll;
list-style-type:none;
}
.almedio ul li{
padding:2px 10px;
}
img{
height:100%
}
<div class="almedio">
<ul>
<li></li>
<li><img src="https://orcz.com/images/thumb/b/bb/Need-for-speed-most-wanted-box-art.jpeg/200px-Need-for-speed-most-wanted-box-art.jpeg" alt="juego1"></li>
<li><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROv2RDtFhiKina3NSOLkiauhtLwKahXCQPag&usqp=CAU" alt="juego2"></li>
<li><img src="https://1.bp.blogspot.com/-n3u_0Sao23c/VWQxGos9TYI/AAAAAAAAAns/GwtyYMIK03c/s1600/200px-AliceMadnessReturns.jpg" alt="juego3"></li>
</ul>
</div>

Align multiple unordered lists on the same line

I want to put multiple <ul> on the same line, simulating products in a shop. So far I've got multiple unordered list tags:
ul {
display: inline;
}
li {
list-style: none;
}
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
<li>Name</li>
<li>Author</li>
</ul>
How can I accomplish this? I have them show vertically but I dont want them this way.
You could set it to ul {display:inline-block;}.
Be aware of width="20%" height="20%" on the image in your example, it may give you unwanted results. As percentage width or height is always relative to container's width, not itself.
For simplicity, I just use fixed width in the demo below.
ul {
display: inline-block;
vertical-align: top;
padding-left: 0;
}
li {
list-style: none;
}
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
<ul>
<li><img src="//dummyimage.com/100"></li>
<li>Name</li>
<li>Author</li>
</ul>
Use CSS:
li{
float:left;
}
floating left will fix it..

Add submenu to existing menu

Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>

Creating a dropdown menu using CSS and HTML

I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.
This is my HTML:
<div id="navigation">
<ul>
<li class="current">
Home
</li>
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="three">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="four">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="five">
<img src="" />
Promoting Peace in the Niger Delta
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
Service Maintenance
</li>
<li class="sub-menu">
Frequently Ask Questions
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Hope somebody will help me out.
Thank you.
The problem is the container width is defined at 300px
#navigation ul li > div.product {
width: 300px;
}
And its child elements are taking up 100% of that space. So you need to make sure they have room to float left.
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
Hopefully that helps with your question.
Fiddle
Check this http://jsfiddle.net/qtvVK/11/embedded/result/.
I made some changes to your markup and used display:inline-block; instead of floating elements
Relevant CSS syles
/* Dropdown styles */
#navigation ul > li > ul.sub-menu {
display: none;
position:absolute;
padding:10px 0;
background:#fff;
border: 1px solid #DDDCDC;
top: 24px;
z-index: 1;
}
/* Show dropdown when hover */
#navigation ul > li:hover > ul.sub-menu {
display:block;
}
.row {
width:auto;
white-space: nowrap;
}
.col {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
i suggest using jQuery.
it has simple function called slideDown().
Here is a link to a good tutorial.
You should do like so: First hide your menu when script starts:
$("#idOfDropDownMenu").hide();
And command to drop menu down when mouse enters button and slide up when it leaves it:
$("#idOfButton").hover(function(){ //function that fires when mouse enters
$("#idOfDropDownMenu").slideDown();
}, function() { //function that fires when mouse leaves
$("#idOfDropDownMenu").slideUp();
}
Instead of using IDs you can use any CSS selector.
I hope this helps with your question.
css
ul li ul
{
display: none;
position: fixed;
margin-left: 191px;
margin-top: -37px;
}
ul li:hover ul
{
display: block;
}
ul li a:hover
{
color: #fff;
background: #939393;
border-radius:20px;
}
ul li a
{
display: block;
padding: 10px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul
{
background: #f2f2f2;
list-style:none;
padding-left: 1px;
width: 194px;
text-align: center;
}
html
<ul>
<li>Home</li>
<li>
About
<ul>
<li>About Me
<li>About Site
</ul>
</li>
<li>Contact</li>
</ul>

UL class not working? Only LI works?

I just started HTML/CSS two days ago.. Please go easy on me. I'm currently building a website. For some reason, I cannot get the the HTML class/id to render with CSS. To make it work, I have to make a class for each list. How do I make it so that the class for ul as a whole? (When I take out the <li class="name_here>, all the styles don't work anymore)
HTML
<div>
<ul class="navi">
<li class="navi"><img src="../images/bestfoodservicesweb_07.jpg" width="104" height="67" />
<img src="../images/bestfoodservicesweb_09.jpg" width="105" height="67" />
<img src="../images/bestfoodservicesweb_11.jpg" width="110" height="67" />
<img src="../images/bestfoodservicesweb_13.jpg" width="105" height="66" /></li>
</ul>
</div>
<div>
<div>
<ul class="lastbit">
<li><img src="../images/bestfoodservicesweb_34.jpg" width="85" height="29"/></li>
<li><img src="../images/bestfoodservicesweb_37.jpg" width="62" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_38.jpg" width="69" height="16" /></li>
<li><img src="../images/bestfoodservicesweb_39.jpg" width="100" height="16" /></li>
</ul>
<ul class="lang">
<li class="lang"><img src="../images/bestfoodservicesweb_41.jpg" width="29" height="14" /></li>
<li class="lang"><img src="../images/bestfoodservicesweb_43.jpg" width="39" height="17" /></li>
</ul>
<ul class="social">
<li class="social"><img src="../images/bestfoodservicesweb_27.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_29.jpg" width="30" height="29" /></li>
<li class="social"><img src="../images/bestfoodservicesweb_31.jpg" width="30" height="29" /></li>
</ul>
</div>
</div>
CSS
.navi {
list-style: none;
display: inline;
margin-left: 5px;
position: relative;
top: 5px;
}
.lastbit {
list-style: none;
display: inline-block;
}
.lang {
list-style: none;
display: inline;
}
.social {
list-style: none;
display: inline;
}
You should read up more on selectors in CSS. In a nutshell what you are doing with this:
.social {
list-style: none;
display: inline;
}
is saying that everything with the class social gets the given styles applied to it.
When you have that class on each of the li elements it applies as you want. However when you are putting that class on the ul it is applying the styles to the ul and not the li. To fix this you need to specify that you want the styles on the li by changing the selector slightly:
.social li {
list-style: none;
display: inline;
}
The above says that all li elements that are descendents of items with class social should have the styles which is what you want.
Not exactly sure what you are trying to do, but you might try something like this.
.lastbit li {
list-style: none;
display: inline-block;
}
Your markup can then be:
<ul class="lastbit">
<li></li>
...
</ul>
This will apply the style to all the li elements of the ul you mark with that style.
To style all lists, use:
ul{
/* styles here */
}
To style all of the items in the list, use
li{
/* styles here */
}
To style all of the anchors in all of the items in the list, use
li a{
/* styles here */
}
Also, just so you're aware, your first ul has the class name "navi" and so do the items within the list. It also only has one <li>, although you likely want 4 (since you have 4 links in it).