I created basic html page with horizontal menu with submenu in nav.
I would like to allow submenu open and be usable at main area, but nav resizes moving main down.
I tried overflow options, but without success (no effetcs). I tried absolute position for main,but then submenu cannot be used (when I move cursor to submenu it disappears), although it is shown as I wish. Code below. Thanks for answers.
header {
background-color: rgb(200, 200, 200);
border-radius: 1px;
color: white;
text-align: center;
padding: 1px;
width: 1480px;
height: 70px;
}
nav.horizontal {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 50px;
resize: none;
}
main {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .15);
overflow: hidden;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 600px;
}
nav.horizontal>li {
list-style-type: none;
float: left;
}
nav.horizontal>li>ul {
list-style-type: none;
display: none;
margin: 0;
padding: 0;
}
nav.horizontal li:hover>ul {
display: block;
}
nav.horizontal>li>ul>a {
background-color: rgb(255, 255, 0);
background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(0, 0, 0);
display: block;
font-size: .65rem;
width: 180px;
height: 30px;
letter-spacing: .1rem;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
cursor: pointer;
}
nav.horizontal>li>a {
background-color: rgb(255, 255, 5);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
color: rgb(255, 255, 255);
display: block;
font-size: .85rem;
font-weight: 500;
width: 211px;
height: 50px;
letter-spacing: .1rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.horizontal>li>a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
<body>
<header>Title</header>
<nav class="horizontal">
<li>
Menu
<ul>
First
Second
Third
Fourth
</ul>
</li>
</nav>
<main>
</main>
<footer>
</footer>
</body>
Try to add to your nav.horizontal > li > ul (subnav)
position: absolute;
Be safe and use ul & li always like:
<ul>
<li></li>
</ul>
You can always check your Markup here (https://validator.w3.org/)
Since MDN states that
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
I would wrap the <li> inside nav.horizontal in <ul> and then add correct positioning (position: relative; for the parent and position: absolute; for the child). Also in your case you might like to set parent's paddings&margins to 0. Check it out:
header {
background-color: rgb(200,200,200);
border-radius: 1px;
color:white;
text-align:center;
padding:1px;
width: 1480px;
height: 70px;
}
nav.horizontal {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 50px;
resize:none;
}
main {
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
overflow: hidden;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 1480px;
height: 600px;
}
nav.horizontal > ul {
margin: 0;
padding: 0;
}
nav.horizontal > ul > li { // our parent element
list-style-type: none;
float: left;
position: relative;
}
nav.horizontal > ul > li > ul { // our child elemnt
list-style-type: none;
display:none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
nav.horizontal ul li:hover > ul {
display: block;
}
nav.horizontal > ul > li > ul > a {
background-color: rgb(255, 255, 0);
background-image: -webkit-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: -moz-linear-gradient(150deg, rgbrgb(255, 255, 0), rgb(255, 255, 0));
background-image: -o-linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
background-image: linear-gradient(150deg, rgb(255, 255, 0), rgb(255, 255, 0));
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(0,0,0);
display: block;
font-size: .65rem;
width: 180px;
height: 30px;
letter-spacing: .1rem;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
cursor: pointer;
}
nav.horizontal > ul > li > a {
background-color: rgb(255, 255, 5);
background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(255, 255, 5));
border-bottom: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);
color: rgb(255,255,255);
display: block;
font-size: .85rem;
font-weight: 500;
width: 211px;
height: 50px;
letter-spacing: .1rem;
line-height: 50px;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
text-transform: uppercase;
transition: all .1s ease;
text-decoration: none;
}
nav.horizontal > ul > li > a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
<header>Title</header>
<nav class="horizontal">
<ul>
<li>
Menu
<ul>
First
Second
Third
Fourth
</ul>
</li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
Related
I want to decrease the font size of first div and increase the font size of the second div.
top1 {
transform: translateX(-7em);
font-size: 1.2em !important ;}
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
font-size: .7em;
}
https://codepen.io/tiwari_ashuism/pen/WNOjbgO
Both div elements have the same id="txt" and this id has a font-size of 0.7em which you need to delete. Use the classes to apply different font-size for each div class.
#txt{
margin: 10px;
border-radius: 9px;
backdrop-filter: blur(8 px) saturate(171%);
-webkit-backdrop-filter: blur(5px) saturate(171%);
border: 1px solid ;
border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
-webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
-moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
background:rgba(238, 221, 221, 0.85);
padding: .5em 1em ;
color: rebeccapurple;
}
.top1 {
transform: translateX(-7em);
font-size: 1.5em !important ;
}
.top2 {
transform: translateX(7em);
font-size: 1.1em !important;
}
I want my buttons like this: https://codepen.io/jouanmarcel/pen/LYYEmmO
but when I put that in my code, something like that comes out
<!DOCTYPE html>
<html>
<head>
<body>
<link rel="stylesheet" href="css/style.css">
<div class = box>
<button class="button">Fire</button>
<button class="button">Fire</button>
<button class="button">Ice</button>
<button class="button">Ice</button>
</body>
</head>
</html>
css
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer;
}
button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px;
}
button.fire {
border-color: rgba(255, 236, 168, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(255, 138, 48, 1), .4), transparentize(rgba(240, 96, 29, 1), .4));
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .4), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .4), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(255, 236, 168, 1),
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(255, 236, 168, 1);
}
button.ice {
border-color: rgba(168, 236, 255, 1);
background-image: linear-gradient(to bottom, transparentize(rgba(48, 138, 255, 1), .5), transparentize(rrgba(29, 96, 240, 1), .5));
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .5), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .5), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1);
color: rgba(168, 236, 255, 1);
}
button:before {
box-shadow: inset 0 0 30px 0 rgba(168, 236, 255, 1)
}
button:hover
button.fire {
box-shadow: 0 0 70px transparentize(rgba(255, 138, 48, 1), .2), 0 5px 20px transparentize(rgba(255, 138, 48, 1), .2), inset 0 1px rgba(255, 236, 168, 1), inset 0 -1px rgba(255, 236, 168, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(255, 236, 168, 1)
}
button.ice {
box-shadow: 0 0 70px transparentize(rgba(48, 138, 255, 1), .2), 0 5px 20px transparentize(rgba(48, 138, 255, 1), .2), inset 0 1px rgba(168, 236, 255, 1), inset 0 -1px rgba(168, 236, 255, 1)
}
button:before {
box-shadow: inset 0 0 50px 0 rgba(168, 236, 255, 1)
}
button + button {
margin-top: 15px;
animation-delay: .3s;
}
#keyframes breath {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.95);
}
}
#keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1);
}
100% {
transform: skewX(-10deg) scaleX(0.95);
}
}
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none;
font-size: 12px;
}
idk how to fix it want it like so: https://codepen.io/jouanmarcel/pen/LYYEmmO
sorry for my english
Your conversion of sass to css is wrong on many places. transparentize is not a css function, and you need to change the rgba values accordingly. The original example is designed for DIV elements, the styling might not work for the button tag as expected.
If you want to use plane css, its best to convert sass to css using a tool, not by hand. You could just use the sass command line tool or even easier use a online converter like the one from https://codebeautify.org/.
This will create the following code, that should work as expected:
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.button {
border: 1px solid green;
backdrop-filter: blur(10px);
transform: skewX(-10deg);
height: 50px;
width: 200px;
border-radius: 20px 5px 20px 0px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
animation: breath2 2s .5s infinite alternate;
transition: all .2s ease;
cursor: pointer; }
.button:before {
content: "";
display: block;
width: calc(100% - 22px);
height: calc(50px - 8px);
animation: breath 2s infinite alternate;
left: 10px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 15px 3px 15px 3px; }
.button.fire {
border-color: #ffeca8;
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
box-shadow: 0 0 70px rgba(255, 138, 48, 0.6), 0 5px 20px rgba(255, 138, 48, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8; }
.button.fire:before {
box-shadow: inset 0 0 30px 0 #ffeca8; }
.button.ice {
border-color: #a8ecff;
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.5), rgba(29, 96, 240, 0.5));
box-shadow: 0 0 70px rgba(48, 138, 255, 0.5), 0 5px 20px rgba(48, 138, 255, 0.5), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #a8ecff; }
.button.ice:before {
box-shadow: inset 0 0 30px 0 #a8ecff; }
.button:hover.fire {
box-shadow: 0 0 70px rgba(255, 138, 48, 0.8), 0 5px 20px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8; }
.button:hover.fire:before {
box-shadow: inset 0 0 50px 0 #ffeca8; }
.button:hover.ice {
box-shadow: 0 0 70px rgba(48, 138, 255, 0.8), 0 5px 20px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff; }
.button:hover.ice:before {
box-shadow: inset 0 0 50px 0 #a8ecff; }
.button + .button {
margin-top: 15px;
animation-delay: .3s; }
#keyframes breath {
0% {
transform: scaleX(1); }
100% {
transform: scaleX(0.95); } }
#keyframes breath2 {
0% {
transform: skewX(-10deg) scaleX(1); }
100% {
transform: skewX(-10deg) scaleX(0.95); } }
.ref {
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 3px;
padding: 5px 8px;
position: absolute;
font-size: 16px;
bottom: 10px;
right: 10px;
color: #fff;
font-weight: 300;
font-family: sans-serif;
text-decoration: none; }
.ref::first-letter {
font-size: 12px; }
I want to left justify my Dropdown and parent submenu text. I also want my tab text to be always right justified. How can I do this?
Here's my code:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
position: relative;
/*position of navbar right and left*/
left: auto;
float: left;
font: 12px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 4px 27px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 25px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 198px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 197px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
header {
border-top: 0px solid gold !important;
/*move header pic up and down*/
margin-top: -43px !important;
}
</style>
<header style="position: relative; top: 6px;">
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>By Author <font size="1"> ► </font>
<ul>
<li>Pir Nasir Ud Din</li>
<li>Ashfaq Ahmed</li>
<li>Wasif Ali Wasif</li>
<li>Abu Yahya</li>
</ul>
</li>
<li>Poetry Books <font size="1"> ► </font>
<ul>
<li>Allama Iqbal</li>
<li>Mir Taqi Mir</li>
<li>Mirza Ghalib</li>
<li>Faiz Ahmed Faiz</li>
<li>Ahmed Faraz</li>
<li>Mohsin Naqwi</li>
<li>Ibne Insha</li>
<li>Parveen Shakir</li>
<li>Bano Qudsia</li>
</ul>
</li>
<li>Islamic Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Authors & Scholars
<ul>
<li>Moulana Tariq Jamil</li>
<li>Pir Nasir Ud Din Shah</li>
<li>Ghulam Muhammad Dard</li>
<li>Something New</li>
<li>Our Vision</li>
</ul>
</li>
<li>Sofwares
<ul>
<li>Antivirus</li>
<li>Level 2.2</li>
<li>Registered Apps <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2A</a></li>
<li><a href='https://lighthouse786.blogspot.com/p/coming-soon.html'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>
Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
<li>Who We Are</li>
</ul>
</div></header>
</!doctype>
This might help:
.sub-menu {
text-align: left;
}
I am trying to create an aqua themed button that looks great across multiple browsers. I am new to CSS, so please be kind.
I have found an example on-line that looks great in Chrome... But does not show up in IE...
Below is the button in chrome...
HTML:
<div class="button aqua">
<div class="glare"></div>
Button Label
</div>
CSS:
.button{
width: 120px;
height: 24px;
padding: 5px 16px 3px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border: 2px solid #ccc;
position: relative;
/* Label */
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
.button .glare {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 142px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
You are missing css attributes for IE browser.
ADD the following. SAMPLE BELOW.
JSFIDDLE
border-radius:8px;
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
Internet Explorer does not recognize -webkit or -moz browser prefixes. Everywhere you see those, also add the same attribute without the prefix.
For example:
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
Add:
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
And, just FYI, -webkit is for Chrome/Safari and -moz is for Firefox.
I am trying to build a drop down menu, So far i found a really nice menu but it lists its items horizontal and displays its sub items horizontally as well.
I would like my items to be next to each other and then if it has a sub menu those items drop down.
Here is my Menu:
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" >#Html.ActionLink("Home", "Index", "Home", new { #class = "active" })</li>
<li class="subitem2">#Html.ActionLink("Contact", "Contact", "Home")</li>
<li class="subitem3">#Html.ActionLink("About", "About", "Home")</li>
</ul>
</li>
<li class="item2">#Html.ActionLink("Login", "Login", "Home")</li>
</ul>
</nav>
</div>
Style Sheet
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: 225px;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
What property in my style sheet is causing my Menu to list like this?
Is there a way to override what every is causing the menu you to do this?
Edit
Html list:
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1">Home
<ul style="display: block; ">
<li class="subitem1" ><a class="active" href="/?Length=4">Home</a></li>
<li class="subitem2">Contact</li>
<li class="subitem3">About</li>
</ul>
</li>
<li class="item2">Login</li>
</ul>
</nav>
</div>
.menu {
width: 225px;
}
the width:225px prevents the menu from displaying correctly.
http://jsfiddle.net/wFyMs/2/
Why can you make it simplier?
Try rewrite it by this pattern:
CSS
li { float: left; }
li ul li { clear: both; }