When I get the cursor on the GOOGLE button, the parent block resizes by itself. I want the grandchild elements outside the parent button.
CODE:
ol {
display: none;
}
li:hover ol {
display: block;
margin-left: -4.2em;
}
#shadow li {
list-style-type: none;
border: 2px solid black;
box-shadow: 5px 5px 5px gray;
margin-bottom: 10px;
text-align: center;
width: 10em;
margin-left: 1.5em;
float: left;
display: block;
}
<body>
<div id="shadow">
<ul>
<li style="margin-left : -2.5em">
GOOGLE
<ol type="a">
<li> google1
</li>
<li> google1
</li>
</ol>
</li>
<li>YOUTUBE</li>
<li>FACEBOOK</li>
</ul>
</div>
</body>
One way to resolve this would be to simply give the li elements the same height on hover:
li:hover {
height: 18px;
}
This can be seen in the following example:
ol {
display: none;
}
li:hover {
height: 18px;
}
li:hover ol {
display: block;
margin-left: -4.2em;
}
#shadow li {
list-style-type: none;
border: 2px solid black;
box-shadow: 5px 5px 5px gray;
margin-bottom: 10px;
text-align: center;
width: 10em;
margin-left: 1.5em;
float: left;
display: block;
}
<body>
<div id="shadow">
<ul>
<li style="margin-left : -2.5em">
GOOGLE
<ol type="a">
<li> google1
</li>
<li> google1
</li>
</ol>
</li>
<li>YOUTUBE</li>
<li>FACEBOOK</li>
</ul>
</div>
</body>
Hope this helps :)
ol {
display: none;
}
li:hover ol {
display: block;
margin-left: -4.2em;
}
#shadow li {
list-style-type: none;
border: 2px solid black;
box-shadow: 5px 5px 5px gray;
margin-bottom: 10px;
text-align: center;
width: 10em;
margin-left: 1.5em;
float: left;
display: block;
}
<body>
<div id="shadow">
<ul>
<li style="margin-left : -2.5em; height: 1em;">
GOOGLE
<ol type="a">
<li> google1
</li>
<li> google1
</li>
</ol>
</li>
<li>YOUTUBE</li>
<li>FACEBOOK</li>
</ul>
</div>
</body>
ol {
display: none;
}
li:hover ol {
display: block;
margin-left: -4.2em;
}
#shadow li {
list-style-type: none;
border: 2px solid black;
box-shadow: 5px 5px 5px gray;
margin-bottom: 10px;
text-align: center;
width: 10em;
margin-left: 1.5em;
float: left;
display: block;
}
<body>
<div id="shadow">
<ul>
<li style="margin-left : -2.5em">
GOOGLE
<ol type="a">
<li> google1
</li>
<li> google1
</li>
</ol>
</li>
<li>YOUTUBE</li>
<li>FACEBOOK</li>
</ul>
</div>
</body>
I added a height attribute to your li tag. I think that's what you were looking for.
Related
Hello I'm a beginner and got a problem with my navigationbar in HTML. I've tried a lot but they are still unclickable...
Is there a mistake in my HTML?
<header>
<nav display: inline;>
<ul>
<li>
<navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
</li>
<li>
<navi>
<z class="active" href="index.html">Startseite</z>
</navi>
</li>
<li>
<navi>
<z href="produkte.html">Produkte</z>
</navi>
</li>
<li>
<navi>
<z href="about.html">Über uns</z>
</navi>
</li>
<li>
<navi>
<z href="agb.html">AGB</z>
</navi>
</li>
</ul>
</nav>
or is the mistake in my CSS? It's probably not the best way to style it but it looks good in my eyes. However I cant click any links...
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li z:hover:not(.active) {
background-color: #deb27a;
}
Thanks for help
Here's the link for Your above Problem https://jsfiddle.net/kj0w9g76/
Reason:- for anchor tag we use 'a' not with 'z'
instead of navi tag we use nav tag as used in code below.
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
overflow: hidden;
background-color: burlywood;
position: relative;
z-index: 1;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li nav z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: inline;">
<ul>
<li>
<nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
You've a problem in your code, styles, anchors are not correct there is the correct code below.
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li a {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: block;">
<ul>
<li>
<nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/
you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!
.
This is what i am trying to achieve
I want the separator to be extended to full height. that is, it should cover the entire nav bar's height.
Html markup is as follows.
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
padding: 10px;
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Since OP has updated his question this would be the solution
.mynav ul {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
.mynav li {
list-style: none;
display: inline
}
.mynav a {
padding: 10px;
display: inline-block;
font-size: 10px
}
.mynav li:not(:last-child) a {
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
you can use pseudo element
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child):before{
content:'';
position: absolute;
right: 0;
top:0;
bottom: 0;
width: 1px;
background: red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Alternatively, you can use box-shadow
.mynav li {
list-style: none;
display: inline;
padding: 10px;
position:relative
}
.mynav li:not(:last-child){
box-shadow: 1px 0 red
}
<div class="mynav pull-right">
<ul>
<li>TRENDS
</li>
<li>PRODUCTS
</li>
<li>DESIGNERS
</li>
<li>MEMBERS
</li>
<li>SEARCH
</li>
<li>MY ACCOUNT
</li>
</ul>
</div>
Your css should be display: inline-block if you wish to add padding to the top/bottom of your <li> element.
Try to set the padding to the A tag instead of Li tag :
.mynav li {
list-style: none;
display: inline;
border-left: 1px solid white;
}
.mynav li a {
padding: 10px;
}
In your CSS add width:13%; or something which will fit your width.
Check the code here
I am trying to make a miniature vertical bar like in this site, where they have the navigation and the vertical bars in between each link. I have tried the solution to a previous question, but when I tried to use 'margin-left' to move the text, the bar wouldn't stay between each link, it'd to this.
HTML
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li><div class="mini-divider"></div></li>
<li>ROSTER</li>
<li><div class="mini-divider"></div></li>
<li>GALLERY</li>
<li><div class="mini-divider"></div></li>
<li>ABOUT US</li>
<li><div class="mini-divider"></div></li>
<li>SPONSORS</li>
</ul>
</div>
</div>
CSS
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
margin-left: 10%;
width: 100%;
}
.nav-pages {
padding-top: 10px;
}
.mini-divider {
position: absolute;
top: 26%;
bottom: 71%;
border-left: 1px solid white;
}
.nav-pages li, .mini-divider {
float: left;
margin-left: 50px;
}
CSS
.nav-pages li:not(:last-child) a:after{
content: "";
/* width: 0px; */
background: white;
margin-left: 20px;
position: absolute;
height: inherit;
color: white;
border: 1px solid white;
height: 15px;
}
Remove The Border Related HTML & CSS
<li><div class="mini-divider"></div></li>
DEMO
You can also use + css selector to give border to the next element no need to add extra element for border
added
*{
margin: 0;
padding: 0;
}
for removing default styles given by browsers
* {
margin: 0;
padding: 0;
}
#nav-clearfix {
width: 100%;
height: 100px;
background: #000;
}
#nav {
width: 100%;
}
.nav-pages {
padding-top: 10px;
text-align:center;
}
.nav-pages li {
display: inline-block;
padding: 0 10px;
}
.nav-pages li + li {
border-left: 1px solid white;
}
<div id="nav-clearfix">
<div id="nav">
<ul class="nav-pages">
<li>HOME</li>
<li>ROSTER</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
</ul>
</div>
</div>
Use this .separator class for vertical separator.
CSS
ul > li{
float: left;
display: block;
position: relative;
}
ul > li > a{
padding: 4px 6px;
display: block;
}
.separator {
background: none repeat scroll 0 0 #222;
border-left: 1px solid #333;
float: left;
height: 30px;
width: 1px;
}
HTML
<ul>
<li >
<a href="#" >Home</a>
</li> <span class="separator"></span>
<li> Link 1 </li> <span class="separator"></span>
<li > Link 2 </li> <span class="separator"></span>
<li> Link3 </li> <span class="separator"></span>
<li > Contact </li>
</ul>
jsfiddle: demo
I don't normally work with IE7 simply because I hate it, but my latest client uses IE7-IE9 as their default browsers (not very consistent or up-to-date I know). So I have a list that renders fine in all newer browsers and IE8+ but in IE7 the UL seem to merge into the LI. Its like the tag didn't exist and the UL was a part of the LI. Each list item is nested inside of the one on top of it. Its hideous. Anyone know of a hack or a way around this? Is my CSS messed up?
<div class="indentList">
<ul class="level1">
<li class="customer">
Title
</li>
<ul class="level2 level" id="level2">
<li class="site">
Text
</li>
<ul class="level3 level" id="level3">
<li class="engineer indent">
Name
</li>
</ul>
<ul class="level2 level" id="level2">
<li class="site">
Text
</li>
<ul class="level3 level" id="level3">
<li class="engineer indent">
Name
</li>
<ul class="level4 level" id="level4">
<li>
Item
</li>
<li>
Item
</li>
</ul>
</ul>
</ul>
</ul>
</div>
.indentList ul {
margin: 0px;
padding: 0px;
float: left;
}
.indentList li a {
width: 770px;
margin: 0px 0px;
padding: 10px 0px;
display: inline-block;
float: left;
}
.indentList li:hover {
background: #E9E9E9;
}
.indentList li a:hover {
text-decoration: none;
}
.indentList li .edit {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 14px;
width: auto !important;
margin: 4px 0px 0px 5px;
text-align: center;
display: inline;
position: relative;
float: right;
}
.indentList li .edit.frozen {
background: #b51a1a url('images/menuBackgroundRed.png') center;
float: right;
}
.indentList li.customer {
background: #787878 url('images/menuBackgroundTaller.png') center;
color: #FFF;
box-shadow: inset 0px 0px 0px;
-moz-box-shadow: inset 0px 0px 0px;
-webkit-box-shadow: inset 0px 0px 0px;
}
.indentList li.customer a {
color: #FFF;
font-family: 'QuicksandBook', Arial, sans-serif;
font-size: 17px;
}
.level2, .level3, .level4 {
display: block;
}
.indentList ul ul ul li {
margin-left: 50px;
width: 840px;
}
.indentList ul ul ul li a {
width: 770px;
}
.indentList ul ul ul ul li {
margin-left: 90px;
width: 800px;
}
.indentList ul ul ul ul li a {
width: 730px;
}
Not your CSS, but your HTML is messed up.
You should be doing this (pseudocode):
<ul class="first-level">
<li>
<ul class="second-level">
<li>
<ul class="third-level">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
instead of this:
<ul class="first-level">
<li></li>
<ul class="second-level">
<li></li>
<ul class="third-level">
<li></li>
</ul>
</ul>
</ul>