how do you get a div to render to the right?
문제
I am trying to get a menu div
to appear below the menu icon that I have but have it open up to the left. The menu icon is on the top right of the screen, if the div
opens to the right, it goes off the screen.
Does anyone know how to do this? I have tried float:right; position:relative/absolute; right:0px
but it doesn't move.
I have also tried: text-align:right
on the menu icon. On roll over it pushes the icon to the right of the div
which is what I want but after I onmouseout
the icon goes back to where it originally rendered.
The following picture shows what it's currently doing:
This shows what I would like the image to look like when the div renders, but not out of the header:
HTML:
<ul id="primary-nav">
<li class='primary-link' style="text-align:right">
<a id="lnkChannel" runat="server">
<asp:image runat="server" id="menuImage" imageurl="Menu.gif"></asp:image>
</a>
<div class='secondary-nav-wrapper'>
<ul class='secondary-nav'>
<li>
<a class="title-image">
<span class='block-green'>Main Header 1</span>
</a>
<div class="menu-column">
<ul class="tertiary-nav">
<li>
<a class="tertiary-title" href="">link 1</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
CSS:
.header1 {
max-width: 60px;
}
.header1 .main-nav #primary-nav {
float: left;
}
.header1 .main-nav #primary-nav > li {
float: left;
}
.header1 .main-nav #primary-nav > li .secondary-nav-wrapper {
background-color: #eeeeee;
border-top: 3px solid #35a096;
border-bottom: 3px solid #35a096;
display: none;
}
.header1 .main-nav #primary-nav > li:hover > a {
background-color: #eeeeee;
}
.header1 .main-nav .secondary-nav {
margin-bottom: 10px;
overflow: hidden;
}
.header1 .main-nav .secondary-nav:before,
.header1 .main-nav .secondary-nav:after {
content: " ";
display: table;
}
.header1 .main-nav .secondary-nav:after {
clear: both;
}
.header1 .main-nav .secondary-nav > li {
border-right: 1px dotted #cccccc;
float: left;
margin: 6px 0 -5000px 0;
padding: 0 6px 5000px 6px;
}
.header1 .main-nav .secondary-nav > li .title-image {
overflow: hidden;
position: relative;
}
.header1 .main-nav .secondary-nav > li .title-image img {
display: block;
}
.header1 .main-nav .secondary-nav > li .title-image .block-green {
display: block;
font-weight: 700;
}
.header1 .main-nav .tertiary-nav {
margin-top: 10px;
}
.header1 .main-nav .tertiary-nav li {
line-height: 1;
margin-bottom: 8px;
margin-left: 5px;
}
.header1 .main-nav .tertiary-nav li a {
color: #3a3a3a;
display: block;
font-family: 'Arial';
font-size: 11px;
}
올바른 솔루션이 없습니다
제휴하지 않습니다 StackOverflow