I have the following drop down:
CSS:
.third-menu{
position: relative;
top: -50px!important;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 300px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
Javascript in the fiddle.
Here's the jsfiddle:
http://codepen.io/anon/pen/LpxVdv
Now, when I hover over the items, say on Central Compliance, then the remaining items below it (Control Room, Wealth Applications etc.) disappear. And if I over over Control Room, then Orchestria comes in the white space.
How can this be fixed??
add this to your css:
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
It doesn't disapeare, the active item expands to have enought height to contain menu from next level. Try using position:absolute for next level container.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want convert a psd file to html and css and I want to convert it into html and css . But I cant do that
This is how I would do it. Add some #media queries to make it responsive.
.breadcrumbs {
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
overflow: hidden;
}
.breadcrumb {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #f1f1f1;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #333;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumb:first-child {
padding: 9px 12px 9px 18px !important;
}
.breadcrumbs .breadcrumb:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #ccc;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 101%;
z-index: 3;
}
.breadcrumbs .breadcrumb:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #f1f1f1;
position: absolute;
top: 50%;
margin-top: -20px;
left: 101%;
z-index: 3;
}
.breadcrumb.active,
.breadcrumb:hover {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #3f51b5;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #fff;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumbs .breadcrumb .active:before,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 4;
}
.breadcrumbs .breadcrumb.active:after,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 4;
}
<div class="breadcrumbs">
Search
Meet
Discuss
Manage
</div>
Here is the Code
.breadcrumb li{
display:inline-block;
padding:10px 15px;
position: relative;
border: 1px solid #ccc;
margin-left:-4px;
background: #eee;
}
.breadcrumb li:first-child{
background: #054EA3;
}
.breadcrumb li a{
padding-left: 15px;
color:#888;
text-decoration:none;
}
.breadcrumb li:first-child a{
color:#fff;
}
.breadcrumb li:after, .breadcrumb li:before {
left: 100%;
top: 50%;
border: 2px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.breadcrumb li:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #eee;
border-width: 20px;
margin-top: -20px;
z-index:99999;
}
.breadcrumb li:first-child:after {
border-left-color: #054EA3;
}
.breadcrumb li:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #ccc;
border-width: 21px;
margin-top: -21px;
z-index:99999;
}
<ul class="breadcrumb">
<li>SEARCH</li>
<li>MEET</li>
<li>DISCUSS</li>
<li>MANAGE</li>
</ul>
I'm looking to achieve this with CSS:
and this is what I've got:
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
border: 1px solid #c00;
color: black;
text-decoration: none;
padding: 10px 0 10px 55px;
background: #fff;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid #fff;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
/* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid red;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li a:hover {
background: hsla(34, 85%, 25%, 1);
}
.breadcrumb li a:hover:after {
border-left-color: hsla(34, 85%, 25%, 1) !important;
}
.breadcrumb li:last-child a {
border-right: 1px solid red;
}
.breadcrumb li:last-child a:before {
border-left: 0 solid transparent;
}
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
Issues:
Can't get the right side borders to show correctly
Can't get the right border of last element to be normal (not a chevron)
Can't get hover state right because of right side borders.
Here's is my working jsFiddle
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
position: relative;
background: #fff;
margin: 0 5px;
}
.breadcrumb li a {
border: 1px solid #0976a1;
color: #0976a1;
text-decoration: none;
padding: 10px 10px 10px 32px;
position: relative;
display: block;
z-index: 99;
font-weight: bold;
}
.breadcrumb li:first-child a {
padding-left: 10px;
border-right: none;
}
.breadcrumb li:last-child a {
border-left: none;
}
.breadcrumb li:before, .breadcrumb li:after{
content: " ";
display: block;
width: 33px;
height: 29px;
border-top: 5px solid transparent;
border-bottom: 1px solid #0976a1;
border-right: 1px solid #0976a1;
position: absolute;
top: 4px;
z-index: -1;
background: #fff;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
.breadcrumb li:before {
left: 87%;
}
.breadcrumb li:after {
left: 81%;
}
.breadcrumb li:first-child:before, .breadcrumb li:first-child:after{ z-index: 1; }
.breadcrumb li:first-child:after{ left: 73%; }
.breadcrumb li:last-child:before, .breadcrumb li:last-child:after{
display: none;
}
.breadcrumb li:first-child:hover:after, .breadcrumb li:hover{ background: #0976a1; }
.breadcrumb li:hover a{ border-color: transparent; }
.breadcrumb li:hover a{ color: #fff; }
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
I hope this will help you :)
I think this code is helpful.
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
margin: 0;
padding: 0;
}
.breadcrumb li {
float: left;
margin-right: 10px;
}
.breadcrumb li:first-child {
z-index: 9;
position:relative;
}
.breadcrumb li a {
border: 1px solid #006A9C;
color: black;
text-decoration: none;
padding: 10px 10px 10px 10px;
background: #fff;
position: relative;
display: block;
float: left;
}
.breadcrumb li:first-child a:after {
border-color:#fff;
border-style: solid;
border-width: 15px;
bottom: -30px;
box-shadow: 0 0 0 0 #c00, -1px 1px 0 1px #006A9C;
content: "";
height: 0;
position: absolute;
right: -29px;
transform: rotate(-135deg);
transform-origin: 0 0 0;
width: 0;
z-index: -1;
}
.breadcrumb li:first-child a {
border-right: 0;
}
.breadcrumb li:last-child a {
border-left: 0;
}
.breadcrumb li:last-child a:after{
display:none;
}
.breadcrumb li:last-child a:before{
border-color:#fff;
border-style: solid;
border-width: 15px;
bottom: -30px;
box-shadow: 0 0 0 0 #006A9C, -1px 1px 0 1px #006A9C;
content: "";
height: 0;
position: absolute;
left: -1px;
transform: rotate(-135deg);
transform-origin: 0 0 0;
width: 0;
}
.breadcrumb li:last-child a {
padding-left: 28px;
}
.breadcrumb li a:hover {
background: #006A9C;
color: #fff;
}
.breadcrumb li a:first-child:hover::after {
border-color:#006A9C;
}
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
</ul>
*{
margin: 0;
padding: 0;
}
.container{
margin: 20px;
display: flex;
flex-direction: row;
border: 1px solid skyblue;
width: 200px;
overflow: hidden;
}
.left,.right{
display: inline-block;
//border: 1px solid black;
line-height: 50px;
width: 100px;
height: 100%;
position: relative;
}
.right{
text-align: center;
}
p:hover{
background-color: skyblue;
color: white;
}
.left::after{
content:'';
position: absolute;
left: 70px;
top: 3px;
display: inline-block;
width: 45px;
height: 45px;
z-index: 2;
background:white;
transform:rotate(-45deg);
border-right: 1px solid skyblue;
border-bottom: 1px solid skyblue;
}
.left:hover::after{
background-color: skyblue;
}
<div class="container">
<p class="left">LEFT</p>
<p class="right">RIGHT</p>
</div>
It is doing my best.
I hope it will be useful for you.
I've got an issue with my chat window, every long message overflows onto the x, and I'm trying to force it to over flow onto the height / y axis, I've tried adding overflow-x:none; and height:auto;, but doesnt seem to work.
This is what it looks like:http://www.socialnetwk.com/chatbug.png
Here is my code:
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height:auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content:"";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content:"";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content:"";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content:"";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display:none;
visibility:hidden;
}
</style>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
</div>
Add this CSS property
.messages ul li span {
word-wrap: break-word;
}
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height: auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
word-wrap: break-word;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display: none;
visibility: hidden;
}
</style>
<body>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}
i am not getting vertical scrollbar...
jsfiddle link -> http://jsfiddle.net/QNuzb/2/
css is
/* Navigation */
#nav-bar {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 45px;background: #F5F5F5;}
#nav {width: 800px;margin: 0 auto;height: 48px;text-align:center;}
#nav > li { display: inline-block;width: 15em;}
ul{list-style-type: none; display:inline-block;margin:0 auto; padding:0; position:relative;font-weight: bold; }
ul li{display:block;display:inline-block; position:relative;margin-right:5px;margin-left:5px}
ul li a{text-align: center;font-size: 18px;margin: 5px;padding: 8px;text-decoration: none; text-transform: capitalized;height: 35px; color:#222; font-size:18px; line-height:48px;}
ul li a:hover, ul li a.active{text-align:center;border-bottom:3px solid #800000; color:#800000}
/* Tabs */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
It's because of the position: fixed; in your nav-bar class. remove it.
#nav-bar {
position: fixed; /* remove */
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 45px;
background: #F5F5F5;
}